xxxxxxxxxx
68
function setup()
{
// canvas fits window
createCanvas(window.innerHeight, window.innerHeight);
background(0);
// setting frame rate to 50 frames per second
frameRate(50);
// changing opacity of stroke to 20
stroke(255, 20);
strokeWeight(1.5);
noFill();
}
// initializing i=0 to utilize frame rate value in draw funciton
let i = 0;
function draw()
{
i++;
// initializing inner and outer radius of star with noise value effecting the frame rate
let radius = 200 * noise(i / 300) + 100;
let radius2 = 100 * noise(i / 150) + 50;
let centerX = width / 2;
let centerY = height / 2;
// translating coordinates
translate(0, -40);
// drawing star
beginShape();
// looping through circle polar coordinates
for (let angle = 0; angle <= TWO_PI; angle += 100)
{
background(0, 10);
// assigning noise for colors according to the polar coordinates
let noiseStrokeR = noise(angle);
let noiseStrokeG = noise(i / 2);
let noiseStrokeB = noise(angle, i / 2);
// changing stroke accordingly
stroke(
Math.round(255 * noiseStrokeR + 10),
Math.round(120 * noiseStrokeB + 40),
Math.round(255 * noiseStrokeG),20
);
// initializing noise for x,y coordinates based on the radius and angle
let noiseY = 50 - noise(radius / 100, i / 120) * 100;
let noiseX = 500 - noise(angle, i / 2000) * 1000;
// looping to draw 50 nested stars
for(let j=0; j<= 50; j++)
{
// loop to draw star
for (let angle = 0; angle <= TWO_PI; angle += PI/2.5)
{
// star coordinates based on cos and sin waves
let x = centerX + radius * cos(angle);
let y = centerY + radius * sin(angle) + (3.5 - noise((angle), i / 15) * 7);
// outer radius curves
curveVertex(x + noiseX, y + noiseY);
let x2 = (centerX) + radius2 * cos(angle + HALF_PI / 2.5);
let y2 = (centerY) + radius2 * sin(angle + HALF_PI / 2.5);
// inner radius curves
curveVertex(x2 + noiseX, y2 + noiseY);
}
//endShape(CLOSE);
// decrementing the radii to draw smaller stars with every loop
radius-=2;
radius2-=2;
}
}
endShape(CLOSE);
}