Language Settings

la diversión de Processing x la excentricidad de JavaScript

la simplicidad de Processing x la flexibilidad de JavaScript

la intuición de Processing x el poder de JavaScript

la creatividad de Processing x el dinamismo de JavaScript

la comunidad de Processing x la comunidad de JavaScript

el poder de Processing x el alcance de JavaScript

Empezar

Esta página te guía a través del proceso de configuración de un proyecto con p5.js y hacer tu primer bosquejo. Si quieres probar el nuevo Editor Web de p5.js, puedes ir a Tu primer bosquejo.

Descarga y configuración de archivos

La manera más simple de empezar es usando el ejemplo en blanco incluido en p5.js completo disponible en el sitio.

Si revisas el archivo index.html, te darás cuenta que tiene un enlace al archivo p5.js. Si estás buscando usar la versión reducida (comprimida para que las páginas carguen más rápidamente), cambia el enlace a p5.min.js.

<script src="../p5.min.js"></script>

De forma alternativa, puedes enlazar a un archivo p5.js alojado en línea. Todas las versiones de p5.js están almacenadas en un CDN (Content Delivery Network). Puedes ver un historial de estas versiones aquí: p5.js CDN. En este caso, puedes cambiar el enlace a:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/[p5_version]/p5.js"></script>

Una página HTML de ejemplo podría verse así:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/[p5_version]/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

También puedes empezar con esta plantilla de codepen.

Ambiente

Puedes usar el editor de código que prefieras. Las instrucciones para usar y configurar Sublime Text 2 están incluidas a continuación, otras buenas opciones de editores incluyen Brackets, Atom y OpenProcessing. Si estás utilizando un lector de pantalla y no usas el editor web de p5, te recomendamos usar Notepad++ o Eclipse.

Abre Sublime. Despliega el menú File (archivo) y elige Open... (abrir) y selecciona el directorio donde se encuentran tus archivos html y js. En la barra lateral izquierda, podrás ver ahora el nombre del directorio en la parte superior, y a continuación una lista con los archivos contenidos en el directorio.

Haz click en tu archivo sketch.js y éste se abrirá a la derecha de tu pantalla, donde podrás editarlo. el código de inicio de p5 en el editor sublime.

Abre el archivo index.html en tu navegador haciendo doble click en él o escribiendo: file:///la/ubicacion/de/tu/archivo/html en la barra de direcciones de tu navegador para ver tu bosquejo.

Tu primer bosquejo

Los usuarios de Processing pueden revisar el Tutorial de transición desde Processing.

En tu editor, escribe lo siguiente:


function setup() {

}

function draw() {
  ellipse(50, 50, 80, 80);
}

Esta línea de código significa "dibuja una elipse, con su centro 50 pixeles a la derecha del borde izquierdo y 50 pixeles abajo del borde superior, con un ancho y un alto de 80 pixeles".

Graba tu bosquejo y refresca la página en tu navegador. Si has escrito todo correctamente, verás esto:

Nota: Si estás utilizando un lector de pantalla debes activar los bosquejos accessibles en el editor p5 en línea, o fuera del editor web debes agregar la librería de accessibilidad en tu html. Para aprender a utilizar p5 con un lector de pantalla haz click aquí y para aprender más sobre la librería de accesibilidad haz click aquí.

la canvas tiene un círculo de alto y ancho 50 en la posición 80x y 80y

Si no lo escribiste correctamente, podría no aparecer nada. Si esto ocurre, asegúrate de haber copiado el código del ejemplo de manera correcta: los números deben estar contenidos dentro de paréntesis y tener comas entre cada uno de ellos, y la línea debe terminar con un punto y coma.

Una de las cosas más difíciles de empezar a programar es que debes ser muy prolijo con el uso de la sintaxis. El navegador no es siempre lo suficientemente inteligente como para saber lo que quieres decir, y puede ser muy exigente con la puntuación. Te acostumbrarás a esto con un poco de práctica. Dependiendo del navegador que utilices, puedes ver los errores al revisar la "consola" de JavaScript. En Chrome, por ejemplo, esto está bajo Ver > Desarrollador > Consola JavaScript.

A continuación, haremos un bosquejo más interesante. Borra el texto del ejemplo anterior y prueba este:


function setup() {
  createCanvas(640, 480);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

Este programa crea una ventana con un ancho de 640 pixeles y una altura de 480 pixeles, y luego empieza a dibujar círculos blancos según la posición del ratón. Cuando presionas un botón del ratón, el color del círculo cambia a negro. Explicaremos más adelante los detalles acerca de los elementos de este programa. Por ahora ejecuta el código, mueve el ratón, y haz click para probarlo.

la canvas tiene múltiples circulos dibujados sobre ella al seguiendo el camino del movimiento del ratón

¿Qué viene después?

Partes de este tutorial fueron adaptados del libro Getting Started with p5.js, por Lauren McCarthy, Casey Reas y Ben Fry, O'Reilly / Make 2015. Copyright © 2015 Lauren McCarthy, Casey Reas y Ben Fry. Todos los derechos reservados.

 

*

Processing p5.js Processing.py Processing for Android Processing for Pi

Processing Foundation