Ir al contenido

Preferencias de idioma

Empezar

Esta página te guía para configurar un proyecto p5.js y crear tu primer bosquejo. La forma más fácil de comenzar es usando el editor p5.js, puedes abrir el editor web y dirigirte a la sección tu primer bosquejo. Si deseas trabajar en la versión de escritorio de p5.js, puedes ir a las instrucciones de descarga.

Tu primer bosquejo

Bloque de código con elipse

En el editor web p5.js vas encontrar el siguiente código:


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

function draw() {
  background(220);
}

Despúes de background(220); incluye esta línea de código: ellipse(50,50,80,80);.

Ahora tu código debe estar así:

Bloque de código con elipse


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

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

La línea que acabas de agreagar dibuja una elipse, con su centro a 50 píxeles del borde izquierdo y 50 píxeles del borde superior del bosquejo, con un ancho y un alto de 80 píxeles.

¡En el editor presiona play para ejecutar el código!

Nota para usuarios de lectores de pantalla

Si estas utilizando un lector de pantalla, tienes que activar las salidas accesibles en el editor, fuera del editor tienes que agregar la biblioteca de accesibilidad a tu html. Para aprender más visita el tutorial usando p5 con un lector de pantalla.

Si escribiste todo correctamente, esto aparecerá en tu ventana de visualización:

canvas tiene un circulo de ancho y alto 50 en la posición 80 x y 80 ye

Si nada aparece, el editor puede estar teniendo problemas entendiendo lo que escribiste. Si esto sucede, asegúrate de haber copiado el ejemplo de código tal y como está: los números deben estar separados por comas y contenidos entre paréntesis, la línea debe terminar con punto y coma, y la palabra "ellipse" debe estar escrita como en inglés.

Una de las cosas más difíciles de comenzar a programar es que debes ser muy específicx con la sintaxis. El navegador no siempre es lo suficientemente inteligente como para saber lo que quieres decir, y puede ser bastante exigente con respecto a la ubicación de la puntuación. Ya te acostrumbrarás, sólo toma un poco de práctica. En la parte inferior izquierda del editor vas encontrar la sección de consola. Aquí, encontrarás mensajes del editor con detalles de cualquier error que se encuentre.

Bloque de código con Interacción

Ahora, vamos a crear un bosquejo que es un poco más interesante. Modica el ejemplo anterior para probar lo siguiente:


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

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

Este programa crea un canvas que es de 400 píxeles de ancho y 400 píxeles de alto, y luego empieza a dibujar círculos blancos en la posición del ratón. Cuando algún botón del ratón es presionado, el color del círculo cambia a negro. Ejecuta el código, mueve el cursor, y has click para experimentarlo.

canvas tiene múltiples círculos dibujados que siguen los movimientos del cursor

¿Qué viene después?

Configura p5.js con un editor en tu computadora personal

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 y Atom. Si estás utilizando un lector de pantalla y no usas el editor de p5, te recomendamos usar Notepad++ o Eclipse.

Descarga una copia de la biblioteca p5.js

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

After download, you need to set up a local server. See instructions here . Run your local server within the downloaded folder and on your browser, go to http://localhost:{your-port-num}/empty-example

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>

Utiliza una versión alojada de la biblioteca p5.js

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:

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


<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected][p5_version]/lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>
        

Ambiente

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 encontrar 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 (or http://localhost:{your-port-num}/empty-example if you are using a local server) en la barra de direcciones de tu navegador para ver tu bosquejo.

Partes de este tutorial fueron adaptadas de "Getting Started with p5.js" por Lauren McCarthy, Casey Reas y Ben Fry, O'Reilly / Make 2015. Copyright © 2015. Todos los derechos reservados. Última modificación en la Conferencia de Contribuyentes p5.js 2019.