Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 2 of 2 FirstFirst 12
Results 16 to 25 of 25
  1. #16
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jmrker View Post
    I'm not sure what the problem is.
    Method 2.....47 62 65 66 63 64

    Well, I do!

    Do you not see some, er, similarity, between the numerous quoted results?

    And at the other end of the array

    1 43 2 3 6 44 4 - looks not too random to me!

    The shuffle function I gave in post #10 is unbiased.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  2. #17
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Exclamation

    Quote Originally Posted by Philip M View Post
    Method 2.....47 62 65 66 63 64

    Well, I do!

    Do you not see some, er, similarity, between the numerous quoted results?

    And at the other end of the array

    1 43 2 3 6 44 4 - looks not too random to me!

    The shuffle function I gave in post #10 is unbiased.
    I'm not sure what your point is.
    I admit my recommendation stinks in post #15.
    I will add your version of the function to that test if you desire.
    The "randOrd()" function is small and quick to implement for testing,
    but I would avoid using it in any production code.

  3. #18
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jmrker View Post
    I'm not sure what your point is.
    I'll say it just one more time. Do you not think it odd that repeated trials of your Method 2 result in the final six values being

    47 62 65 66 63 64
    57 58 59 60 63 64
    59 60 61 62 65 66
    49 50 51 55 64 66
    56 57 59 61 65 66
    56 59 61 63 64 66
    60 61 62 63 64 65
    58 59 62 63 64 65
    56 58 61 64 65 66
    60 61 62 63 64 65
    65 55 57 58 61 66
    58 59 61 62 65 66

    Do you think that it is adequately random if the final number is always 64, 65 or 66?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  4. Users who have thanked Philip M for this post:

    palouseflyer (06-01-2013)

  5. #19
    New to the CF scene
    Join Date
    May 2013
    Posts
    5
    Thanks
    7
    Thanked 0 Times in 0 Posts
    This is odd to me too!

    I don't know that the Rnd methods are at fault, I suspect that there is some underlying "bias" within the arbitration from the "universe" itself. In other words, true random by ANY method will always (eventually) pick up patterns in nature. It is a part of the reality we live in.

    This is precisely what I have been analyzing in my "random" symbol sequences blog. I created a set of 78 playing cards that make use of 4 symbols, and began creating grids of the cards chosen at random "manually" shuffle, shuffle and draw a card at random from anywhere in the deck.

    I started to build out 12 x 12 = 144 card grids and began to notice some VERY odd (ie, consistent patterns, lines, bars, even letter forms, and pictures also) within these grids.

    My theory is that true "randomness" does not exist in nature. Mathematically we theorized it exists, and we create functions to mimic how we suppose random orders should behave as, IE < NO repeating patterns >.

    My tests show that it seems unavoidable to pick up patterns no matter WHAT method one uses! So, method, 1, 2, 3 ... X will all eventually pick up some sort of sequence that seems to negate the entire concept of randomness (as we think of random).

    You can see my work at my blog "Imminent contact" where I show diagrams of my results, drawings and photos. Some of the patterns are so obviously bizarre that I simply concluded it was a source issue, not a methodology issue (the repeating patterns are inherent in nature, and not the result of some flaw in the selection method). I chose to create "random results" by analog methods (like flipping a coin) rather than mathematical methods (which we are using here). However I suspect that the both methods will nevertheless pick up repeating patterns eventually.

    My hypothesis is that randomness simply does not exist in nature. Which is actually a SIMPLER hypothesis as contrasted with our "belief" in total chaos (pure randomness). Which satisfies the requirements of Occam's razor (the simpler hypothesis more likely to be true, among competing hypotheses). When you think about it, "true" chaotic systems are INFINITELY more complex than allowing for repeating patterns. It is simply that the human mind balks at embedded patterns within the source chaos, and so our own "prejudice" has caused us to "believe" more in pure chaotic systems where the possibility of intelligent ordering approaches 0 over an infinite range of results.

    (I theorize also that the source patterns are in fact intelligent, however that is purely speculation at this point. However the results seem to hint at intelligent ordering somehow somehow).

    Which leads one to speculate that "nature" carries source patterns that are intelligible (to the viewer) within the quantum source itself (or however you want to to term that quantum chaos "soup").

    You can examine my results (google, "imminent contact blogger").

    Thank you all so much for your help, I am using "method 1" for now and I am coding a simple web app that automates the generation of the 12x12 grids, as I have been drawing these by hand for quite a while now.

    I am also looking for a way to assign the results to specific cells in a <TABLE>. Is there a way to assign each RESULT from the 144 to a "specific cell" in a table?

    <cell 1 = "IMG54.JPG"><cell 2 = "IMG03.JPG"><cell 3 = "IMG24.JPG">

    and so on. Where I am going with that is I am also trying to generate the results into forced patterns, for an example a TABLE where the * represent empty <CELL>s so that I can pattern the results, IE:

    * * A * *
    * B * C *
    * * D * *
    E * * * F
    * * G * *
    * H * I *
    * * J * *

    And so on? Do you see where I am going with that?
    Thank you so much for your help everyone!
    Mike

  6. #20
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Exclamation

    Quote Originally Posted by Philip M View Post
    I'll say it just one more time. Do you not think it odd that repeated trials of your Method 2 result in the final six values being

    47 62 65 66 63 64
    57 58 59 60 63 64
    59 60 61 62 65 66
    49 50 51 55 64 66
    56 57 59 61 65 66
    56 59 61 63 64 66
    60 61 62 63 64 65
    58 59 62 63 64 65
    56 58 61 64 65 66
    60 61 62 63 64 65
    65 55 57 58 61 66
    58 59 61 62 65 66

    Do you think that it is adequately random if the final number is always 64, 65 or 66?
    Yes, I think it's odd.
    Yes, I no longer will use or recommend that randomizing function except when testing for my own purposes.
    No, I do not think it is an adequately random function.
    And no, I will not apologize to you on this topic further.
    So I'll say it just one more time ... What else do you want me to do?

  7. #21
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jmrker View Post
    Yes, I think it's odd.
    Yes, I no longer will use or recommend that randomizing function except when testing for my own purposes.
    No, I do not think it is an adequately random function.
    And no, I will not apologize to you on this topic further.
    So I'll say it just one more time ... What else do you want me to do?
    Nothing. I do not recall ever asking you to apologise. I simply pointed out the inadequacy of the randOrd() function which you seemed initially to favour.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  8. #22
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Exclamation

    Quote Originally Posted by Philip M View Post
    Nothing. I do not recall ever asking you to apologise. I simply pointed out the inadequacy of the randOrd() function which you seemed initially to favour.
    Which I have conceded at least three times. So drop it. Move on already.

  9. #23
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by palouseflyer View Post
    2 follow up questions:

    1. How to generate a 12 x 12 grid?
    Looks like no one else got to this.

    I have a working example that uses embedded SVG images at https://patrick.dark.name/web.dev/cf...thread.296120/. It works in the latest version of every browser for the most part.

    Only thing I haven't gotten working is the resizing behavior. Chrome and Opera don't seem to support viewport-based calc values after the initial page load; resizing the window doesn't resize the image. Works fine in Firefox and IE10 though.

    Here's the code at the link:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
    	<head>
    		<title>Demo for CodingForums.com Thread 296120</title>
    		<style>
    			* { margin: 0; }
    			html { background: white; color: black; font: 16px sans-serif; }
    			p, svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: calc(100vw * 0.8); margin: auto; }
    			[hidden] { display: none; }
    		</style>
    		<script>
    			// <![CDATA[
    			/* jshint bitwise: true, curly: true, eqeqeq: true, forin: true, immed: true, latedef: true, newcap: true, noarg: true, noempty: true, nonew: true, plusplus: true, quotmark: double, undef: true, unused: strict, strict: true, trailing: true */
    			(function () {
    				"use strict";
    				var namespaces = {};
    				namespaces.svg = "http://www.w3.org/2000/svg";
    				
    				// Constructs an element representing a random symbol.
    				function get_random_symbol(symbols, grid_column_width, grid_column_height) {
    					var random_symbol = {};
    					
    					// Determine whether a void (i.e., blank) symbol should be used based on a randomized percentage check.
    					// This allows control of how much space appears in the composition.
    					random_symbol.is_void = function () {
    						return Math.random() < 0.2;
    					};
    					
    					// Select a graphical symbol at random if is_void() is false.
    					// Otherwise, select the void symbol.
    					if (!random_symbol.is_void()) {
    						random_symbol.index = Math.floor(Math.random() * symbols.names.length);
    						random_symbol.name = symbols.names[random_symbol.index];
    					}
    					else {
    						random_symbol.name = symbols.void_symbol;
    					}
    					
    					// Create the symbol element and its attributes.
    					random_symbol.image = document.getElementById(random_symbol.name).cloneNode(true);
    					random_symbol.image.setAttributeNS(null, "width", grid_column_width.toString() + "px");
    					random_symbol.image.setAttributeNS(null, "height", grid_column_height.toString() + "px");
    					random_symbol.image.setAttributeNS(null, "viewBox", symbols.source.getAttribute("viewBox"));
    					
    					// Return the symbol for drawing.
    					return random_symbol.image;
    				}
    				
    				// Draws the symbol grid.
    				function draw_symbol_grid() {
    					var symbols = {};
    					var grid = {};
    					var viewport_width = document.defaultView.innerWidth;
    					var viewport_height = document.defaultView.innerHeight;
    					
    					// Specifies data on available symbols.
    					symbols.source = document.getElementById("symbols");
    					symbols.void_symbol = "void";
    					symbols.names = [
    						"arrowhead",
    						"circle",
    						"donut",
    						"hexagon",
    						"rectangle_trio",
    						"square",
    						"star",
    						"star_quintet"
    					];
    					symbols.width = 512;
    					symbols.height = 512;
    					
    					// Specifies the grid’s basic attributes.
    					// Column widths and row heights may be overridden later by the shrink method.
    					grid.columns = 12;
    					grid.rows = 12;
    					grid.column_width = 60;
    					grid.row_height = 60;
    					
    					// Specifies functionality for using the grid’s basic attributes.
    					grid.get_width = function () {
    						return grid.columns * grid.column_width;
    					};
    					grid.get_height = function () {
    						return grid.rows * grid.row_height;
    					};
    					
    					// Specifies functionality for shrinking the grid to ensure it fits within the viewport.
    					grid.shrink = function (shrink_ratio) {
    						grid.column_width *= shrink_ratio;
    						grid.row_height *= shrink_ratio;
    					};
    					
    					// Shrinks the grid’s dimensions as necessary to make the grid fit within the viewport.
    					if (grid.get_width() > viewport_width) {
    						grid.shrink(viewport_width / grid.get_width());
    					}
    					if (grid.get_height() > viewport_height) {
    						grid.shrink(viewport_height / grid.get_height());
    					}
    					
    					// Creates an element representing the grid.
    					grid.canvas = document.createElementNS(namespaces.svg, "svg");
    					grid.canvas.setAttributeNS(null, "version", "1.1");
    					grid.canvas.setAttributeNS(null, "width", grid.get_width().toString() + "px");
    					grid.canvas.setAttributeNS(null, "height", grid.get_height().toString() + "px");
    					grid.canvas.setAttributeNS(null, "viewBox", "0,0 " + grid.get_width().toString() + "," + grid.get_height().toString());
    					
    					// Creates working properties that will be used to draw the grid.
    					grid.working_column = 0;
    					grid.working_row = 0;
    					grid.working_symbol = null;
    					grid.get_symbol = function () {
    						return get_random_symbol(symbols, grid.column_width, grid.row_height);
    					};
    					grid.get_x_coord = function () {
    						return grid.working_column * grid.column_width;
    					};
    					grid.get_y_coord = function () {
    						return grid.working_row * grid.row_height;
    					};
    					
    					// Draws the grid.
    					while (grid.working_row < grid.rows) {
    						while (grid.working_column < grid.columns) {
    							grid.working_symbol = grid.get_symbol();
    							grid.working_symbol.setAttributeNS(null, "x", grid.get_x_coord().toString());
    							grid.working_symbol.setAttributeNS(null, "y", grid.get_y_coord().toString());
    							grid.working_symbol.setAttributeNS(null, "width", grid.column_width.toString());
    							grid.working_symbol.setAttributeNS(null, "height", grid.row_height.toString());
    							grid.canvas.appendChild(grid.working_symbol);
    							grid.working_column += 1;
    						}
    						grid.working_row += 1;
    						grid.working_column = 0;
    					}
    					
    					// Appends the element representing the drawn grid to the document.
    					document.body.replaceChild(grid.canvas, document.body.firstElementChild);
    				}
    				
    				// Invokes the grid drawing function after the document and all of its resources (e.g., images) are loaded.
    				document.defaultView.addEventListener("load", draw_symbol_grid, false);
    			})();
    			// ]]>
    		</script>
    	</head>
    	<body>
    		<p>This document requires JavaScript to function properly.</p>
    		<div hidden="hidden">
    			<svg id="symbols" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0,0 512,512">
    				<title>Symbols</title>
    				<defs>
    					<svg id="arrowhead">
    						<title>Arrowhead</title>
    						<polygon points="333.601,255.737 178.4,52.537 258.4,255.737 178.4,458.938">
    							<title>Arrowhead</title>
    						</polygon>
    					</svg>
    					<svg id="circle">
    						<title>Circle</title>
    						<circle cy="256" cx="256" r="168">
    							<title>Circle</title>
    						</circle>
    					</svg>
    					<svg id="donut">
    						<title>Donut</title>
    						<defs>
    							<mask id="donut_hole">
    								<title>Donut Hole</title>
    								<circle cy="256" cx="256" r="168" fill="white">
    									<title>Donut Mass</title>
    								</circle>
    								<circle cy="256" cx="256" r="68.8">
    									<title>Donut Hole</title>
    								</circle>
    							</mask>
    						</defs>
    						<circle cy="256" cx="256" r="168" mask="url(#donut_hole)">
    							<title>Donut</title>
    						</circle>
    					</svg>
    					<svg id="hexagon">
    						<title>Hexagon</title>
    						<polygon points="410,345.665 256,435.392 102,345.689 102,166.285 256,76.608 410,166.285">
    							<title>Hexagon</title>
    						</polygon>
    					</svg>
    					<svg id="rectangle_trio">
    						<title>Rectangle Trio</title>
    						<rect id="left_rectangle" x="77" y="115" width="102" height="282">
    							<title>Left Rectangle</title>
    						</rect>
    						<use xlink:href="#left_rectangle" transform="translate(128)">
    							<title>Middle Rectangle</title>
    						</use>
    						<use xlink:href="#left_rectangle" transform="translate(256)">
    							<title>Right Rectangle</title>
    						</use>
    					</svg>
    					<svg id="square">
    						<rect x="102" y="103" width="308" height="307">
    							<title>Square</title>
    						</rect>
    					</svg>
    					<svg id="star">
    						<title>Star</title>
    						<polygon points="256.013,69.445 316.586,192.166 452.031,211.854 354.01,307.4 377.159,442.283 256.013,378.611 134.866,442.283 157.991,307.4 59.969,211.854 195.415,192.166">
    							<title>Star</title>
    						</polygon>
    					</svg>
    					<svg id="star_quintet">
    						<title>Star Quintet</title>
    						<polygon points="259.2,147.012 286.45,208.813 353.576,201.5 313.7,256 353.576,310.502 286.45,303.201 259.2,365.002 231.949,303.201 164.824,310.502 204.699,256 164.824,201.5 231.949,208.813">
    							<title>Middle Star</title>
    						</polygon>
    						<polygon id="top_left_star" points="115.198,70.848 126.299,95.998 153.599,93.023 137.373,115.199 153.599,137.375 126.299,134.398 115.198,159.549 104.098,134.398 76.798,137.375 93.023,115.199 76.798,93.023 104.098,95.998">
    							<title>Top Left Star</title>
    						</polygon>
    						<use xlink:href="#top_left_star" transform="translate(281.604)">
    							<title>Top Right Star</title>
    						</use>
    						<use xlink:href="#top_left_star" transform="translate(0, 281.603)">
    							<title>Bottom Left Star</title>
    						</use>
    						<use xlink:href="#top_left_star" transform="translate(281.603, 281.604)">
    							<title>Bottom Right Star</title>
    						</use>
    					</svg>
    					<svg id="void"/>
    				</defs>
    			</svg>
    		</div>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  10. Users who have thanked Arbitrator for this post:

    palouseflyer (06-22-2013)

  11. #24
    New to the CF scene
    Join Date
    May 2013
    Posts
    5
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Dear arbitrator
    Thanks so much for your help here! I will need to look at your code some more to see how I can make use of it!

    For now, I am letting the browser simply paint out the screen and then I reduce the browser view size (Safari on Mac) until all the images fit in the window. That is working for now. I like your approach though.

    Appreciate your taking the time to reply!
    Mike

    here is the working page as it stands:
    http://astraangel.byethost9.com/quantum/default.htm

    Here is a sample output:


    Quote Originally Posted by Arbitrator View Post
    Looks like no one else got to this.

    I have a working example that uses embedded SVG images at https://patrick.dark.name/web.dev/cf...thread.296120/. It works in the latest version of every browser for the most part.

    Only thing I haven't gotten working is the resizing behavior. Chrome and Opera don't seem to support viewport-based calc values after the initial page load; resizing the window doesn't resize the image. Works fine in Firefox and IE10 though.

    Here's the code at the link:
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
    	<head>
    		<title>Demo for CodingForums.com Thread 296120</title>
    		<style>
    			* { margin: 0; }
    			html { background: white; color: black; font: 16px sans-serif; }
    			p, svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: calc(100vw * 0.8); margin: auto; }
    			[hidden] { display: none; }
    		</style>
    		<script>
    			// <![CDATA[
    			/* jshint bitwise: true, curly: true, eqeqeq: true, forin: true, immed: true, latedef: true, newcap: true, noarg: true, noempty: true, nonew: true, plusplus: true, quotmark: double, undef: true, unused: strict, strict: true, trailing: true */
    			(function () {
    				"use strict";
    				var namespaces = {};
    				namespaces.svg = "http://www.w3.org/2000/svg";
    				
    				// Constructs an element representing a random symbol.
    				function get_random_symbol(symbols, grid_column_width, grid_column_height) {
    					var random_symbol = {};
    					
    					// Determine whether a void (i.e., blank) symbol should be used based on a randomized percentage check.
    					// This allows control of how much space appears in the composition.
    					random_symbol.is_void = function () {
    						return Math.random() < 0.2;
    					};
    					
    					// Select a graphical symbol at random if is_void() is false.
    					// Otherwise, select the void symbol.
    					if (!random_symbol.is_void()) {
    						random_symbol.index = Math.floor(Math.random() * symbols.names.length);
    						random_symbol.name = symbols.names[random_symbol.index];
    					}
    					else {
    						random_symbol.name = symbols.void_symbol;
    					}
    					
    					// Create the symbol element and its attributes.
    					random_symbol.image = document.getElementById(random_symbol.name).cloneNode(true);
    					random_symbol.image.setAttributeNS(null, "width", grid_column_width.toString() + "px");
    					random_symbol.image.setAttributeNS(null, "height", grid_column_height.toString() + "px");
    					random_symbol.image.setAttributeNS(null, "viewBox", symbols.source.getAttribute("viewBox"));
    					
    					// Return the symbol for drawing.
    					return random_symbol.image;
    				}
    				
    				// Draws the symbol grid.
    				function draw_symbol_grid() {
    					var symbols = {};
    					var grid = {};
    					var viewport_width = document.defaultView.innerWidth;
    					var viewport_height = document.defaultView.innerHeight;
    					
    					// Specifies data on available symbols.
    					symbols.source = document.getElementById("symbols");
    					symbols.void_symbol = "void";
    					symbols.names = [
    						"arrowhead",
    						"circle",
    						"donut",
    						"hexagon",
    						"rectangle_trio",
    						"square",
    						"star",
    						"star_quintet"
    					];
    					symbols.width = 512;
    					symbols.height = 512;
    					
    					// Specifies the gridís basic attributes.
    					// Column widths and row heights may be overridden later by the shrink method.
    					grid.columns = 12;
    					grid.rows = 12;
    					grid.column_width = 60;
    					grid.row_height = 60;
    					
    					// Specifies functionality for using the gridís basic attributes.
    					grid.get_width = function () {
    						return grid.columns * grid.column_width;
    					};
    					grid.get_height = function () {
    						return grid.rows * grid.row_height;
    					};
    					
    					// Specifies functionality for shrinking the grid to ensure it fits within the viewport.
    					grid.shrink = function (shrink_ratio) {
    						grid.column_width *= shrink_ratio;
    						grid.row_height *= shrink_ratio;
    					};
    					
    					// Shrinks the gridís dimensions as necessary to make the grid fit within the viewport.
    					if (grid.get_width() > viewport_width) {
    						grid.shrink(viewport_width / grid.get_width());
    					}
    					if (grid.get_height() > viewport_height) {
    						grid.shrink(viewport_height / grid.get_height());
    					}
    					
    					// Creates an element representing the grid.
    					grid.canvas = document.createElementNS(namespaces.svg, "svg");
    					grid.canvas.setAttributeNS(null, "version", "1.1");
    					grid.canvas.setAttributeNS(null, "width", grid.get_width().toString() + "px");
    					grid.canvas.setAttributeNS(null, "height", grid.get_height().toString() + "px");
    					grid.canvas.setAttributeNS(null, "viewBox", "0,0 " + grid.get_width().toString() + "," + grid.get_height().toString());
    					
    					// Creates working properties that will be used to draw the grid.
    					grid.working_column = 0;
    					grid.working_row = 0;
    					grid.working_symbol = null;
    					grid.get_symbol = function () {
    						return get_random_symbol(symbols, grid.column_width, grid.row_height);
    					};
    					grid.get_x_coord = function () {
    						return grid.working_column * grid.column_width;
    					};
    					grid.get_y_coord = function () {
    						return grid.working_row * grid.row_height;
    					};
    					
    					// Draws the grid.
    					while (grid.working_row < grid.rows) {
    						while (grid.working_column < grid.columns) {
    							grid.working_symbol = grid.get_symbol();
    							grid.working_symbol.setAttributeNS(null, "x", grid.get_x_coord().toString());
    							grid.working_symbol.setAttributeNS(null, "y", grid.get_y_coord().toString());
    							grid.working_symbol.setAttributeNS(null, "width", grid.column_width.toString());
    							grid.working_symbol.setAttributeNS(null, "height", grid.row_height.toString());
    							grid.canvas.appendChild(grid.working_symbol);
    							grid.working_column += 1;
    						}
    						grid.working_row += 1;
    						grid.working_column = 0;
    					}
    					
    					// Appends the element representing the drawn grid to the document.
    					document.body.replaceChild(grid.canvas, document.body.firstElementChild);
    				}
    				
    				// Invokes the grid drawing function after the document and all of its resources (e.g., images) are loaded.
    				document.defaultView.addEventListener("load", draw_symbol_grid, false);
    			})();
    			// ]]>
    		</script>
    	</head>
    	<body>
    		<p>This document requires JavaScript to function properly.</p>
    		<div hidden="hidden">
    			<svg id="symbols" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0,0 512,512">
    				<title>Symbols</title>
    				<defs>
    					<svg id="arrowhead">
    						<title>Arrowhead</title>
    						<polygon points="333.601,255.737 178.4,52.537 258.4,255.737 178.4,458.938">
    							<title>Arrowhead</title>
    						</polygon>
    					</svg>
    					<svg id="circle">
    						<title>Circle</title>
    						<circle cy="256" cx="256" r="168">
    							<title>Circle</title>
    						</circle>
    					</svg>
    					<svg id="donut">
    						<title>Donut</title>
    						<defs>
    							<mask id="donut_hole">
    								<title>Donut Hole</title>
    								<circle cy="256" cx="256" r="168" fill="white">
    									<title>Donut Mass</title>
    								</circle>
    								<circle cy="256" cx="256" r="68.8">
    									<title>Donut Hole</title>
    								</circle>
    							</mask>
    						</defs>
    						<circle cy="256" cx="256" r="168" mask="url(#donut_hole)">
    							<title>Donut</title>
    						</circle>
    					</svg>
    					<svg id="hexagon">
    						<title>Hexagon</title>
    						<polygon points="410,345.665 256,435.392 102,345.689 102,166.285 256,76.608 410,166.285">
    							<title>Hexagon</title>
    						</polygon>
    					</svg>
    					<svg id="rectangle_trio">
    						<title>Rectangle Trio</title>
    						<rect id="left_rectangle" x="77" y="115" width="102" height="282">
    							<title>Left Rectangle</title>
    						</rect>
    						<use xlink:href="#left_rectangle" transform="translate(128)">
    							<title>Middle Rectangle</title>
    						</use>
    						<use xlink:href="#left_rectangle" transform="translate(256)">
    							<title>Right Rectangle</title>
    						</use>
    					</svg>
    					<svg id="square">
    						<rect x="102" y="103" width="308" height="307">
    							<title>Square</title>
    						</rect>
    					</svg>
    					<svg id="star">
    						<title>Star</title>
    						<polygon points="256.013,69.445 316.586,192.166 452.031,211.854 354.01,307.4 377.159,442.283 256.013,378.611 134.866,442.283 157.991,307.4 59.969,211.854 195.415,192.166">
    							<title>Star</title>
    						</polygon>
    					</svg>
    					<svg id="star_quintet">
    						<title>Star Quintet</title>
    						<polygon points="259.2,147.012 286.45,208.813 353.576,201.5 313.7,256 353.576,310.502 286.45,303.201 259.2,365.002 231.949,303.201 164.824,310.502 204.699,256 164.824,201.5 231.949,208.813">
    							<title>Middle Star</title>
    						</polygon>
    						<polygon id="top_left_star" points="115.198,70.848 126.299,95.998 153.599,93.023 137.373,115.199 153.599,137.375 126.299,134.398 115.198,159.549 104.098,134.398 76.798,137.375 93.023,115.199 76.798,93.023 104.098,95.998">
    							<title>Top Left Star</title>
    						</polygon>
    						<use xlink:href="#top_left_star" transform="translate(281.604)">
    							<title>Top Right Star</title>
    						</use>
    						<use xlink:href="#top_left_star" transform="translate(0, 281.603)">
    							<title>Bottom Left Star</title>
    						</use>
    						<use xlink:href="#top_left_star" transform="translate(281.603, 281.604)">
    							<title>Bottom Right Star</title>
    						</use>
    					</svg>
    					<svg id="void"/>
    				</defs>
    			</svg>
    		</div>
    	</body>
    </html>

  12. #25
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by palouseflyer View Post
    Thanks so much for your help here! I will need to look at your code some more to see how I can make use of it!
    If you have a specific use case, I may be able to create a modified version that suits your needs.

    I used this as a personal study on the canvas element and later SVG after I decided that canvas was problematic, so this thread was helpful to me as well. (canvas becomes blurry when upscaled because it's a raster format whereas SVG is, of course, a vector format without that issue. canvas also doesn't reliably draw SVG images across browsers. The only advantage canvas has is that you can right-click it and save it as an image in Firefox.)

    Quote Originally Posted by palouseflyer View Post
    For now, I am letting the browser simply paint out the screen and then I reduce the browser view size (Safari on Mac) until all the images fit in the window. That is working for now. I like your approach though.
    This can be handled dynamically. If you open my demo and reload it at different window sizes, you'll notice that the script dynamically sizes the symbol grid to the viewport ensuring that it will always fit and that there will always be space between the grid and viewport boundaries.

    I never did get around to making it so that the grid dynamically resizes when the window is resized (without a reload) though. I recall trying it and the computations were complex enough that I abandoned the effort.

    Quote Originally Posted by palouseflyer View Post
    here is the working page as it stands:
    http://astraangel.byethost9.com/quantum/default.htm
    Interesting approach.

    It could be made easier to modify with SVG though in terms of adding and removing symbols, changing scales, and changing space distribution.
    For every complex problem, there is an answer that is clear, simple, and wrong.


 
Page 2 of 2 FirstFirst 12

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •