{"id":266,"date":"2015-05-16T21:29:20","date_gmt":"2015-05-16T21:29:20","guid":{"rendered":"http:\/\/www.realfogman.de\/?page_id=266"},"modified":"2015-05-17T09:18:19","modified_gmt":"2015-05-17T09:18:19","slug":"ulam-spiral","status":"publish","type":"page","link":"https:\/\/www.fogman.de\/?page_id=266","title":{"rendered":"Ulam spiral"},"content":{"rendered":"

This page contains some information on how to program a simple Ulam spiral. Please refer to the Wikipedia page<\/a> to get an in detail explanation of the Ulam spiral.<\/p>\n

Basically, the Ulam spiral is a nice way to show the distribution of prime numbers.<\/p>\n

1. Ulam created a spiral starting at “1” in the center like shown below:<\/p>\n\n\n\n
\n

\"This<\/a>
This is the spiral with all numbers form 1 to 120.<\/figcaption><\/figure><\/td>\n
\n

\"This<\/a>
This is the spiral, showing the direction of the movement.<\/figcaption><\/figure><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Download the\u00a0spiral<\/a>\u00a0code.<\/p>\n

2. Then Ulam marked\/circled the prime numbers. The resulting plot below is not random as one would expect. Rather, it seems that the occurrence\/distribution of prime numbers follows some (unknown) order.<\/p>\n

\"The<\/a>
The Ulam spiral with 400 by 400 pixesl.<\/figcaption><\/figure>\n

Download the ulam<\/a>\u00a0code.<\/p>\n

The JavaScript code to perform step one<\/strong>, without the corresponding html-file is given by<\/p>\n

\/\/ I took the drawing to canvas prototype from the examples at http:\/\/www.w3schools.com\/\r\nvar doc = document.getElementById(\"Canvas\");\r\nvar ctx = doc.getContext(\"2d\");\r\n\r\n\/\/ Put the point (0,0) in the center of the canvas\r\nctx.translate( Math.round( doc.width \/ 2 ), Math.round( doc.height \/ 2 ) );\r\n\r\n\/\/ Start at position xpos = 0 and ypos = 0. Set the line size to 1 pixel. Set the distance between lines to 5 pixels.\r\nvar xpos = 0, ypos = 0, lin_size = 1, dist_size = 5;\r\n\/\/ This is the state variable. State -> 1: right, 2: up, 3: left, 4: down\r\nvar next_step = 1;\r\n\/\/ Some helper variables\r\nvar i, inc = 0, inc_next = 1;\r\n\r\n\/\/ Blue color for the 2x2 dots\r\nctx.fillStyle=\"#0000FF\";\r\n\r\nfor( i = 1; i < = doc.width * doc.height; i++ ) {\r\n\r\n    ctx.beginPath();\r\n    ctx.moveTo(xpos, ypos);\r\n    \r\n    \/*\r\n        The Ulam spiral starts at 1 at point (0,0) and than goes 1 step right to point (1,0).\r\n        After that, go one step up to (1,-1). Go one step left to (0,-1). Go one step left to (-1,-1) ...\r\n        \r\n        Thus at the end, we have the following chain:\r\n        \r\n        1 x right, 1 x up, 2 x left, 2 x down, 3 x right, 3 x up, 4 x left, 4 x down, 5 x right ...\r\n        \r\n        Thus, for inc_next:\r\n        \r\n        inc_next = 1, inc_next = 1, inc_next = 2, inc_next = 2, inc_next = 3, inc_next = 3 ...\r\n        \r\n        Every time inc is equal to inc_next, it is set to zero and the next_step state variable is incremented\r\n    *\/\r\n    if ( inc == inc_next ) {\r\n        inc = 0;\r\n        next_step ++;\r\n        if (next_step == 5) {\r\n            next_step = 1;\r\n        }\r\n        \r\n        if ( next_step == 1 || next_step == 3 ) {\r\n            inc_next = inc_next + 1;\r\n        }\r\n    }\r\n    \r\n    \/\/ Depending on the next_step state, either go right, up, left or down\r\n    switch ( next_step ) {\r\n        case 1:\r\n            xpos = xpos + dist_size;\r\n            break;\r\n        case 2:\r\n            ypos = ypos - dist_size;\r\n            break;\r\n        case 3:\r\n            xpos = xpos - dist_size;\r\n            break;\r\n        case 4:\r\n            ypos = ypos + dist_size;\r\n            break;\r\n    }\r\n    \r\n    ctx.lineTo (xpos , ypos, lin_size, lin_size);\r\n    ctx.stroke();\r\n    \r\n    inc ++;\r\n    \r\n}\r\n<\/pre>\n
After we know, how to generate the spiral, the only thing thats left is to eliminate all non-prime numbers. Afterwards, mark only the pixels corresponding to prime numbers by blue (or black or any other) color. This is step two<\/strong> and the JavaScript code, without the corresponding html-file is given by<\/p>\n
\/\/ I took the drawing to canvas prototype from the examples at http:\/\/www.w3schools.com\/\r\nvar doc = document.getElementById(\"Canvas\");\r\nvar ctx = doc.getContext(\"2d\");\r\n\r\n\/\/ Put the point (0,0) in the center of the canvas\r\nctx.translate( Math.round( doc.width \/ 2 ), Math.round( doc.height \/ 2 ) );\r\n\r\n\/\/ Start at position xpos = 0 and ypos = 0. Set the dot size to 1 x 1 pixel\r\nvar xpos = 0, ypos = 0, dot_size = 1;\r\n\/\/ This is the state variable. State -> 1: right, 2: up, 3: left, 4: down\r\nvar next_step = 1;\r\n\/\/ Some helper variables\r\nvar i, inc = 0, inc_next = 1;\r\n\r\n\/\/ Blue color for the 2x2 dots\r\nctx.fillStyle=\"#0000FF\";\r\n\r\nfor( i = 1; i < = doc.width * doc.height; i++ ) {\r\n\r\n    if ( isPrime(i) ) {\r\n        \/\/ If i is prime, draw a dot of size dot_size x dot_size\r\n        ctx.fillRect (xpos , ypos, dot_size, dot_size);\r\n    }\r\n    \r\n    \/*\r\n        The Ulam spiral starts at 1 at point (0,0) and than goes 1 step right to point (1,0).\r\n        After that, go one step up to (1,-1). Go one step left to (0,-1). Go one step left to (-1,-1) ...\r\n        \r\n        Thus at the end, we have the following chain:\r\n        \r\n        1 x right, 1 x up, 2 x left, 2 x down, 3 x right, 3 x up, 4 x left, 4 x down, 5 x right ...\r\n        \r\n        Thus, for inc_next:\r\n        \r\n        inc_next = 1, inc_next = 1, inc_next = 2, inc_next = 2, inc_next = 3, inc_next = 3 ...\r\n        \r\n        Every time inc is equal to inc_next, it is set to zero and the next_step state variable is incremented\r\n    *\/\r\n    if ( inc == inc_next ) {\r\n        inc = 0;\r\n        next_step ++;\r\n        if (next_step == 5) {\r\n            next_step = 1;\r\n        }\r\n        \r\n        if ( next_step == 1 || next_step == 3 ) {\r\n            inc_next = inc_next + 1;\r\n        }\r\n    }\r\n    \r\n    \/\/ Depending on the next_step state, either go right, up, left or down\r\n    switch ( next_step ) {\r\n        case 1:\r\n            xpos = xpos + dot_size;\r\n            break;\r\n        case 2:\r\n            ypos = ypos - dot_size;\r\n            break;\r\n        case 3:\r\n            xpos = xpos - dot_size;\r\n            break;\r\n        case 4:\r\n            ypos = ypos + dot_size;\r\n            break;\r\n    }\r\n    \r\n    inc ++;\r\n    \r\n}\r\n\r\nfunction isPrime( num ) {\r\n\r\n    \/*\r\n        Check for numbers which are smaller then 2 (negative numbers cannot be prime either)\r\n        Check for non-integer numbers which cannot be prime\r\n    *\/\r\n    if ( num < 2 && num != Math.round(num) ) {\r\n        return false;\r\n    }\r\n    \r\n    \/*\r\n        To check for num being a prime number, we will iterate from i = 2 to sqrt(num).\r\n        If i divided by num delivers an integer, num cannot be prime.\r\n        In other words, the remainder of the modulo operation ( num % i ) must be zero \r\n    *\/\r\n    for( var i = 2; i <= Math.sqrt(num); i++ ) {\r\n        \/*\r\n            Once we found a non-prime number, we can exit the for-statement and also the isPrime() function\r\n            with a false return value.\r\n            Returning early from the function will be slightly faster as we do not need to check all the other i's,\r\n            once we know num cannot be prime.\r\n        *\/\r\n        if ( num % i == 0 ) {\r\n            return false;\r\n        }\r\n    }\r\n    \r\n    \/\/ If we have come this far, num must be prime.\r\n    return true;\r\n\r\n};\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
This page contains some information on how to program a simple Ulam spiral. Please refer to the Wikipedia page to get an in detail explanation of the Ulam spiral. Basically, the Ulam spiral is a nice way to show the …<\/p>\n
  Ulam spiral<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":264,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-266","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.fogman.de\/index.php?rest_route=\/wp\/v2\/pages\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fogman.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.fogman.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.fogman.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fogman.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=266"}],"version-history":[{"count":40,"href":"https:\/\/www.fogman.de\/index.php?rest_route=\/wp\/v2\/pages\/266\/revisions"}],"predecessor-version":[{"id":314,"href":"https:\/\/www.fogman.de\/index.php?rest_route=\/wp\/v2\/pages\/266\/revisions\/314"}],"up":[{"embeddable":true,"href":"https:\/\/www.fogman.de\/index.php?rest_route=\/wp\/v2\/pages\/264"}],"wp:attachment":[{"href":"https:\/\/www.fogman.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}