P5.JS





Las estrellas tienen movimiento
.
function setup() {
createCanvas(400, 600);
background(250, 249, 245);
}
function draw() {
fill ( 249, 233, 197 );
strokeWeight(0);
push();
translate(width * 0.5, height * 0.2);
rotate(frameCount / -100.0);
star(0, 0, 2, 10, 5);
pop();
push();
translate(width * 0.1, height * 0.1);
rotate(frameCount / -100.0);
star(0, 0, 2, 10, 5);
pop();
push();
translate(width * 0.14, height * 0.15);
rotate(frameCount / -100.0);
star(0, 0, 2, 10, 5);
pop();
push();
translate(width * 0.57, height * 0.12);
rotate(frameCount / -100.0);
star(0, 0, 2, 10, 5);
pop();
push();
translate(width * 0.48, height * 0.1);
rotate(frameCount / -100.0);
star(0, 0, 2, 10, 5);
pop();
push();
translate(width * 0.30, height * 0.04);
rotate(frameCount / -100.0);
star(0, 0, 2, 10, 5);
pop();
function star(x, y, radius1, radius2, npoints) {
let angle = TWO_PI / npoints;
let halfAngle = angle / 2.0;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + cos(a) * radius2;
let sy = y + sin(a) * radius2;
vertex(sx, sy);
sx = x + cos(a + halfAngle) * radius1;
sy = y + sin(a + halfAngle) * radius1;
vertex(sx, sy);
}
endShape(CLOSE);
}
strokeWeight(0);
fill (254, 234, 227 );
if (mouseIsPressed) {
strokeWeight(0);
fill(254, 234, 227 );
}
else {
fill(238,176,155);
}
ellipse(mouseX, mouseY, 5, 5);
fill ( 250, 249, 245 );
stroke(235, 171, 148 );
strokeWeight(2);
ellipse(115, 100, 75, 75);
fill(235, 171, 148 );
strokeWeight(0);
ellipse(100, 100, 55, 55);
fill( 250, 249, 245);
strokeWeight(2);
stroke(169, 154, 135 );
rect(180, 280, 90, 90);
fill ( 231, 197, 153 );
strokeWeight(0);
rect(250, 320, 70, 120, 50, 50, 0, 0);
rect(200, 370, 70, 70);
ellipse(230, 370, 60, 60);
}