Heart drawing with p5js

Introducción a p5js

Dibujando un corazón

p5js es una herramienta de dibujo mediante canvas, esta pensada para que cualquier persona con pocos conocimientos de programación pueda utilizarla, ya sean artistas, diseñadores o cualquiera que este interesado en el dibujo por computadora.

Lo basico

p5js cuenta con dos funciones principales, la función de configuración y la función de dibujo:

setup()

En esta función inicializamos todos nuestros elementos, pondremos todas las configuraciones iniciales, como la creación del canvas, valores para algunas variables, etc.

draw()

Esta es el corazón de nuestro dibujo, es el loop principal, en ella se dibujaran todos los elementos cada cierto tiempo, la mayor parte de nuestro código se ejecutara en esta función.

Instalando p5js

p5js es muy sencillo de instalar, lo podemos instalar mediante bower, npm. yarn, cdn o descargándolo de la web oficial https://p5js.org/download/, en este caso lo agregare mediante cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>

Nuestra primera figura

Ya que tenemos p5js instalado vamos ha dibujar un circulo en la pantalla, lo primero es definir nuestras dos funciones.

function setup(){}
function draw() {}

en nuestra funcion setup vamos ha crear el canvas,

createCanvas(windowWidth, windowHeight);

p5js trae ya definidas estas variables de altura y anchura, esto nos creo un canvas del tamaño de nuestra ventana, ahora pintemoslo de negro

function setup()
{
  createCanvas(windowWidth, windowHeight);
}
function draw()
{
  background('black'); //pinta el fondo de negro
}

vamos con nuestro circulo

function setup()
{
  createCanvas(windowWidth, windowHeight);
}
function draw()
{
  background('black'); //pinta el fondo de negro
  fill(255); //coloca un relleno de color blanco
  ellipse(0, 0, 20) //circulo en x = 0, y = 0, con radio = 20
}

esto nos dibujara una circulo en la esquina superior izquierda de nuestra pantalla, puesto que este seria el punto (0, 0), algo diferente al plano cartesiano convencional

pero p5js es una gran herramienta y trae integrado ciertas funciones que nos ayudan ha desplazarnos por el canvas de una manera muy sencilla, una de ellas es la función translate, esta nos permite cambiar el origen de nuestras coordenadas, para lograr centrar nuestro circulo solo debemos hace un pequeño calculo

function setup()
{
  createCanvas(windowWidth, windowHeight);
}
function draw()
{ 
  translate(width/2, height/2); // centra nuestro eje
  background('black'); //pinta el fondo de negro
  fill(255); //coloca un relleno de color blanco
  ellipse(0, 0, 20) //circulo en x = 0, y = 0, con radio = 20
}

translate(width/2, height/2) nos ubicara en el punto medio de nuestro canvas

y entonces… ?

Dibujando un corazón

ya tenemos nuestra esqueleto armado, dibujar el corazón no es tan complicado, solo basta con saber las funciones adecuadas.. no te asustes, no hay que comprender ninguna matemática extraña.

las funciones son las siguientes (start es nuestro punto en el eje x)

y = sqrt( 1 - pow( abs(start) - 1, 2) ); // [-2, 2]
y2 = acos(1-abs(start))-PI; // [-2, 2]

definimos la siguientes variables, start y step

var start = -2;
var step = 0.009;
function setup()
{
  createCanvas(windowWidth, windowHeight);
}
function draw()
{ 
  translate(width/2, height/2); // centra nuestro eje
  noFill(); //elimina el relleno
}

recordemos que la función draw es un loop, se ejecuta cada cierto tiempo, lo cual nos permitirá incrementar la variable step hasta que su valor sea 2 e ir obteniendo las valores del eje y arrojados por nuestras funciones.

var start = -2;
var step = 0.009;
function setup()
{
  createCanvas(windowWidth, windowHeight);
}
function draw()
{ 
  translate(width/2, height/2); // centra nuestro eje
  scale(70); //escala el canvas
  
  noFill(); //elimina el relleno
  stroke('black'); //color del borde en blanco
  strokeWeight(0.009); //grosor del borde
if(start < 2)
 {
   //codigo
  start += step;
 }
}

dentro de nuestra condición lo que tenemos que hacer es dibujar un ellipse como lo hicimos hace un momento, pero sus coordenadas serán definidas por las funciones que mencionamos.

var start = -2;
var step = 0.009;
function setup()
{
  createCanvas(windowWidth, windowHeight);
}
function draw()
{ 
  translate(width/2, height/2); // centra nuestro eje
  scale(70); //escala el canvas
 
  noFill(); //elimina el relleno
  stroke('black'); //color del borde en blanco
  strokeWeight(0.009); //grosor del borde
if(start < 2)
 {
  /* Parte superior de  corazón */
  var y = sqrt( 1 - pow( abs(start) - 1, 2) );
  ellipse(start, -y, 0.001);
  
  /* Parte parte inferior del corazón */
  var y2 = acos(1-abs(start))-PI;
  ellipse(start, -y2, 0.001); 
  start += step;
 }
}

y el resultado seria…

para algo un poco mas vistoso les dejo el siguiente codigo.

My Heart bonds me together so that nothing could tear it apart