Empezar

Bloque de código con elipse

En el editor web p5.js vas a 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.

¡Presiona play en el editor para ejecutar el código!

Nota para usuarios de lectores de pantalla

Si estás 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:

Si no aparece nada, 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ífico 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 a 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. Modifica 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 haz click para experimentarlo.

• Visita las páginas aprender y ejemplos para conocer la biblioteca.
• Mira los video tutoriales de The Coding Train y Kadenze.
• Visita la referencia para explorar la documentación completa.
• Si deseas utilizar p5 con un lector de pantalla, visita el tutorial p5 con un lector de pantalla.
• Si has usado Processing en el pasado, lee el tutorial de transición desde Processing para aprender cómo convertir programas de Processing a p5.js, y cuáles son las principales diferencias entre estos.

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.

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

Después de la descarga, es necesario configurar un servidor local. Mira las instrucciones aquí . Ejecuta tu servidor local dentro de la carpeta descargada y en tu navegador, ves a 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>

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://cdn.jsdelivr.net/npm/p5@[p5_version]/lib/p5.js"></script>

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

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

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.

Abre el archivo index.html en tu navegador haciendo doble click en él o escribiendo: file:///la/ubicacion/de/tu/archivo/html (o http://localhost:{your-port-num}/empty-example si estás usando un servidor local) en la barra de direcciones de tu navegador para ver tu bosquejo.