60 lines
1.3 KiB
JavaScript
60 lines
1.3 KiB
JavaScript
|
var p = 8, q = 3, useCols = false;
|
||
|
|
|
||
|
|
var colors;
|
||
|
|
|
||
|
|
function setup() {
|
||
|
|
var canvas = createCanvas(600, 600);
|
||
|
|
canvas.parent("canvas-wrapper");
|
||
|
|
frameRate(5);
|
||
|
|
colors = [color(0), color(220, 20, 0), color(10, 200, 30), color(20, 40, 240), color(30, 180, 240), color(230, 210, 50), color(150, 50, 150), color(240, 120, 20), color(150, 150, 150), color(150, 100, 50)];
|
||
|
|
}
|
||
|
|
|
||
|
|
function draw() {
|
||
|
|
push();
|
||
|
|
background(240);
|
||
|
|
translate(width/2, height/2);
|
||
|
|
rotate(-TAU/4);
|
||
|
|
|
||
|
|
noFill(0, 10)
|
||
|
|
strokeWeight(2);
|
||
|
|
drawStar();
|
||
|
|
|
||
|
|
pop();
|
||
|
|
}
|
||
|
|
|
||
|
|
function drawStar() {
|
||
|
|
var iterations = gcd(p, q);
|
||
|
|
for(var i = 0; i < iterations; i++) {
|
||
|
|
if(useCols)
|
||
|
|
stroke(colors[i%colors.length]);
|
||
|
|
beginShape();
|
||
|
|
for(var j = 0; j < p/iterations; j++) {
|
||
|
|
var point = getPoint(p, j*q+i, width/2-20);
|
||
|
|
vertex(point.x, point.y);
|
||
|
|
}
|
||
|
|
endShape(CLOSE);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getPoint(count, index, r) {
|
||
|
|
var x = r * Math.cos((TAU*index)/count);
|
||
|
|
var y = r * Math.sin((TAU*index)/count);
|
||
|
|
return createVector(x, y);
|
||
|
|
}
|
||
|
|
|
||
|
|
$(()=>{
|
||
|
|
$("#points").change(update);
|
||
|
|
$("#jump").change(update);
|
||
|
|
$("#colors").change(update);
|
||
|
|
update();
|
||
|
|
})
|
||
|
|
|
||
|
|
function update() {
|
||
|
|
p = +$("#points").val();
|
||
|
|
q = +$("#jump").val();
|
||
|
|
useCols = $("#colors").prop("checked");
|
||
|
|
draw();
|
||
|
|
}
|
||
|
|
|
||
|
|
function gcd(a,b) {return (!b)?a:gcd(b,a%b);}
|