JavaScript vía p5.js
Introducción a la programación del lado del cliente

Avancemos a lo tercero. Aquí, en page-2.html, podrás ver que el canvas está dentro de una div id="here", ya no va "agregado" al final de la página. También podrás notar que, en esta ocasión, se ajuste al tamaño de esa división, aun cuando cambiemos el tamaño de la ventana. El script p5/dos.js tiene algo de responsive.

Además, sumo un par de variables especiales, que pueden almacenar varios ítems. A ellas se les llama arreglos (arrays). Pueden notar que en var movies=[], pongo los nombres entre comillas, y separo una película de otra mediante comas. También podrán notar que en var oscars=[] solo ocupo comas, porque estoy usando números.

Más abajo, en el dibujo (function draw(){}), hago algunas operaciones para que me entregue lo que corresponda en cada iteración; cada ítem en un arreglo puede ser llamado por la posición que ocupa, correspondiendo la primera al 0. Así puedo obtener el ítem "La La Land" de movies si es que pregunto a la variable: ¿qué estás almacenando en [0]?. Este mismo criterio de ubicación lo ocupé en el número de las páginas que componen este sitio, donde page-2.html muestra lo tercero.

var movies = [
  "La La Land",
  "Mad Max: Fury Road",
  "Gravity",
  "The Artist",
  "The Hurt Locker",
  "Slumdog Millionaire",
  "El aviador",
  "El Señor de los Anillos: el retorno del Rey",
  "Chicago",
]

var oscars = [6,6,7,5,6,8,5,11,6]

//movies.push("Matrix");
//oscars.push(4);

function setup() {
  var canvas = createCanvas(windowWidth, windowHeight/2);
  canvas.parent('here');
  noLoop();
}

function windowResized() {
  //este ajuste es cuma: no estoy ajustando el ancho en relación al canvas, sino a la ventana
  //fíjense que también estoy utilizando el CSS para ajustar un ancho máximo de 100%
  resizeCanvas(windowWidth, windowHeight/2);
}

function draw() {
  background(25);
  for(var x = 0; x <= movies.length; x++){
    //defino el blanco con 100/255 de transparencia
    fill(255,100);
    // el tamaño del texto es igual a la cantidad de oscars ganados * 3
    textSize((oscars[x]*3));
    // aquí dame el nro. de oscar ganado y ubícalo en una parte del ancho del canvas
    text(oscars[x], ((width/(movies.length+1))*(x+1)), (height/2));
    //re-defino el blanco
    fill(255);
    // ahora cambia el tamaño de texto a 12 px, como valor fijo para todo lo que sigue
    textSize(12);
    // dame el nombre de la película correspondiente y ubícala en una parte del ancho
    text(movies[x], ((width/(movies.length+1))*(x+1)), ((height/2)+12),((windowWidth/(movies.length+1))-50),100);
  }
}
      

Abajo de este párrafo está la división (div) de identidad here:

Realiza algunas modificaciones en p5/dos.js. Intenta:

• cambiar la identidad de la división (div) que cotiene al p5 que está ejecutándose.
• modificar los arreglos
• implementar un gráfico lineal o de barras para representar los valores en los arreglos modificados.