Combines my isPrime and Kaprekar pens, only changing the color to the Kaprekar depth of primes.
Colors from the Ulam Kaprekar pen
A Pen by Riley Shaw on CodePen.
button#go Generate |
;(function() { | |
function isPrime (n) { | |
if (n > 0 && n < 6 && n!== 4) return true; | |
if (!(n % 2 && n % 3 && n % 5)) return false; | |
for (var i = 7, m = Math.sqrt(n); i <= m; i += 30) { | |
if (!(n % i && n % (i + 4) && n % (i + 6) && n % (i + 10) && n % (i + 12) && n % (i + 16) && n % (i + 22) && n % (i + 24))) return false; | |
} | |
return true; | |
}; | |
// recursively runs through Kaprekar Routine until | |
// we hit a duplicate value (.: end of cycle) | |
function step (cur, prev, i) { | |
if (prev[cur]) return i - 1; | |
else prev[cur] = true; | |
var lo = String(cur).split('').sort(); | |
var hi = lo.slice().reverse(); | |
lo = +(lo.join('')); hi = +(hi.join('')); | |
return step(hi - lo, prev, i + 1); | |
} | |
// initialization for the first step | |
function kaprekar (num) { | |
return step(num, {}, 0); | |
} | |
function download () { | |
var img = canvas.toDataURL('image/png'); | |
var imgLink = document.createElement('a'); | |
imgLink.href = img; | |
imgLink.download = 'water'; | |
imgLink.click(); | |
} | |
var i, depth = 19; // max depth [0, 1M) = 19 | |
var button = document.getElementById('go'); | |
var canvas = document.createElement('canvas'); | |
canvas.width = canvas.height = 1000; | |
var ctx = canvas.getContext('2d'); | |
// initialize a color array with evenly spaced values | |
var c1 = [52, 152, 219], c2 = [44, 62, 80], delta = [], color = []; | |
// calculate color deltas between depths | |
for (i = 0; i < 3; i++) { | |
delta.push((c2[i] - c1[i]) / depth); | |
} | |
// populate the color array | |
for (i = 0; i < depth; i++) { | |
color.push([ | |
Math.round(c1[0] + delta[0] * i), | |
Math.round(c1[1] + delta[1] * i), | |
Math.round(c1[2] + delta[2] * i) | |
]); | |
} | |
color.push(c2); | |
// end color initialization | |
button.addEventListener('click', function populate1M () { | |
button.textContent = '0%'; | |
// start timer & main loop | |
var t1 = window.performance.now(), i = 0; | |
setTimeout(function drawChunk () { // draws 1% of the canvas | |
for (var c = 10000; c--; i++) { | |
if (isPrime(i)) { | |
ctx.fillStyle = 'rgb(' + color[kaprekar(i)] + ')'; | |
} | |
ctx.fillRect(i % 1000, Math.floor(i / 1000), 1, 1); | |
} | |
if (i < 1000000) { | |
button.textContent = i / 10000 + '%'; | |
setTimeout(drawChunk, 1); | |
} else loopDone(); | |
}, 1); | |
function loopDone () { | |
var t2 = window.performance.now(); | |
download(); | |
// log execution time in seconds | |
console.log('Main loop execution took ' + | |
((t2 - t1) / 1000).toFixed(2) + 's'); | |
button.textContent = 'Regenerate'; | |
} | |
}, false); | |
})(); |
$light: rgb(52, 152, 219) | |
$dark: rgb(44, 62, 80) | |
body | |
background: $dark | |
button | |
position: absolute | |
top: 50% | |
left: 50% | |
height: 2em | |
width: 8em | |
margin: -1em -4em | |
border: 0 | |
border-radius: 0 | |
outline: 0 | |
font: 24px Open Sans, sans-serif | |
background: $light | |
color: $dark | |
cursor: pointer |
Combines my isPrime and Kaprekar pens, only changing the color to the Kaprekar depth of primes.
Colors from the Ulam Kaprekar pen
A Pen by Riley Shaw on CodePen.