tag:blogger.com,1999:blog-4573685306227924872024-02-06T20:57:38.652-08:00Procedural GraphicsDave Lawrencehttp://www.blogger.com/profile/13478596509691546658noreply@blogger.comBlogger23125tag:blogger.com,1999:blog-457368530622792487.post-2081183627355720072015-04-01T18:55:00.003-07:002015-04-01T18:55:35.371-07:00"They Live" Adblock mode<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
There's a browser extension called <a href="https://github.com/adblockplus">Adblock Plus</a> which detects and removes ads from web pages.<br />
<br />
A neat hack is to replace the images with something else -this has been done with <a href="http://catblock.getadblock.com/">Catblock</a>, which replaces them with pictures of cute cats.<br />
<br />
In the 80s classic action move <a href="http://www.imdb.com/title/tt0096256/">They Live</a>, the protagonist gets some high-tech sunglasses which allow him to see the world as it really is:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUAa6UvaarKz2W1AjdDZ6xW2mcmDB6PIo-Y6OuTX6ZQ77D7jb24NNJHqSbcGtxTtrBFwNwJeXM3LOaGMJDusJwllUVYpqaneikKADvk3RXGZYzpwFJrICmrqPX8jPVBlLQES-mojXlXrI/s1600/they-live-billboards-messages-john-carpenter.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUAa6UvaarKz2W1AjdDZ6xW2mcmDB6PIo-Y6OuTX6ZQ77D7jb24NNJHqSbcGtxTtrBFwNwJeXM3LOaGMJDusJwllUVYpqaneikKADvk3RXGZYzpwFJrICmrqPX8jPVBlLQES-mojXlXrI/s1600/they-live-billboards-messages-john-carpenter.jpg" height="143" width="320" /></a></div>
<br />
Today marks the 2nd April 1st in a row that I've failed to get around to implementing the idea, so I throw it out there to the world in the hope that someone else will do the hard work for me and I'll be able to use it in my browser. Good luck!<br />
<br /><br />Dave Lawrencehttp://www.blogger.com/profile/13478596509691546658noreply@blogger.com2tag:blogger.com,1999:blog-457368530622792487.post-86548611938058016902011-10-11T05:40:00.001-07:002022-03-15T19:07:40.774-07:00LSystem 4<a href="http://davmlaw.github.io/ProceduralGraphics/lsystem4.html"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5662213663996151906" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ufEegAMMehqwWNUtvZIobJ8RbS0DYHffu-uvNRPYxS5qi2wDpnHT6OX3QHQW9AAVMWM6g7EW2cIxT9yChFt_Wkiui4RM62i0CXcpV3J8TpaVHLmErU5WFwd9NTJ6MmOt02RA4h3SDLg/s320/lsystem4.png" style="cursor: pointer; float: left; height: 200px; margin: 0px 10px 10px 0px; width: 200px;" /></a>
Click the image on the left to launch the demo.
Added Google maps style scrolling, click & drag to move around.Dave Lawrencehttp://www.blogger.com/profile/13478596509691546658noreply@blogger.com2tag:blogger.com,1999:blog-457368530622792487.post-68221529272122505972011-06-06T08:46:00.000-07:002011-07-04T07:15:38.106-07:00Nature<div style="text-align: center;"><span style="font-style: italic;">"</span><em style="font-style: italic;">I think that I shall never see</em><span style="font-style: italic;">, a poem lovely as a </span><em style="font-style: italic;">tree</em><span style="font-style: italic;">"</span><br />-Alfred Joyce Kilmer<br /></div><br />It's often said the beauty of nature far surpasses that of man. With the goal of this site being to generate pretty pictures algorithmically, I thought it would be interesting to think about how nature works from this perspective, so we can shamelessly rip off its ideas.<br /><br /><span style="font-weight: bold;">There are a small amount of types</span><br /><br />Nature seems to work with "alphabets", ie a small number of types that combine together at different levels to produce different behaviour.<br /><br />Eg quarks combine to form electrons/protons/neutrons which combine to form the chemical elements. I don't think this is just how science has been modelled by humans, but rather a necessary part of its ability to generate complex outcomes like the universe & nature and intelligent beings like us actually thinking and experiencing it all.<br /><a name='more'></a><br /><div><br />More alphabets: 4 letters in DNA, combinations of which can be read as instructions to make a limited number of amino acids, which are again combined to make proteins, which make cells, which make up living things.<br /><br />Invented examples include alphabets (letters, words, sentences) and binary code (bits which can encode data and assembly instructions, how large programs are composed of smaller parts like functions).<br /><br />It's interesting to ponder whether things "have to be this way". We know from Chinese that there is a different way to represent words with symbols than one used in the English-style alphabet, and while the graphical representation may arguably look better than letters making up words, they don't compress as well. That letters work at all seems to indicate humans only speak with a limited number of sounds as well. The fact that humans and nature both use this seems to indicate it's a good design decision (not forgetting humans are part of nature, so it's discovered to be useful yet again, in a system running another level up)</div><div><br /></div><div><span style="font-weight: bold;"></span><span style="font-weight: bold;">Complexity comes from iterations, interactions and feedback loops</span><br /><br />If there are a small amount of types, and a <a href="http://en.wikipedia.org/wiki/Fundamental_interaction">small amount of laws</a> - where does the complexity come from? The answer (in our terms) is the sheer amount of interactions and calculations! The numbers are enormous:<br /><br />-3 billion nucleotides (letters) in human genome<br />-trillions of atoms in a cell<br />-trillions of cells in an animal<br />-billions of galaxies (a fun <a href="http://www.youtube.com/watch?v=v6shurn2W0w">simulator</a>)<br />-universe is billions of years old<br /><br /><span style="font-weight: bold;">Instructions and data are one</span><br /><br />Letters in DNA (after a few processes) are interpreted as instructions for a <a href="http://en.wikipedia.org/wiki/Ribosome">molecular machine</a> to produce certain proteins. But that abstraction is leaky - the "letters" are not just instructions, they are also atoms, and so have certain charges and properties. They can interact with other atoms, causing all kinds of interactions, including generating more sequences which can float free away from the genome, to interact with other machines and processes.</div><div><br /></div><div>Some sequences have atomic shapes and charges which cause them to fold up into machines of many varieties, including a <a href="http://en.wikipedia.org/wiki/Ribosome">ribosome </a>which interprets sequences to generate proteins. This generates even more complicated structures, which again can interact.</div><div><br /></div><div>Building up from there you create ever more complex molecular machinery, including ones that alter the sequence in various ways (fix / snip / replace / replicate / mutate) or alter, destroy, enable etc other machines on the way to finally generating biological outcomes. See wiki article on <a href="http://en.wikipedia.org/wiki/Feedback#Biology">biological feedback</a></div><div><br />Computers store both <a href="http://en.wikipedia.org/wiki/Von_Neumann_architecture">data and assembly instructions</a> as bits in memory. Some computer languages (eg <a href="http://en.wikipedia.org/wiki/Lisp_%28programming_language%29">Lisp</a> and other dynamic languages)<span style="font-weight: bold;"><span style="font-weight: bold;"></span> </span>allow you to manipulate both data and code, which can be extremely powerful. I think the amount of power in this is extremely large, and currently very underutilised.</div><div><br /></div><div><div><span class="Apple-style-span" style="font-weight: bold; ">Output</span></div></div><div><br />Try to imagine the amount of computation required to perform the following:<br /><br />A universe worth of particles interact with each other. Some form replicating patterns, converting inert atoms to replicating ones. These instructions, which execute atop the laws of physics can interpret and modify themselves, and some are better at utilising resources and replicating themselves than others. The best ones spread, and variety causes the better instructions to occupy all available niches, which of course shift as they are all interacting and competing with each other.<br /><br />Run this simulation for billions, and billions of years. What's the output? If you hit a breakpoint - the code would be the current genetic diversity of all living creatures of earth.<br /><br />The data is the organic matter in the soil, the atmosphere with free oxygen and all of the atoms arranged into the flowers, feathers, leaves, seeds, hair, teeth, flesh and fins of life which covers the surface of the planet - and all of this beauty and unimaginable complexity emerged from the repeated application of relatively simple algorithmic processes.</div><div><br /></div><div><div><div><b>Coding goal</b></div><div><br /></div><div>Construct a program that has an "alphabet which is interpreted and executed or run on a simulation that can build something that can run over the instructions again and produce something else"</div><div><br /></div><div>I think this feedback loop would be enough to kick off an evolving system that uses its own success as a fitness selector (so genetic algorithms to running for a while would push out the complexity (hopefully!))</div><div><br /></div><div>Implementation would be a tree of characters (letters/symbols etc) which represent represent strings of javascript (which can be copied then slightly altered in various ways (eg swapping out variables, altering stack positions etc, altering program in other ways))</div></div></div><div><br /></div>Dave Lawrencehttp://www.blogger.com/profile/13478596509691546658noreply@blogger.com4tag:blogger.com,1999:blog-457368530622792487.post-28640150400645754992011-06-05T21:31:00.001-07:002022-03-15T19:08:02.097-07:00Cloud fighter v0.1<a href="http://davmlaw.github.io/CloudFighter"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5615172931215770002" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO0jaYIOUHhNrdeLrAm5JIPOEFNy6TcoOqdclarjuDEUvgchx6ovsXq4d-8k6WkBKqd_Sl6M1ouw-B_uo1Snk3CeceCMEIJEN_REWbeVqfM99ZS05KM31lJQB90nlWm8UIRPdBJn3w0-8/s320/cloudfighter.png" /></a>
One benefit of procedural content generation is to get a lot of content from a little bit of code. Traditionally this was done with clever algorithms, but another way is to utilise online <a href="http://en.wikipedia.org/wiki/Cloud_computing">cloud services</a> to generate content for you.
A huge proportion of the effort required to make a game similar to 1942 is art and design of levels. By abusing free online services and the hard work of thousands, I can make <a href="http://davmlaw.github.com/CloudFighter">a very quick version</a> in minutes using Javascript. Click the image to play & use the arrow keys to turn and space to drop bombs.
Note: the game is currently really crap with no death or ending. I've been really slack on finishing this off, but will get around to it one day.Dave Lawrencehttp://www.blogger.com/profile/13478596509691546658noreply@blogger.com2tag:blogger.com,1999:blog-457368530622792487.post-84939165862724846312011-05-24T03:07:00.000-07:002022-03-15T19:47:07.294-07:00Reminiscing on XTux<a href="http://xtux.sf.net/"><img alt="" border="0" src="http://xtux.sourceforge.net/screenshots/xtux_slashdot_railgun.jpg" style="cursor: pointer; float: left; height: 190px; margin: 0px 10px 10px 0px; width: 214px;" /></a> Way back in 1999, I wrote a game (in C using raw X-Windows calls! <a href="https://github.com/davmlaw/xtux">source code</a>) for Linux called <a href="http://xtux.sf.net/">XTux</a>. <div>
</div><div>The graphics were made by my friend James Andrews (who recently started a <a href="http://www.themadbug.com/blog/">blog on iPhone games</a>)<div><div>
</div><div>Some interesting things I remember from the project:</div><div>
</div><div>-All data was in flat text. <a href="https://github.com/davmlaw/xtux/blob/master/data/maps">The maps</a> kind of looked like <a href="https://github.com/davmlaw/xtux/blob/master/data/maps/wwt.map">ASCII art</a>. </div><div>
</div><div><div><div><div>-You could write text strings onto the maps (see Slashdot level screenshot)</div></div></div><div>
</div><div><div>-<a href="http://en.wikipedia.org/wiki/Particle_system">Particle System</a> (see railgun trail and blood splatter in screenshot). One of the most common forms of procedural graphics, now standard in most game engines - this was my 1st implementation and I got a lot of use out of the code (weapon effects, smoke, explosions, blood etc)</div></div></div><div>
</div><div>-Recording/playing demos was a nice hack: The client was very simple - read messages about what to draw from the server. By taking advantage of the polymorphism in Unix file descriptors, the source could be either a socket connected to the server, or a stored local file of previous gameplay.</div><div>
</div><div>-Generating different images (eg <a href="http://xtux.sourceforge.net/screenshots/minimap.jpg">preview mini maps</a>) from displaying the same map data in different ways.</div><div>
</div><div><div><div>-Because the levels were flat text, I was able to easily write a Perl script to generate levels, though I didn't take that beyond generating an arbitrary sized maps of grass with randomly placed trees.</div></div></div><div>
</div></div></div>Dave Lawrencehttp://www.blogger.com/profile/13478596509691546658noreply@blogger.com1tag:blogger.com,1999:blog-457368530622792487.post-25325106435970162242011-04-06T02:49:00.000-07:002011-05-24T03:03:37.748-07:00WebGL - 3d in the browserYou may have noticed the software on this blog is written in javascript (HTML5 Canvas), with the goal being you don't have to download any software to view the demos.<br /><br />The trade off is things run much slower than native code. But computers are really fast nowdays & and people's attention span and desire to install software is very low.<br /><br />Finally there seems to a 3d web standard emerging, <a href="http://en.wikipedia.org/wiki/WebGL">WebGL</a> - a 3d version of the 2d canvas library I have been using, and so fits in the same niche described above. <a href="http://www.doesmybrowsersupportwebgl.com/"><span style="text-decoration: underline;">Click to find out "does your browser support WebGL?"</span></a><br /><br />Some cool examples: <a href="http://www.chromeexperiments.com/webgl">http://www.chromeexperiments.com/webgl</a><br /><br />A Tron Lightcycle game on 3d surface: <a href="http://cycleblob.com/">http://cycleblob.com/</a>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-457368530622792487.post-63925917587238784802010-08-26T04:54:00.000-07:002022-03-15T19:08:34.982-07:00Skies & Silhouettes<a href="http://davmlaw.github.io/ProceduralGraphics/skies_and_silhouettes.html"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5662189434447037186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKIATLnfRYo6YDUUZn0_14Yx5HKP3UofMkVJJXtt9EJohOWgUSyB2RH6tt-MsCvIwzUD506UoX13RrErm7SmXLaCQdxY4JNE70PBN5wM6SnAdplqR3puwbzbSGvxN3gZaTPe6bZ3ruT1Q/s320/skies_silhouette.png" style="cursor: pointer; float: left; height: 174px; margin: 0pt 10px 10px 0pt; width: 174px;" /></a>
Click the image on the left to start the demo. <span style="font-weight: bold;">Update: </span>There appears to be a bug that shows up in Chrome, where the sky is really blocky, but it works fine in FireFox.
I've got big plans for doing a project with heaps of skies and silhouettes (I'm kind of obsessed by them), and made <a href="http://davmlaw.github.com/ProceduralGraphics/skies_and_silhouettes.html">this little program</a> to quickly test out what different generated skies look like.
I had fun playing with it, hope you do too. Try out some examples, change the color values and click the button.
<span style="font-weight: bold;">Update:</span> (23/9/10) Added MaxAlpha setting, the actual alpha is a random number between 0 and this value, so the fact that you can set a number much higher than 255 is a feature not a bug.Anonymousnoreply@blogger.com2tag:blogger.com,1999:blog-457368530622792487.post-83980925931302517822010-06-19T08:57:00.000-07:002022-03-15T19:08:57.120-07:00Flock in a cloudy blue sky<a href="http://davmlaw.github.io/ProceduralGraphics/flock_in_a_perlin_sky.html"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5662189750791289986" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcBmcELTIufh1TO_uDgkigSAbPzRfmweyObJDzesnW5gYj0wIGXye2AtG99QCGXgrxOFJgVjMkfdJ4Og7RBvGYxHHQZ1jnuipiCA_elNb8XynAMmB2ESWpH2Kx7nr1Mj6I8bNTOk56KUM/s320/flock_sky.png" style="cursor: pointer; float: left; height: 201px; margin: 0pt 10px 10px 0pt; width: 201px;" /></a>
<span style="font-style: italic;">Click on the image to load the canvas demo (requires FireFox or non-IE browser)</span>
I took the existing Javascript boids implementation from <a href="http://www.coderholic.com/javascript-boids">Coderholic</a>, and made it look pretty with swallows on a cloudy background.
The birds follow the standard 3 rules for Boids as first implemented by <a href="http://www.red3d.com/cwr/boids/">Craig Reynolds</a>
<span style="font-weight: bold;">Separation:</span> steer to avoid crowding local flockmates
<span style="font-weight: bold;">Alignment:</span> steer towards the average heading of local flockmates
<span style="font-weight: bold;">Cohesion:</span> steer to move toward the average position of local flockmates
These simple rules for each individual leads to the group behavior - there is no central group intelligence or control. Flocking behaviors like this are often described as being <a href="http://en.wikipedia.org/wiki/Emergence">emergent</a>.
<span style="font-weight: bold;">Update:</span> (23/9/10) There is now an initial pause as the simulation runs 500 steps before displaying the boids. This removes the ugly initial craziness before they start flocking properly.Anonymousnoreply@blogger.com2tag:blogger.com,1999:blog-457368530622792487.post-71127116583822877042010-06-17T04:50:00.000-07:002022-03-15T19:22:17.505-07:00LSystem 3Click on the image below to load the canvas demo (requires FireFox or non-IE browswer)
<div class="separator" style="clear: both; text-align: center;"><a href="http://davmlaw.github.io/ProceduralGraphics/lsystem3.html" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="632" data-original-width="986" height="205" src="https://blogger.googleusercontent.com/img/a/AVvXsEjMyJT5bBmoldatWFtPdfkEemdqt-yqVgjYFXzg-_zz3aAXb8mZN3twJWMrNXGfYc9TnzRKxjzXP12CwAx9lTgJkvrhZqUwWsUdFct2te759Q0wPN9WfWiT6ACef3Mzusvxh1x-SWO5DeBsXbAa8Eq82uQYKWUcYItTm5oHMoPYZYD_rvWW6RH0OE4=s320" width="320" /></a></div><br /> I added a zoom, and moved the Javascript into its own file.
A tip is to zoom with a very low iteration, as otherwise it is very slow. I am going to look at rendering to a buffer and allowing scrolling.Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-457368530622792487.post-27446718101161779832010-06-07T08:42:00.000-07:002022-03-15T19:09:46.520-07:00Falling Leaves<a href="http://davmlaw.github.io/ProceduralGraphics/fall.html" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5662220602940132802" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi0HFKYPXU_w-50LRHx1oT1aCqEJ0E43r1S_qksx3CEudNFwtzuPec78rqMogaI6hJ1gIswbW-oXuuCtB-I5_W9M0n3DKM-CxpK0iMJvKywUeb2DhriX1Okc1QitQmt0QzxPH_xtoeNXQ/s320/fall.png" style="cursor: pointer; float: left; height: 250px; margin: 0px 10px 10px 0px; width: 250px;" /></a>
Click on the image on the left to load the canvas demo (requires FireFox or non-IE browser). As with all of these demos, try clicking reload a few times to see different random versions.
Just an idea I had while riding my bike home, looking at fallen leaves (it's the start of winter here)
I changed the l-system renderer to use curves which I think makes the trees look more natural. I also used the <a href="http://proceduralgraphics.blogspot.com/2010/03/canvas-wrapper-with-gettransform.html">canvas wrapper</a> to be able to get the position of the leaves as they are generated so I can animate them.
<span style="font-weight: bold;">Update: </span>(23/9/10) Added hack to make leaves appear to collect on the ground beneath the trees.Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-457368530622792487.post-15155462044689392502010-05-18T08:26:00.000-07:002022-03-15T19:21:37.513-07:00Cloudy blue Perlin sky<div class="separator" style="clear: both; text-align: center;"><a href="http://davmlaw.github.io/ProceduralGraphics/cloudy_blue_perlin_sky.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="160" data-original-width="404" height="155" src="https://blogger.googleusercontent.com/img/a/AVvXsEgLAvFt1j9nKEq0xOy20v2cqTaxg8jggyMWm6xSINe4aVmTE8XRB9R9IZn0VCVNYOSIQ4n70Rv-Rd2fUpLqcMVJ-NsVZYzD3Y_1sLuax3PKeIq5i43mPW5mNzD6d_jSMfT1koj7o1d7HxtUZmsKIRMUzqa5Slqs6WJC-RWdLsyWJMy9kDzVxb4vp2M=w270-h155" width="270" /></a></div><br />Click on the image to load the canvas demo (requires FireFox or non-IE browser)
<a href="http://en.wikipedia.org/wiki/Perlin_noise">Perlin Noise</a> is a technique for generating procedural textures, commonly used for smoke, clouds or to add a random looking realistic roughness to surfaces.
The algorithm is basically to generate noise, then scale that noise randomly across an image at different sizes and levels of transparency. This creates a self similarity which mimics the appearance of some natural processes.
I found a canvas implementation by <a href="http://www.ozoneasylum.com/30982">iron_wallaby</a> and made the noise be the transparency of pure white, giving a cloud like effect. This was originally going to be just the background for another canvas demo I was working on, but that is delayed as I'm currently doing bioinformatics study/working on a project in my spare time.
Things to improve on this are restricting how cloudy it is to a range, and removing some visual artifacts (lines/blockiness)Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-457368530622792487.post-2790099063106760872010-04-13T06:41:00.000-07:002022-03-15T19:10:11.655-07:00Russian Dolls - Random combinations<a href="http://davmlaw.github.io/ProceduralGraphics/russian_dolls.html"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5665205536779515058" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgASu7o3wngY5qleYzQUm42NznFk-51Dla8cPmnSpRIGiQR8zTCjinqE6uv8yK6pM_MPUEc8HkElCoTqwx50kKEdsoG1Rm9zhfVvX0x12RUze5vxB0xRbCRI7AuAvqv_wotksA0FNOAbWE/s320/Screenshot+at+2011-10-20+00%253A36%253A32.png" style="cursor: pointer; float: left; height: 262px; margin: 0px 10px 10px 0px; width: 261px;" /></a>
Click on the image on the left to load the canvas demo (requires FireFox or non-IE browser)
This demo shows how a huge amount of content can be generated by randomly combining variations. This technique is useful as for example a crowd of identical people looks unnatural, but you don't necessarily care what the individuals look like, so long as they match a general theme.
The numbers get large very quickly - for instance 3 variations of hair color, and 2 of eye color gives 3 * 2 = 6 possible combinations (assuming independent assortment). Adding another trait multiplies this again, and soon the number of possible variations becomes enormous.
The code internals do not resemble genetics, but there is a similar idea in nature, with <a href="http://en.wikipedia.org/wiki/Allele">alleles</a>. In the future I may use the dolls and their many variations as phenotypes for some experiments in this area.
The reason I chose to use Russian dolls (aside from just liking their recursive nature) is because my daughter Caitlin has lots of them on various clothes, bags, sheets etc, so this is for her.
It works fine in FireFox but there is something strange going on with parts of the faces not being drawn in some versions of Chrome.Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-457368530622792487.post-82666681732024496082010-03-17T06:48:00.000-07:002015-05-19T05:05:03.696-07:00Canvas Wrapper with getTransform()The Canvas spec does not include a getTransform() method, so after performing rotation/scale/translation operations there is no way to work out where you really are.<br />
<br />
So, I have created a <a href="http://davmlaw.github.com/ProceduralGraphics/canvas_wrapper.js">wrapper class</a>, which sits over the top of Canvas, and should behave exactly the same, except you now have a getTransform() method which returns a matrix such that the following doesn't do anything:<br />
<pre>var m = ctx.getTransform();
ctx.setTransform( m[0][0], m[0][1], m[1][0], m[1][1], m[2][0], m[2][1] );</pre>
To use, add the following line:<br />
<pre><script type="text/javascript" src="canvas_wrapper.js"></script></pre>
then wrap your canvas object in a CanvasWrapper, ie:<br />
<pre>ctx = new CanvasWrapper(document.getElementById("canvas").getContext("2d"));</pre>
It works by duplicating Canvas' matrix operations, and mimicking the Canvas interface. An annoyance is that Canvas has public fields, instead of accessor methods, so I can't tell when it has been changed and have to update the canvas state before any drawing call.<br />
<br />
<b>Update 10/2/2013:</b> Thanks to <a href="https://github.com/heikkipora">Heikki Pora</a> for a patch adding some missing features.<br />
<br />
<b>Update 19/5/2015:</b> The HTML Spec now includes <a href="https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-currenttransform">context.currentTransform</a> but it doesn't work for me in Firefox or Chromium, ctx.mozCurrentTransform does work in Firefox.Anonymousnoreply@blogger.com4tag:blogger.com,1999:blog-457368530622792487.post-88211062392910651842010-03-16T07:34:00.000-07:002022-03-15T19:25:45.685-07:00L-System v2<p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEg3GytYC69RtOYd7zAn-p4xQ_c76zokkSZGXd6BZh94qQjwtytGWvaKWjvIFIIXQ3BWlnlbf63ILiuT8ZrQhgepcl9lKXtLPHy93-5zic4cerx8qJcowDmjoB7dsUD5dmkOHBpOx9PdC28LKNT7lwqYRg664WRPaqt2W7DGZKoJa5FnOHyntCFteH0=s986" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="632" data-original-width="986" height="137" src="https://blogger.googleusercontent.com/img/a/AVvXsEg3GytYC69RtOYd7zAn-p4xQ_c76zokkSZGXd6BZh94qQjwtytGWvaKWjvIFIIXQ3BWlnlbf63ILiuT8ZrQhgepcl9lKXtLPHy93-5zic4cerx8qJcowDmjoB7dsUD5dmkOHBpOx9PdC28LKNT7lwqYRg664WRPaqt2W7DGZKoJa5FnOHyntCFteH0=w214-h137" width="214" /></a></div><br /> <p></p><p>I have modified my <a href="http://proceduralgraphics.blogspot.com/2009/11/l-system.html">previous L-System demo</a> and added a few new features. Click on the image on the left to load the canvas demo.
The axiom, rules and angle are now in editable fields, so you can change them and click [update] to view. This makes it quite quick to play around and explore l-systems.
For the code internals, I separated out the l-system code into its own .js file, and also changed how the turtle works. Instead of a case statement, it now uses a map of functions, which looks like this:
</p><pre>return {
// Turn right
'+': function(args) { args.ctx.rotate(vary( args.angle, args.angle * args.angleVariance)); },
// Turn left
'-': function(args) { args.ctx.rotate(vary(-args.angle, args.angle * args.angleVariance)); },
// Push
'[': function(args) { args.ctx.save(); args.depth++; },
// Pop
']': function(args) { args.ctx.restore(); args.depth--; },
// Draw forward by length computed by recursion depth
'|': function(args) { args.distance /= Math.pow(2.0, args.depth); drawForward() },
'F': drawForward,
'A': drawForward,
'B': drawForward,
'G': goForward
};
</pre>This makes it extremely easy to add new turtle commands, for instance to draw a green dot every time you see a 'L' just add the following to the map:
<pre>turtleHandler['L'] = function(args) {
args.ctx.fillStyle = '#00ff00';
args.ctx.beginPath();
args.ctx.arc(0, 0, 2, 0, 2 * Math.PI, true);
args.ctx.fill();
}
</pre>
This was used to draw the leaves in the image above. To get 'L's in the right place in the l-system, I used 'L->' as the first rule, which deletes all existing 'L's, so the only ones that remain at the end of the iterations are the most recently created ones, which are on the (appropriately named) leaf nodes.
TODO: Make extra functions an editable field, make better alignment/zooming.<br />Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-457368530622792487.post-9935636826869030852010-01-24T21:59:00.000-08:002010-06-18T22:54:19.464-07:00Thoughts on the degrees of procedural graphicsProcedural graphics is where content is generated by an algorithm, rather than by an artist. This is not either/or, but exists on a continuum.<br /><br />You could probably argue that all computer graphics are at least somewhat procedural. Digital cameras use algorithms to turn light into image files, and image editors (like Photoshop) apply effects, driven by users input to manipulate pixels. 3d modelling programs do a lot of behind the scenes work on low level vertex positioning, so the artists can concentrate more on the overall shape and animation.<br /><br />Even though the data was created using algorithms and tools, most people would not consider them procedurally generated as the output content is made to the vision of the artist and firmly under their control. But the lines get blurred more as we go from creation to display. Once the 3d model is made, the steps from there to the final image on the screen involves an immense numbers of calculations as the model is loaded, transformed, textured, lit and then projected onto the camera.<br /><br />3d animation has moved to become more procedural over the years, and is a good example of the tradeoffs that come with this decision. Consider animating a 3d model of a man running.<br /><br /><span style="font-weight: bold;">Static frames</span><br />Store the 3d points of the man for each frame of his walking. While the artist here has total control, they must spend a lot of effort and memory making lots of frames, and this generally looks jerky with "popping" between frames.<br /><br /><span style="font-weight: bold;">Key frames</span><br />Store 3d points of <a href="http://en.wikipedia.org/wiki/Key_frame">key frames</a> and interpolate between them. For instance say you have 2 frames of walking animation with a 1 second transition. The renderer takes the 2 values, then picks a point inbetween them based on how much time has passed. While this is a big improvement on the static frames above, it can look somewhat unnatural as organic beings don't move in straight lines.<br /><br /><span style="font-weight: bold;">Bones</span><br />Models are constructed with internal bones, which have their movement constrained by joints which store ranges of motion. The surface skin is then calculated based on bone positions.<br /><br />As you can see, the general progress has been towards the artist working more generally, and surrendering low level details like the final location of vertices to simulation. Simulation means the graphics are driven by the state of the world, which can be determined by user input and code (for instance physics and artificial intelligence).<br /><br />The possible outcomes in simulations are near infinite. Id software (creators of Quake) were suprised when players used in-game explosions to push themselves extremely high in the air. Consider a screenshot of someone standing in part of a level the designers never expected. Where did this image come from? The artists? The programmers? The players? The answer is all of them, and it emerged out of the rules of the simulation.<br /><br />Computers are getting relentlessly faster so we can display more and more, and the artists need help to generate the massive amounts of data. Instead of animating each strand of hair on a model, they designate types of hair which are animated and rendered by special tools. Instead of constructing trees by hand in a modelling program, there is <a href="http://www.speedtree.com/">software which can generate a whole forest worth of trees for you</a>. There are algorithms for all kinds of effects, from water, clouds, rock textures to simulating crowds, <a href="http://www.imdb.com/title/tt0167260/">battling armies</a> or <a href="http://www.imdb.com/title/tt0455824/">herding animals</a>.<br /><br />The advantages of moving to procedural generation are (in some cases) more natural looking environments, adjustable detail levels based on CPU speed, and quicker development. This is actually more akin to how things are done in real life - when a movie director wishes to film a forest scene he goes to a real forest that resembles what he had in mind, he doesn't have his art department construct thousands of trees by hand, which is more akin to current computer techniques.<br /><br />My belief is that the future of computer graphics will continue this development of moving low level control to simulation. Content creation tools (like 3d modellers) will further integrate procedural techniques into their tool chain.Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-457368530622792487.post-74398872986006732232010-01-14T06:36:00.000-08:002022-03-15T19:10:35.271-07:00City Skyline and random seeds<a href="http://davmlaw.github.io/ProceduralGraphics/skyscraper.html"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5665206033397588818" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhQdP1-QKAVyrdBaBcAG_z5RtEBq3w5iYKZFpqjseQ78f7OYqMOf_fiJ4MrWZJ7q0HyKYuSP28M-Q2N8sYuG5NGHOhwtW4xvx7kuzixZBymup8juNPxet_Q1I1QByN51O9-09LY53Il_w/s320/Screenshot+at+2011-10-20+00%253A38%253A19.png" style="cursor: pointer; float: left; height: 268px; margin: 0px 10px 10px 0px; width: 320px;" /></a>
Click the image on the left to view the canvas demo. (you need a browser other than Internet Explorer)
This generates a random city skyline, which fades from sunset to night time.
A way to achieve the effect would have been to generate the buildings, store them and alter their state as we go, but I did it a different way to demonstrate a property of generating scenes with pseudo random numbers.
Computers are deterministic so the random numbers are not really random. There are algorithms which can produce a random <span style="font-style: italic;">looking</span> number from another number, and so by using one number to create the next, you can create a random looking sequence. The first number you start with is called a (random) seed.
A generator will usually set a seed if you don't specify it, using something kind of random it can get, eg the current time, the id of the process or the temperature of the CPU. Not setting the seed is thus the normal thing to do, as each run of the program will probably be different and things will appear more random.
However, by setting the seed you can generate a repeated sequence of numbers. This means that if you have some data that is created by a sequence of random numbers, by setting the seed to the same value, you can re-create it again. This is an incredible CPU/memory trade off, where you can generate infinite complexity with CPU time for a single integer value in the seed! A game in the 1980s called <a href="http://en.wikipedia.org/wiki/Elite_%28video_game%29">Elite</a> used this technique to generate a huge game world on the tiny computers of the time.
The way the demo works is to reset the random seed each frame and then generate everything again using repeated calls to random. The windows have a random value of what time they'll turn on, and if it's past that time, they will be on.
This demonstrates how you can change some things in the the repeated calls, but critically the calls to random must be the same sequence, ie don't put calls to random in branches that depend on something that varies each call.Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-457368530622792487.post-13506227852318146902009-12-17T07:40:00.000-08:002010-01-21T07:08:22.688-08:00Procedural graphics books, sites & resources(I will constantly edit this post to add what I know. Please add your own suggestions in the comments)<br /><br /><span style="font-weight: bold;">Books:</span> (links go to Amazon)<br /><br />-<a href="http://www.amazon.com/Computational-Beauty-Nature-Explorations-Adaptation/dp/0262561271/ref=sr_1_1?ie=UTF8&s=books&qid=1261064043&sr=8-1">Computational beauty of nature </a>by Gary William Flake.<br /><br />Great book, goes over lots of ideas about how you can write code imitations of the wonderful patterns of nature. He includes source code to his books written in C, I have often looked at these while coding myself.<br /><br />-<a href="http://www.amazon.com/Fractal-Geometry-Nature-Benoit-Mandelbrot/dp/0716711869">The Fractal Geometry Of Nature</a> by Benoit B. Mandelbrot<br /><br />Mandelbrot coined the word "fractal", brought the field into the computer age and discovered the Mandelbrot set.<br /><br />-<a href="http://www.amazon.com/Real-Time-Rendering-Third-Tomas-Akenine-Moller/dp/1568814240/ref=sr_1_1?ie=UTF8&s=books&qid=1263483928&sr=1-1"><span>Real Time Rendering</span></a> (parts, some include) 11.1 Sources of three-dimensional data pg 438<br /><br />-<a href="http://www.amazon.com/Texturing-Modeling-Second-Procedural-Approach/dp/0122287304"><span>Texturing & Modeling: A Procedural Approach</span><br /></a><br />-<a href="http://www.amazon.com/Computer-Graphics-Principles-Practice-2nd/dp/0201848406/ref=sr_1_1?ie=UTF8&s=books&qid=1263483965&sr=1-1"><span>Computer Graphics</span><span style="font-weight: bold;"> </span></a>by Foley, Van Damme etc - various chapters<br /><br /><span>-<a href="http://www.amazon.com/s/ref=nb_ss?url=search-alias%3Dstripbooks&field-keywords=graphics+gems+series&x=0&y=0">Graphics gems</a></span><span style="font-weight: bold;"> - </span>Various techniques spread out among the (many) books<br /><br /><span style="font-weight: bold;">Online Articles</span>:<br /><br /><a href="http://docs.google.com/viewer?url=http%3A%2F%2Fwww.valvesoftware.com%2Fpublications%2F2009%2Fai_systems_of_l4d_mike_booth.pdf">The AI System for Left 4 Dead by Valve</a> -article describing procedural gameplay. Left 4 Dead is a first person shooter where you are part of a small team and have to fight your way out through a zombie hoarde. The monsters, guns and excitement level is adjusted based on the intensity of the player experience.<br /><br />The <a href="http://en.wikipedia.org/wiki/Demoscene">demoscene </a>uses procedural graphics to generate impressive scenes in incredibly small code sizes. A collection of some on <a href="http://www.pouet.net/prodlist.php?type[]=procedural%20graphics">pouet.net</a>Anonymousnoreply@blogger.com1tag:blogger.com,1999:blog-457368530622792487.post-82386491722648073032009-12-13T04:40:00.000-08:002022-03-15T19:27:57.526-07:00Diffusion limited aggregation<div class="separator" style="clear: both; text-align: center;"><a href="http://davmlaw.github.io/ProceduralGraphics/diffusion.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="660" data-original-width="738" height="190" src="https://blogger.googleusercontent.com/img/a/AVvXsEgJm3w6ZfmDENWXjZdFG2LcVg4XKOt-84IW_5u_eAmc5RS-PKR82jK3Dwq4466i17cc4co0QOXCJVyA_RxA1LcFNInO6146WaoZIeDQ23K5gyeuuhi1LmFp7VdF2MkGjBjHnsVVoIoYSu6ltJVpjuf2YM6vEuA2DNbR3VDeGtpbDg9nUO7eVqj_LF8=w213-h190" width="213" /></a>Click the image on the left to view the canvas demo.
This is an example of <a href="http://en.wikipedia.org/wiki/Diffusion-limited_aggregation">diffusion limited aggregation</a> - a natural process where randomly moving particles stick together, to form clusters. A good example is crystals.
An initial seed is fixed in place, then particles are randomly moved around until they hit part of the main cluster, where they stick. This leads to a bigger cluster and feeds back on itself, producing a stochastic fractal (Stochastic means a random process)
<span style="font-style: italic;">Code comments:</span>
I wrote this after looking at the C code for "diffuse.c" from The Computational Beauty of Nature (see <a href="http://proceduralgraphics.blogspot.com/2009/12/procedural-graphics-books.html">books</a>). An optimisation I copied from there is to constrain the particles to within 10 pixels either side of the cluster, to stop particles wandering off where they would never hit anything. This shouldn't have too much effect on the resulting graphics but is much faster (especially at the start) <br /></div>Anonymousnoreply@blogger.com3tag:blogger.com,1999:blog-457368530622792487.post-52239405184044289012009-12-08T07:28:00.000-08:002010-01-16T17:15:28.975-08:00Future blog postsI thought I should write about the goals and future directions on the blog. The main point for me is that regularly publishing updates will encourage me to do more, and better coding as I explore procedural graphics. I hope others can learn or enjoy them too.<br /><br />The demos so far are in canvas, as I started learning Canvas recently. Thoughts on canvas:<br /><br />-Very easy to share. Just load a page to view demo, and view source to read the code.<br />-Javascript the language is good and bad, but I miss having a good editor.<br />-Canvas is really slow.<br /><br />2d vs 3d: After a certain level of scene complexity, I find it easier to do things in 3d rather than 2d, as you can just create the points and lots of things are taken care of for you. I don't think the web is a great platform for 3d graphics, and so I will be using Java applets and Open GL.<br /><br /><span style="font-weight: bold;">TODO:</span><br /><br />canvas:<br />-<strike>Stochastic fractals</strike> (see <a href="http://proceduralgraphics.blogspot.com/2009/12/diffusion-limited-aggregation.html">Diffusion</a>)<br />-A few more generated nature scenes etc like "Forest Night": beach, <strike>city scape</strike>, snowflakes<br />-A stripped down format for drawing shapes in canvas<br />-A polygon, shape etc editor for canvas<br />-I don't know the word for this subject, but visualisations of entity interactions - eg predator prey, termites, game of life, boids, daisy world, iterated prisoner's dilemma etc<br /><br />Java applets:<br />-Procedural city generation (from my existing C++ code)<br />-Terrain generation (eg mountains)<br />-Texture generation (eg I have seen algorithms that move pixels randomly in 3d, take a 2d slice and the texture looks something like marble)<br />-Plant generation (including 3d L-System turtles)Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-457368530622792487.post-89333519762814095142009-12-08T07:08:00.000-08:002022-03-15T19:35:38.882-07:00Animation demo<div class="separator" style="clear: both; text-align: center;"><a href="https://davmlaw.github.io/ProceduralGraphics/tv.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="878" data-original-width="1034" height="157" src="https://blogger.googleusercontent.com/img/a/AVvXsEi1i0mvhTeRPYfa3bgiQz8tcgsM2EnW8YwVJvrM0rkDXNN34es8fGpx5uN3usyOst9T2XiHXQj_sbQVpZOoWzGlDvxkfklDTVgQGHJfMEJO3F0flbbHTK3jjP4NcYASAOcpZHUnoro8C_naCasdOWL7UUCTSzQAYD9Q4y_ytOesJihH-2piY4zdMfg=w185-h157" width="185" /></a></div><p>Click the image on the left to view the demo. (requires FireFox/Chrome) <a href="View Source https://github.com/davmlaw/ProceduralGraphics/blob/gh-pages/tv.htmlcode">View Source code</a>.<br /></p><p> <span style="font-weight: bold;">Note (2022):</span> This no longer works I think it's </p><p>The TV should show an image off the web, mixed with random static. You can change the image to something supported by your browser. Andrew M found out animated .gifs work, for instance copy "http://www.moonbattery.com/BashKeyboard.gif" to the URL at the bottom.
<a href="http://4.bp.blogspot.com/_ZR4po0rkAe4/SzsmyCMK4NI/AAAAAAAAABE/Jxse2BCumYw/s1600-h/tv_recusion.JPG" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5420969217493754066" src="http://4.bp.blogspot.com/_ZR4po0rkAe4/SzsmyCMK4NI/AAAAAAAAABE/Jxse2BCumYw/s320/tv_recusion.JPG" style="cursor: pointer; float: right; height: 150px; margin: 0pt 0pt 10px 10px; width: 174px;" /></a>
If you right click on a canvas element, you can get an URL for the current image. I then used that as the input for another tv, to get the recursive picture going on the right.
This was made for me to further learn HTML5 canvas, including animation (using callbacks in .js), CanvasPixelArray, masking and using images.</p>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-457368530622792487.post-49461861824987579182009-11-24T10:11:00.000-08:002022-03-15T19:11:02.162-07:00L-System<a href="http://davmlaw.github.io/ProceduralGraphics/lsystem.html" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5407734425982925570" src="http://2.bp.blogspot.com/_ZR4po0rkAe4/Swwhzxxc-wI/AAAAAAAAAAc/ld_0CQH7n9U/s320/serpinski.jpg" style="cursor: pointer; float: left; height: 128px; margin: 0pt 10px 10px 0pt; width: 128px;" /></a>
An L-System in javascript & canvas. You can use a drop-down box to alter which fractal is drawn and how many iterations to perform.
An L-System is a way of describing self-similar fractals, like plants - it works by changing symbols according to rules and performing multiple iterations.
To display, the final string is interpreted by a turtle which uses them as instructions (eg go forward, turn left, etc)
The <a href="http://en.wikipedia.org/wiki/L-system">wikipedia article</a> is worth a look, it is where I got the axioms & rules from.
Warning: If you alter the values and set them to high it may freeze your browser
UPDATE: <a href="http://proceduralgraphics.blogspot.com/2010/03/l-system-v2.html">L-System version 2</a>Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-457368530622792487.post-61617498445550556212009-11-23T04:31:00.000-08:002022-03-15T19:37:51.409-07:00Forest Night<div class="separator" style="clear: both; text-align: center;"><a href="http://davmlaw.github.io/ProceduralGraphics/starry_night.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="572" data-original-width="1098" height="167" src="https://blogger.googleusercontent.com/img/a/AVvXsEjyG2UUStlmK78-HP1eBAvcpycz7T4q6EqzryzDlJnvRM034Ty9RbY4VSxVcym2HguXeusYMt4-xpJVZvIZ49KMkxDfAYNb-fD5E4fHftprTDAuRucOcraCn7mRDdLGxCHR9Weyjm8JmghJEM6Gb5LCWL9_bDWTlgKd_RkLGGvVhAeWdj9eKKjJEyg=s320" width="320" /></a></div><br />The idea is you're lying on your back in a forest, looking at stars.
Click the image on the left to view the demo. Press reload to view a different version.
Written in Javascript / HTML Canvas (use Firefox, or anything other than Internet Explorer)Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-457368530622792487.post-46476208065737962812009-11-23T04:00:00.000-08:002022-03-15T19:38:54.399-07:00Field of flowers<div class="separator" style="clear: both; text-align: center;"><a href="http://davmlaw.github.io/ProceduralGraphics/flower.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="390" data-original-width="546" height="229" src="https://blogger.googleusercontent.com/img/a/AVvXsEhurkqV9zOf9CQeQgIokb2u-YgAISfhrpjAeg9vT1Qx-l3-8zDMI5bRO6_DHrB68m8Q5zldyRd0gQv8FdaMIV1tdJScdUZFwxZpCGOR_VKN1MAGtqYP0TU8nOWLVZ8hd-DPxDhQ_bxtV78Vc39Y35DHiDxaM5gg4wmgxr4p1__ytiyWqYf14zTdyVI=s320" width="320" /></a></div><br /> A field of flowers
Click the image on the left to view the demo. Written in Javascript / HTML Canvas (use Firefox, or anything other than Internet Explorer)Anonymousnoreply@blogger.com0