Tutorial - Instalación de P5.js

El instalador de este lenguaje de programación puede ser encontrado en el siguiente link: "http://p5js.org/". En el sitio escogeremos la opción "Download".

Dentro de las opciones de descarga podemos descargar las librerías de construcción del lenguaje "p5.js complete".

Luego, debemos extraer la carpeta descargada en la ubicación que deseamos.

Las carpetas extraídas son las siguientes.

En caso que deseemos usar el "p5 Editor / Versión 0.5.10" propio del programa podemos descargarla en la misma página de descarga anterior. En este caso bajaremos el editor para "Windows".

De la misma manera extraemos los archivos de la carpeta descargada.

El ejecutable del editor es el que se muestra en la figura. Si deseamos podemos crear el acceso directo en el escritorio del mismo.

PRIMER PROGRAMA: P5 EDITOR
Después de creado el acceso, podemos abrir el editor usando el ícono que se muestra en la figura.

El programa inicial que usaremos para probar es el siguiente:

/*
   PROGRAMA DE PRUEBA "HOLA MUNDO"
   
   Este programa permite probar este lenguaje de programacion
   
   Autor: Renato Hurtado
   http://beetlecraft.blogspot.pe/
   
   El siguiente programa es de uso publico, cualquier modificacion o mal uso del mismo que pudiera 
   ocasionar el mal funcionamiento de la plataforma de uso de la misma no es responsabilidad del autor
*/

function setup() {
  createCanvas(200,200); // Crea un espacio de trabajo - Cuadrado de 200 x 200
  background(0);         // Color del espacio (negro)
}

function draw() { }

Para hacer funcionar nuestro programa, simplemente debemos dar click en el ícono de "play".

El resultado es el siguiente:

PRIMER PROGRAMA: ATOM

Comenzaremos descargando un "Package" para Atom, para ello buscaremos "P5" en el buscador como se muestra en la figura. Luego, daremos click en "Install".

Buscaremos la carpeta generada que contiene nuestro programa creado en la sección anterior. Para realizar la acción mencionada debemos hacer "File + Open File...".

El archivo que debemos escoger es el que tiene nombre "sketch". Y luego, debemos dar click en "Abrir".

Al abrir el archivo nos debe aparecer algo similar a la siguiente figura.

El programa usado es el mismo que en la sección anterior.

/*
   PROGRAMA DE PRUEBA "HOLA MUNDO"
   
   Este programa permite probar este lenguaje de programacion
   
   Autor: Renato Hurtado
   http://beetlecraft.blogspot.pe/
   
   El siguiente programa es de uso publico, cualquier modificacion o mal uso del mismo que pudiera 
   ocasionar el mal funcionamiento de la plataforma de uso de la misma no es responsabilidad del autor
*/

function setup() {
  createCanvas(200,200); // Crea un espacio de trabajo - Cuadrado de 200 x 200
  background(0);         // Color del espacio (negro)
}

function draw() { }

Para correr el programa debemos entrar a la carpeta que contiene al mismo y abrimos el archivo con el nombre "index".  Para realizar dicha acción debemos dar doble click.

El resultado es como se muestra a continuación.

Para probar el cambio en dicho programa, lo que podemos hacer es cambiar los valores dentro del sketch como se muestra a continuación.

createCanvas(500,600); // Crea un espacio de trabajo - Cuadrado de 200 x 200

Después de cambiar los valores, lo que debemos hacer es "shift + ctrl + B" y en el browser donde observamos la figura generada apretamos "F5".

Autor: