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

Objetos

Ahora que sabemos cómo crear y utilizar variables vamos a introducir el concepto de objetos.

Volvamos al ejemplo donde dibujamos un círculo en el lienzo utilizando algunas variables para controlar su tamaño y posición:

07 - Objetos/sketch.js

var circuloX = 100;
var circuloY = 100;
var circuloD = 50;

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

function draw() {
  background(220);
  fill(200, 0, 0)
  ellipse(circuloX, circuloY, circuloD, circuloD)
}

Esta forma es correcta pero si os lo paráis a pensar da la sensación de que estas variables están desconectadas entre ellas. Sí, tenemos la palabra circulo delante de cada una pero no se entienden como que las tres formen parte de algo único como sería el círculo.

Objetos y propiedades

Los objetos son unas estructuras que nos permiten hacer eso, definir entidades que cuentan con sus propias variables internas, conocidas como propiedades.

En otras palabras, podríamos declarar una nueva variable llamada circulo que contenga las propiedades x, y y d de diámetro:

// var circuloX = 100;
// var circuloY = 100;
// var circuloD = 50;

var circulo = {
  x, y, d
}

Como véis esta es la sintaxis para crear un objeto con esas tres propiedades, sin embargo nos falta inicializar su valopres y eso lo haremos con la notación en clave y valor, separando las propiedades de su valores con dos puntos:


var circulo = {
  x: 100,
  y: 100,
  d: 50
}

¿Os imagináis como podemos hacer referencia a esas propiedades para utilizarlas en la función draw?

function draw() {
  background(220);
  fill(200, 0, 0)
  ellipse(circulo.x, circulo.y, circulo.d, circulo.d)
}

¿Verdad que en forma de propiedades las tres variables transmiten la sensación de trabajar en conjunto?

Así pues para animar nuestro círculo podríamos hacerlo incrementando sus propiedades x e y:

function draw() {
  background(220);
  fill(200, 0, 0)
  ellipse(circulo.x, circulo.y, circulo.d, circulo.d)
  circulo.x += 1  // circulo.x = circulo.x + 1
  circulo.y += 1  // circulo.y = circulo.y + 1
}

Ejercicio

Os reto a ver si sois capaces de dibujar un círculo de 1 píxel de diámetro en medio del lienzo que no se mueva pero que en cada fotograma aumente su diámetro 1 píxel, podéis pausar el vídeo antes de continuar y ver la solución:

Mostrar la solución
var circulo = {x: 200, y: 200, d: 1}

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

function draw() {
  background(220);
  fill(200, 0, 0)
  ellipse(circulo.x, circulo.y, circulo.d, circulo.d)
  circulo.d += 1
}

Sin duda los límites de lo que podemos crear están en nuestra imaginación y por eso os animo a hacer vuestros propios experimentos. Recordad que tenéis la referencia en español donde encontraréis más instrucciones y ejemplos.