p5.js

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.

https://editor.p5js.org/Natha_Marr/full/LSVwAZNcG

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);

}

https://editor.p5js.org/