You are not logged in.
Pages: 1
I think I've managed to clean up the code considerably. Also instead of processing the primes ahead of time, I'm making the primes I need and constructing the differences 3 prime numbers at a time.
Example.
Primes 3 5 7 = coordinate 2,2 (5-3,7-5)
I'm still tweeking this, but here is the newer code.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var primes = [3];
var index = 0;
// takes an odd number and returns true if prime, false if composite
var isPrime = function(num) {
var divisor = num - 1,
testing = true;
while (divisor > 2) {
if (num % divisor === 0) {
return false;
} else {
divisor -= 1;
}
}
return true;
};
// takes an arrawy of primes, looks at the largest, then looks at every other number until it finds a prime and adds it to the primes array
var addPrime = function (primes) {
var topPrime = +primes.slice(-1),
candidate = topPrime + 2,
primeSought = true;
while (primeSought) {
if (isPrime(candidate)) {
primeSought = false;
primes.push(candidate);
} else {
candidate += 2;
}
}
};
var i = 0;
for (i = 0; i < 3; i += 1) {
addPrime(primes);
}
console.log("done");
function draw() {
context.fillStyle = 'rgba(0,0,0,0.3)';
context.fillRect(primes[index+1]-primes[index], primes[index+2]-primes[index+1], 2, 2);
}
function update() {
index += 3;
addPrime(primes);
addPrime(primes);
addPrime(primes);
}
function loop() {
update();
draw();
window.requestAnimationFrame(loop);
}
loop();So here I am posting 8 years later just to show how tech has changed and how much processing power we have in just the browser with Javascript now.
This was whipped up in minutes and will go through many versions and improvements.
HTML:
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</body>JS:
var primes = [2,.... lots of primes go here ...., 104723, 104729 ];
var differences = [];
var coordinates = [];
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
for (var i = 0; i < primes.length; i++){
differences.push(primes[i] - primes[i-1]);
}
for (var i = 0; i < differences.length; i+=2){
var x = differences[i];
var y = differences[i+1];
coordinates.push([x,y]);
}
for (var i = 0; i < coordinates.length; i++){
var x = coordinates[i][0];
var y = coordinates[i][1];
ctx.fillRect(x,y,2,2);
}The evolving version will be posted here:
http://codepen.io/Johnesco/pen/OVLVaL?editors=101
Pages: 1