'use strick'; var C, H, W, ctx, step = 20; var primeArray, points = []; function drawLine(x, y, w, h, lw = 1, clr = 'lightgray') { ctx.lineWidth = lw; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(w, h); ctx.strokeStyle = clr; ctx.stroke(); ctx.closePath(); } function drawCircle(x, y, clr = 'green', r = 3) { ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI); ctx.strokeStyle = clr; ctx.fillStyle = clr; ctx.fill(); ctx.stroke(); ctx.closePath(); } function drawText(txt, x, y, size = 12, fnt = 'Arial', clr = 'black') { ctx.beginPath(); ctx.font = size + "px " + fnt; ctx.fillStyle = clr; ctx.fillText(txt, x, y); ctx.closePath(); } function drawGird() { let cc, ww; clear(); for(let x = 0; x <= W; x+= step) { drawLine(x, 0, x, H); } for(let y = 0; y <= H; y+= step) { drawLine(0, y, W, y); } drawLine(step, 0, step, H - step, 2, 'darkgray'); drawLine(step, H - step, W, H - step, 2, 'darkgray'); cc = 0; for(let t = 0; t < (W - step); t+= step) { ww = Math.ceil(ctx.measureText(cc).width); drawText(cc, (t + step) - (ww / 2), H - (step / 2) + 4, 12, 'Arial', 'darkgray'); cc++; } cc = 0; for(let t = 0; t < (H - step); t+= step) { ww = Math.ceil(ctx.measureText(cc).width); drawText(cc, (step / 2) - (ww / 2), (H - (t + step)) + 6, 12, 'Arial', 'darkgray'); cc++; } } function drawPoints() { let cc = 0, dis, w, h, ee = 0; for(let v = (step * 2); v <= Math.min(W, H); v+= step) { w = v; h = H - (v - step); if(cc > 0) { dis = (primeArray[cc] - primeArray[cc - 1]); if(dis == 1) { if(cc % 2 === 0) { w = (v - step); h = (H - (v - step)) + step * (dis); } else { w = v; h = (H - (v - step)) + step * (dis); } } else { w = v - step; h = H - (v - (step * 2)); } } drawCircle(w, h); if((cc > 1) && (cc % 2 !== 0)) { ee = 1; for(let d = 1; d < dis; d++) { if(d <= Math.ceil(dis / 2)) { drawCircle(w - step, h - ((d - 1) * step), 'red', 1); points.push({x : (w - step), y : (h - ((d - 1) * step)), prime : (false)}); } else { drawCircle(w, h + ((Math.ceil(dis / 2) - 1) * step) - ((d - 1) * step), 'red', 1); points.push({x : (w) , y : (h - ((d - 1) * step)) + (ee * step), prime : (false)}); ee+= 2; } } } if((cc > 2) && (cc % 2 === 0)) { ee = 1; let gg = 1; for(let d = 1; d < dis; d++) { if(d < Math.ceil(dis / 2)) { drawCircle(w - step, h + ((d + 1) * step), 'red', 1); points.push({x : (w - step) , y : (h + ((d + 1) * step)), prime : (false)}); } else { drawCircle(w, h + ((d + 1) * step) - (ee * step), 'red', 1); points.push({x : (w) , y : (h + ((d + 1) * step) - (ee * step)), prime : (false)}); ee+= 2; } gg++; } } drawText(primeArray[cc], w, h, 12, 'Arial', 'blue'); points.push({x : (w), y : (h), prime : (true)}); cc++; } } function connectPoints() { for(let m = 0; m < (points.length - 1); m++) { drawLine(points[m].x, points[m].y, points[m + 1].x, points[m + 1].y, 1, 'black'); } } function createPrimes() { let range = Math.round(Math.min(W , H) / step) - 1; let isPrime, s, i, arr = []; arr.push(1); arr.push(2); i = 3; while(arr.length < range) { isPrime = true; s = 2; while(s < i) { if(i % s === 0) {isPrime = false;} s++; } if(isPrime) {arr.push(i);} i++; } return arr; } function clear() { ctx.clearRect(0, 0, W, H); } function init() { C = document.querySelector("canvas"); let txt = document.querySelectorAll("input")[0].value; if(isNaN(txt)) {return 0;} C.style.width = txt + 'px'; C.style.height = txt + 'px'; C.width = txt; C.height = txt; W = C.width; H = C.height; ctx = C.getContext("2d"); ctx.scale(1, 1); points = []; primeArray = createPrimes(); drawGird(); drawPoints(); connectPoints(); } window.onload = function() { C = document.querySelector("canvas"); C.width = 600; C.height = 600; W = C.width; H = C.height; ctx = C.getContext("2d"); ctx.scale(1, 1); primeArray = createPrimes(); drawGird(); drawPoints(); connectPoints(); };

The Path Of The Primes