Introducción a la programación para artistas y principiantes

Valores aleatorios

Por último en esta lección vamos a introducir la función random o aleatoria en español, que permite como podéis suponer, generar valores aleatorios.

Esta función toma un valor mínimo y otro máximo para generar un valor aleatorio entre ambos:

09 - Aleatoria/sketch.js

var numero;

function setup() {
  createCanvas(400, 400)
}

function draw() {
  background(220)
  numero = random(0, 100)
  print(numero)
}

Fijaros como nos aparece en la consola un número diferente todo el rato, como la tasa de fotogramas está establecida a 30 por segundo pues se muestran 30 números aleatorios.

Ahora bien, existe una función de p5 llamada framerate() con la que podemos establecer el número de veces por segundo que se dibuja el lienzo:

var numero;

function setup() {
  createCanvas(400, 400)
  frameRate(1)
}

function draw() {
  background(220)
  numero = random(0, 100)
  print(numero)
}

Como véis esto afecta directamente a la cantidad de veces que generamos un número aleatorio, que ahora es una por segundo.

Pero vamos a hacer un ejemplo más interesante. ¿Recordáis que si no dibujamos el fondo en cada fotograma se conservan los dibujos que vamos haciendo?

Ejercicio

Os reto a dibujar un círculo de 25 píxeles de diámetro con un color RGB aleatorio y en un lugar aleatorio sobre un lienzo con el fondo negro. Tendréis que ingeniároslas para que los círculos no desaparezcan al dibujarlos. Podéis pausar el vídeo y continuar para ver la solución.

Bien, vamos a ver cómo dibujar un círculo de color aleatorio en una posición aleatoria en cada fotograma:

Mostrar la solución
var posicion = { x: 0, y: 0 }
var color    = { r: 0, g: 0, b: 0 }

function setup() {
  createCanvas(400, 400)
  background(0)
}

function draw() {
  
  posicion.x = random(0, 400)
  posicion.y = random(0, 400)

  color.r = random(0, 255)
  color.g = random(0, 255)
  color.b = random(0, 255)
  
  fill(color.r, color.g, color.b)
  ellipse(posicion.x, posicion.y, 25, 25)
}