Siguiendo con la exploración del código, la plataforma p5.js es un lienzo que a diferencia del html, permite crear formas y figuras a través de comandos en un lenguaje de javascript. Es una estrategia que se puede fusionar con el html para conseguir una página web más completa e interactiva.
function setup() {
createCanvas(400, 400);
background(0,0,0);
}
function draw() {
push();
translate(width * 0.2, height * 0.5);
rotate(frameCount / 200.0);
star(0, 0, 5, 70, 3);
pop();
push();
translate(width * 0.5, height * 0.5);
rotate(frameCount / 50.0);
star(0, 0, 80, 100, 40);
pop();
push();
translate(width * 0.8, height * 0.5);
rotate(frameCount / -100.0);
star(0, 0, 30, 70, 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);
fill(184,56,179)
noStroke();
rect(170,170,60,60)
//elipse
stroke(100, 204, 0);
fill(184,56,179)
if (mouseIsPressed) {
fill(254,252,65);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 55, 50);
fill (200, 180, 95);
}