¿Cómo crear un disco arcoíris usando p5.js?

En este artículo, vamos a ver cómo podemos crear un disco arcoíris usando p5.js. p5.js es una biblioteca de JavaScript que facilita la creación de gráficos interactivos y es adecuada para visualizaciones de todo tipo, incluidos los arcoíris. Este artículo le mostrará cómo crear un arcoíris usando p5.js.

Acercarse:

• Cree un archivo HTML e incluya la biblioteca p5.js.
• En el función de configuración ():
  • Cree un lienzo con el tamaño deseado usando la función createCanvas (ancho, alto).
  • Establezca el modo de colour en HSB usando la función de modo de colour (modo).
  • Cree una matriz para almacenar los colores, en este caso, la matriz tendrá 360 elementos, uno para cada valor de tono.
  • Use un bucle for para iterar a través de los valores de matiz de 0 a 359.
  • Para cada iteración, use la función de colour (tono, saturación, brillo) para crear un colour y agregarlo a la matriz.
  • Establezca la saturación y el brillo en un valor fijo (100)
• En el función dibujar():
  • Use un bucle for para iterar a través de la matriz de colores.
  • Para cada colour de la matriz, use la función de relleno (colour) para establecer el colour precise como colour de relleno.
  • Use la función rect(x, y, ancho, alto) para crear un rectángulo con el colour precise y el ancho y alto deseados.
  • Para crear el efecto del arcoíris, coloque cada rectángulo junto al otro utilizando la variable de iteración para calcular la coordenada x del rectángulo.

Requisito previo: Esta es la lista de todas las funciones utilizadas en el código de ejemplo.

• createCanvas (ancho, alto): Crea un elemento de lienzo en el archivo HTML con el ancho y alto especificados.
• colorMode(modo): Establece el modo de colour para el programa, en este caso, está configurado en modo HSB (tono, saturación, brillo).
• colour (tono, saturación, brillo): crea un colour usando valores HSB, donde el matiz es un valor de 0 a 360, la saturación es un valor de 0 a 100 y el brillo es un valor de 0 a 100.
• colour de relleno): Establece el colour que se utilizará para rellenar formas.
• rect(x, y, ancho, alto): Crea una forma de rectángulo con las coordenadas X e Y, el ancho y el alto especificados.

Tenga en cuenta que el configuración() y dibujar() También se utilizan funciones, pero son funciones integradas en p5.js y se llaman automáticamente. setup() se ejecuta una vez antes de que se dibuje el primer cuadro, mientras que draw() se ejecuta continuamente, una vez por cuadro, después de la función setup().

Ejemplo: En este ejemplo, crearemos una paleta de arcoíris utilizando p5.js.

Producción: