Vamos por lo segundo. Aquí, en page-1.html, podrás ver que el canvas sigue "agregado" al final de la página,
pero esta vez usa todo el ancho y todo el alto de la ventana del navegador. Aprovechando que disponemos
de un mayor espacio, podemos empezar a agregar elementos, los que pueden revisar a continuación o en p5/uno.js.
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
}
function draw() {
for (var x = 0; x < windowWidth; x+=10) {
fill(random(55,255),random(55,255),random(55,255));
ellipse(x, windowHeight/2, 50, 50);
}
}
En el script escribí un bucle for.
Lo que dice es que para cuando se cumpla la condición de que x sea menor que el ancho de la ventana, se le debe sumar 10.
En un principio este x almacena el valor 0, valor que incrementa tantas veces como iteraciones en las que se pueda sumar 10 cumpliendo la condición ya dicha.
Si ya estás familiarizado con Processing, podrás notar que hay una modificación, que parece pequeña, pero es clave: acá NO se declaran las variable por el tipo de dato que contendrán,
como se haría con int x (int de integer; cantidad entera),
sino que se declara como variable, sin más, var x, como corresponde a las variables en JavaScript.
Además, escribí un random para el color de fill(), entregándole a R, G y B la posibilidad de tomar (cada vez que se vuelve realiza el dibujo descrito dentro de function draw(){})
un valor entre 55 y 255. Lo que se colorea es, obviamente, la elipse ubicada en el x que corresponda a su iteración, estando todas las elipses justo
al centro de la altura de la ventana (windowHeight/2), midiendo cada una 50 x 50 pixeles.
Realiza algunas modificaciones en p5/uno.js. Intenta:
canvas a la mitad, manteniendo a las elipses centradas.fill por una gradación de un único matiz en 25 distintas saturaciones, manteniendo la luminosidad.Revisa la página de referencias de p5.js para guiarte en la realización de las modificaciones.