Skip to content

Tag: HTML5

The Prime Conspiracy visualized over an Ulam Spiral in HTML5

Published by Silveira on 2016-03-14

Click here for the HTML5 demo in Javacript

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:

prime conspiracy ulam

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

prime_conspiracy_ulam_2px

And with 1 pixels:

prime_conspiracy_ulam_1px

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

Twin primes visualized over an Ulam Spiral in HTML5

Published by Silveira on 2013-05-14

Click here for the HTML5 demo in Javacript.

Two numbers p and q are twin primes if they are primes and |p – q | = 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.

twin primes ulam spiral

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:

twin primes ulam spiralIn 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

HTML5: CSS Sprites

Published by Silveira on 2011-06-04

See the demo.


 
 
 
	 
 
	 
	
	 
	CSS Sprites + JavaScript  
 
 
 
	 
	 
	 
	 
	
— We are not gifs!

Credits and notes:

simple HTML5 animation: clouds over background

Published by Silveira on 2011-06-02

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:

Alternative text if browser don't support canvas.

Credits and notes: