# Tag: HTML5

This is a visualization inspired by the article Mathematicians Discover Prime Conspiracy by Erica Klarreich on Quanta Magazine.

Previously I wrote Twin primes visualized over an Ulam Spiral in HTML5, I reused the code and added the coloring as:

• All primes ending in 1 are green.
• All primes ending in 3 are red.
• All primes ending in 7 are blue.
• The prime 2 is yellow.
• The prime 5 is gray.

Here is the result with each square with size 4 pixels:

Here is the same with each square of size 2 pixels:

And with 1 pixels:

As before, the source code (prime_conspiracy.html) is available at github.com/silveira/ulam.

Two numbers p and q are twin primes if they are primes and |p| = 2.

The Ulam spiral, discovered by the mathematician Stanislaw Ulam in 1963, is a simple method to visualize prim numbers. Put the natural numbers in a spiral and draw only the ones which are primes.

In the visualization below, I’m drawing the prime numbers in two shades of green. Twin primes in light green and regular primes in dark green.

The “vortex effect” is created because every twin prime is followed by its twin two steps before in the spiral. Below the same image with the zoom in the center:

In the HTML5 demo in Javacriptthe spiral is draw dynamically in a image (warning: it can be a little bit computationally intensive for your machine). You can play with the source-code on Github, and change the parameters. If you are looking for a plain ulam spiral, here it is one.

Update (May 30, 2013): This post was featured on the Blog of Math Blogs.

Update (November 25, 2013): I created a standalone Github project for this code.
https://github.com/silveira/ulam

See the demo.

```  <!doctype html> <html> <head> <style type="text/css"> .sprite { background:url(sheet.png); width:32px; height:48px; }   .up { background-position-y: -7px;} .down { background-position-y: -102px;} .right { background-position-y: -55px;} .left { background-position-y: -151px;}   .frame0 { background-position-x: -0px;} .frame1 { background-position-x: -36px;} .frame2 { background-position-x: -73px;} .frame3 { background-position-x: -107px;} </style>   <script type="text/javascript"> var counter=0; setInterval(main_loop, 250); function main_loop(){ counter = (counter+1) % 3; // 0,1,2,3,0,1,2 ... document.getElementById("up").setAttribute("class", "sprite up frame"+counter); document.getElementById("down").setAttribute("class", "sprite down frame"+counter); document.getElementById("right").setAttribute("class", "sprite right frame"+counter); document.getElementById("left").setAttribute("class", "sprite left frame"+counter); } </script>   <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>CSS Sprites + JavaScript </title> </head>   <body> <img id="up" src="transparent.gif" /> <img id="down" src="transparent.gif" /> <img id="right" src="transparent.gif" /> <img id="left" src="transparent.gif" /> <p>â€” We are not gifs!</p> </body> </html>```

Credits and notes:

If you are reading this text, sorry, your browser don’t support HTML5 Canvas (or maybe I did something wrong).

Code:

```var canvas; var ctx;   var background; var width = 300; var height = 200;   var cloud; var cloud_x;   function init() { canvas = document.getElementById("cloud_demo_canvas"); width = canvas.width; height = canvas.height; ctx = canvas.getContext("2d");   // init background background = new Image(); background.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/forest.png';   // init cloud cloud = new Image(); cloud.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png'; cloud.onload = function(){ cloud_x = -cloud.width; };   return setInterval(main_loop, 10); }   function update(){ cloud_x += 0.3; if (cloud_x > width ) { cloud_x = -cloud.width; } }   function draw() { ctx.drawImage(background,0,0); ctx.drawImage(cloud, cloud_x, 0); }   function main_loop() { draw(); update(); }   init();```

HTML code:

`<canvas id="cloud_demo_canvas" width="640" height="480">Alternative text if browser don't support canvas.</canvas>`

Credits and notes: