Skip to content

Tag: math

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

The Diffie-Hellman key exchange

Can I have a secret?
Can I tell you a secret?
Can I tell you a secret when we know there is someone snooping around?

I’d like to share this graphical explanation of the Diffie-Hellman key exchange principle without going into the details about the math behind it. It uses physical abstractions as padlocks, keys, and treasure chests. The goal of the key exchange is to allow two parties to establish a shared secret key over an insecure communication channel.

the diffie-hellman key exchange infographic pixelart

Alice and Bob, a complicated couple, would like to talk through an insecure channel.

Step by step

  1. Alice has the padlocks A and C, two keys C and one key A. Bob has the padlock B, key B, and the letter he wants to send to Alice through the insecure channel.
  2. Alice puts the padlock and key C in the chest.
  3. Alice locks the treasure chest using the padlock A, and sends to Bob.
  4. Bob receives the chest. He can’t open it because he doesn’t have the key A. He puts one more lock, the padlock B, in the treasure chest and send it back to Alice. Alice also can’t open the chest, as she doesn’t have the key B.
  5. But Alice does have the key A, which she uses to remove the padlock A from the chest and send it back to Bob.
  6. Bob now receives a chest which he can open. He opens it and receive the padlock and key C. At this point the key exchange is done. He can either keep the chest and padlock C to send something to Alice, or he can use the same key exchange technique from steps 1 to 6 to send the padlock C back to Alice.
  7. Bob decides to send Alice a letter using the padlock C. He puts the letter in the chest.
  8. Bob locks the chest using the padlock C, send it to Alice. He keeps key C.
  9. Alice received the letter and now they both have the key C.


  • Alice’s key A never left her inventory. Bob’s key B never left his inventory.
  • Neither Alice nor Bob really knows who is in the other side. In this example they just trust in each other. Authentication is very important but is not handled in this example.
  • At every transference a different padlocks (or a combination of padlocks) was used.

eve the diffie-hellman key exchange 2x

A tiny bit of math

Let’s (very) informally define computationally efficient as a computation that someone is willing to wait and pay.

The abstraction here is that a chest with padlock is easy to lock/unlock when you have the correct key but hard to be unlocked otherwise. To use this technique with data, we need a mathematical function f that is:

  • Easy to lock: it is computationally efficient to apply f(m,k) over a message m and a key k
  • Easy to unlock: there is a computationally efficient inverse function f’ such that m = f'(f(m,k),k)
  • Hard to break: it is not computationally efficient to find m or k knowing only f and f(m,k)

If you want to know more about these functions, take a look in the original article “New directions in cryptography” by Diffie, W. and Hellman, M. in 1976.

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.

Latex test


i\hbar\frac{\partial}{\partial t}\left|\Psi(t)\right>=H\left|\Psi(t)\right>

Produce this:
$latex i\hbar\frac{\partial}{\partial t}\left|\Psi(t)\right>=H\left|\Psi(t)\right>$

If you are seeing a complicated math formula in a image then it worked.