29a.ch

Entries tagged “canvas”

Image Error Level Analysis with HTML5

Click here to open the tool!

Image error level analysis is a technique that can help to identify manipulations to compressed (JPEG) images by detecting the distribution of error introduced after resaving the image at a specific compression rate. I stumbled across this technique in this presentation by Neal Krawetz and decided to do a quick implementation in JavaScript.

How to use this tool

To analyse an image simply drag and drop it onto the page (requires a modern browser like firefox or chrome). Then play with the quality slider to spot anomalies in the error level. The image I analyzed in the screenshot above is a picture of myself that I modified in GIMP. As you can see the error level on the fake part is quite significantly higher than on the rest of the image. There are no such anomalies on the original.

Having that said the algorithm is not exactly reliable, especially with images that have been rescaled and compressed often/intensely. So take it with a pinch of salt and feel free to have a look at the simple source code.

High-performance Particles on a Canvas

screenshot
View Demo

Some of you might remember my Chaotic Particles demo from last year. That demo was featuring 10'000 particles on a plain old 2d canvas. I decided to optimize that demo a bit in order to support 100'000 particles. I also fixed a little issue where numeric inaccuracy allowed particles to escape and made the influence map more fine grained.

Want to see the source? Just use view source and feel free to ask questions.

Next up: 4'000'000 Particles using WebGL.

Neonflames generative art demo

image created with neonflames
View Demo

I think this is my favorite canvas demo I have created so far. It is an interactive drawing tool based on particle effects. It is the result of me trying to create some generative art using canvas. The techniques used are actually pretty similar to the ones shown in my frontendconf talk on particle systems. In short:

p.vx = p.vx*0.8 + getNoise(p.x, p.y, 0)*4+fuzzy(0.1);
p.vy = p.vy*0.8 + getNoise(p.x, p.y, 1)*4+fuzzy(0.1);

p.x += p.vx;
p.y += p.vy;

data[index] = tonemap(hdrdata[index] += r);
data[index+1] = tonemap(hdrdata[index+1] += g);
data[index+2] = tonemap(hdrdata[index+2] += b);

I'm planning to play with a few improvements especially in tone mapping and controls in the future but feel free to take a look at the source on github. I hope you enjoy it.

Frontendconf 2011 talk on canvas and particles

Video

Video from my talk at frontendconf on particles and html5 canvas, 100% live coding.

Video on ustream

Demo

View Demo

Sourcecode

on github

Note

This is an experiment. It's hacky and you should not use it as an example of good style - it's not.

Fast html5 canvas on iPhone/mobile safari

I finally found a way to optimize 2d canvas drawing on the iPhone 4. Because of the retina display the canvas seems to be rescaled in a slow way (in software?). So even though the rendering itself is relatively fast, the end result is slow.

Setting the Viewport

The first step is to set the viewport scale to 0.5 which will result in having one pixel per css pixel.

<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"/>

So now the rendering is fast, but the picture is tiny.

3D transforms to the rescue

To scale the picture up we can use css 3d transforms which are fast.

canvas { -webkit-transform: scale3d(2, 2, 0) translate3d(200px, 110px, 0); }

Also note the translation to move the image back into place as it is being scaled from the origin.

That's it you got yourself a massive performance boost in about two lines of code. :)

A new html5 game space break



Play it now

Space Break

Space Break is a html5 acrade 'ball and paddle' game written in coffee-script. It features levels full of explosives, extra balls and even nukes. I hope you will enjoy it.

History

Space Break started out as coffee-break - a little project I did to get into coffee script. Because it turned out to be a lot of fun I decided to turn it into a complete game.

Technology

Space Break uses the canvas tag for rendering. The sound effects were created using csound and played using the audio tag. The graphics were made using the gimp and blender. Rake is used for controlling the asset pipeline. All the assets of the game (music, sounds, graphics) are self made - programmer art.

Browsers

Firefox 4 (3.6 kind of works), Chrome 9 and Safari (no ogg - no audio) work. Opera is crashy. Mobile safari on the iPad also works but the frame rate is low. Could be fixed with a bit of optimization.

Source and License

The code and assets are of course on github.

The Sourcecode (break.coffee, Rakefile) is licensed under the GPL V3.

The assets are licensed as Creative Commons BY NC SA

PLEASE LET ME KNOW IF YOU DO SOMETHING COOL WITH IT.

If the licensing doesn't work for you, please let me know.

Feedback

Feedback, both positive and negative is of course appreciated. Just leave me a comment, tweet or send me a email.

Chaotic Particles HTML5 Canvas Demo

I created this demo more or less by accident when prototyping some particle mechanics for a game. It is based on a particle system, and an acceleration map but more on that later. It reminds me quite a bit of simulations of galaxy formation or a lava lamp, it's really nice to watch.

Demo

screenshot

Click the image to open the demo. In the demo, set the particles in motion by dragging with your mouse.

Mobile devices

This demo also works on Android including fullscreen (tested on a nexus one with 2.2), iPhone and iPad! Give it a try ;)

How it works

Each particle has a position and a velocity stored in a typed Float32Array (yes, they work on iOS). In addition to that there is an acceleration 'map' in the background. When you drag over the particle system, you initialize the acceleration map which sets the whole system in motion.

accelerationMap[particle.position] += particle.velocity*someFactor
particle.velocity += accelerationMap[particle.position];
particle.position += particle.velocity;
...
The magic sauce to it is the feedback from the particle velocity to the acceleration map. Together with some damping this results in the system you are seeing. For more details, feel free to have a look at the source.

HTML5 Water Ripples Demo

Finally after a long time I can present you a new demo. It is inspired by the wave propagation formula mr.doob demoed a while ago. I was quite amazed by how simple it was and so I decided to build myself a little pond.

Demo

screenshot

Click the screenshot to start the demo. Move your mouse over the pool to disturb the water.

How it works

I think the really interesting part here is the wave propagation formula:

waveHeight = (buffer0[i-1] + buffer0[i+1] + buffer0[i+width] + buffer0[i-width])/2-buffer1[i];
buffer1[i] = waveHeight;
aux = buffer0;
buffer0 = buffer1;
buffer1 = aux;
Given are two height maps (buffer0 and buffer1). The buffers get rotated every frame so buffer0 points to heights of the wave in the last frame and buffer1 to the one before it. The height of the wave in the current frame at a certain point is calculated by simply averaging the height of the neighboring points in buffer0 and subtracting the height in buffer1. You can think of it like this, every point wants to be at the same height it's neighbors are and it wants to go towards zero. That is basically all there is to the wave propagation (I also added some simple filtering to make it a bit smoother).

The rest is pretty simple, and made up on the spot. The refraction is done by offsetting the texture coordinates by the height difference between the current point and it's neighbors. The lightning and caustics are faked similarly based on the height differences and the height of the current point.

In short it's all fake.

Performance

Chrome is fast, firefox is slow, at least thats the way it usually is. To my pleasant surprise the jaeger monkey builds of firefox seem to finally catch up. Another interesting thing is that safari seems to be the fastest (for this demo).

Credits

The photo was shot by Travholt licensed CC-BY-SA. As mentioned in the intro, I got the wave propagation function from mr.doob.

Other Experiments

Be sure to check out my other experiments. If you like what you saw you should subscribe to my blog or follow me on twitter.

Javascript Galaxy Simulation

This is an older demo I did a while ago but haven't published yet. It's pretty slow unoptimized and hackish and the projection is wrong and I don't feel like fixing it. But it still looks cool! So thought I should publish it anyway.

What does it do? It simulates a spiral galaxy with 5000 stars.

Demo

screenshot

Click the screenshot to start the demo. It's pretty slow in firefox, works well in chrome.

How it works

Doing calculating the gravitational forces for 5000 particles in realtime using javascript is hard, and it would probably be quite hard to get stable spirals. So I cheated a little (a lot actually). To simulate the slowdown of the motion of stars in more dense areas I'm simply using a texture:

skymap

That's pretty much it: Generate a bunch of stars spinning around a center and modulate their speed according to the density map. Feel free to take a look at the source, but remember, I told you that it's a mess and all wrong.

Other Experiments

Be sure to check out my other experiments too.

Demonstrating evolution in 999b

When I saw the JS1K demo contest I knew I had to enter. I first tried to do some GFX demo, but I was lacking an impressive idea. So when I tried to sleep last night at 2 in the morning I had an idea which I needed to implement: Demonstrating evolution by natural selection in 999b/666b gzipped:

x = ('var_a=Math,b=a.random,c=document.g'+
'etElementById("c"),e=c.getContext("2d")'+
',f=[],g=b()*		 16777216<<0,h,i'+
',j,k,l=(g		  &16711680)>>16'+
',m=(g&65		    280)>>8,n=g&'+
'255,o,p		    ;c.width=320'+
';c.height=320;		    e.shadowBlur'+
'=10;for /* */	      (p=   0;p<64;p++)f'+
'.push(b(		    )*16777216<<'+
'0);func		    tion_q(d){fo'+
'r(d=d.t oStr		  ing(16);d.leng'+
'th<6;)			d = " 0"+d;retur'+
'n"#"+		      d } d ocument.body'+
'.sty		     l e .b a c kground='+
'q(g);		    setInterval(function'+
'(){e.		 c l e a r R e c t ( 0 ,'+
'0,320,		3 2 0 ) ; f o r ( p = 0 '+
';p<64;	    p + + ) { h = f [ p ] ; i = '+
'l-((h&	  1 6 7 1 1 6 8 0 ) > > 1 6 ) ;j'+
"=m-((h&65 2 8 0 ) > > 8 ) ; k = n - ( h"+
'&255);o=a.sqrt(i*i+j*j+k*k)/443;if(b()<'+
"o)h=f[p]=(f[b()*64<<0]&16773120|f[b()*6"+
'4<<0]&4095)^1<<(b()*24<<0);e.fillStyle='+
"q(h);e.fillRect(1+p%8<<5,1+p/8<<5,32,32"+
')}},100);e.shadowColor="#000";').replace(
/\s/g,"").replace(/_/g,' ');eval(x);
/*evolution in 999b by 29a.ch**/

+1 if you recognize that guy.

Demo

It's basically a few cells colored cells. The selection criteria is the color difference between the cell and the background. So cells that stand out have a higher chance of getting eaten.

Click me

How it works

You can see the full unminimized sourcecode here evolution.js I'll only explain the meaty stuff.

env = random()*(1<<24)<<0,
...
population.push(random()*(1<<24)<<0)

A random environment and population is initialized. The shift by 0 is a short way to round a number. Both the environment and the genes of the population are random 24 bit integers, that can be viewed as rgb colors.

subject=population[i];
r = r_-((subject&0xff0000)>>16);
g = g_-((subject&0xff00)>>8);
b = b_-(subject&0xff);
distance=M.sqrt(r*r+g*g+b*b)/443;
if(random()<distance){

The fitness for survival is determined by measuring the distance between the color of the individual and the environment. The lower the distance, the higher the chance for survival.

subject = population[i] = (
                // breed
                ((population[random()*popsize<<0]&0xfff000)|
                (population[random()*popsize<<0]&0xfff))
                // Mutate
                ^(1<<(random()*24<<0))
            );

When an individual dies, a new one is bred by sexual reproduction (parthenogenesis and necrophilia are possible as well). The new individual then gets one random mutation. That's pretty much all there is to it.

Author

Jonas Wagner Jonas Wagner
Software Engineer
Zürich, Switzerland

More about me

Follow 29a_ch on Twitter

Experiments

screenshot screenshot screenshot screenshot

More Experiments

Latest Posts Tags Archive Links

guitarmasterclass.net (guitar lessons)