Skip to content

Tag: JavaScript

The Prime Conspiracy visualized over an Ulam Spiral in HTML5

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:


And with 1 pixels:


As before, the source code (prime_conspiracy.html) is available at

Twin primes visualized over an Ulam Spiral in HTML5

Click here for the HTML5 demo in Javacript.

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.

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.

simple HTML5 animation: clouds over background

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


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 = '';
	// init cloud
	cloud = new Image();
	cloud.src = '';
	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(cloud, cloud_x, 0);
function main_loop() {

HTML code:

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

Credits and notes:

Java, showing script engines

A simple code to show the script engines installed in your system.

As it uses the JSR-223 you need at least java 6.

import javax.script.ScriptEngineManager;
import javax.script.ScriptEngineFactory;
import java.util.List;
public class ListEngines {
    public static void main(String[] args){
	ScriptEngineManager manager = new ScriptEngineManager();
	List <ScriptEngineFactory> engines = manager.getEngineFactories();
	for(ScriptEngineFactory engine: engines){
		String name = engine.getEngineName();
		String lang = engine.getLanguageName();
		String ver = engine.getLanguageVersion();
		System.out.println(name+" "+lang+" "+ver);

$ java -version
java version “1.6.0_0”
OpenJDK Runtime Environment (build 1.6.0_0-b11)
OpenJDK Client VM (build 1.6.0_0-b11, mixed mode, sharing)
$ javac
$ java ListEngines
Mozilla Rhino ECMAScript 1.6

For now I just have Rhino ECMAScript (JavaScript) engine accessible that comes with Java 6. I’m trying now to call Jython and JRuby code.