p5.js
una hoja de trucos
para principiantes!
estructura del programa
//corre cuando inicia el programa
function setup(){
createCanvas(800,600); //ancho, alto en pixeles
}
//corre continuamente despues del setup
function draw(){
//instrucciones de reproducción en circuito
}
variables del sistema
windowWidth / windowHeight
//ancho / alto de la ventana
width / height
//ancho / alto del lienzo
mouseX / mouseY
//posición actual horizontal / vertical del apuntador
retroalimentación no visual
print();
//reporta datos a la consola
//doble barra oblicua para comentar el código
//(el programa lo salta)
color
fill(120); //gris: 0-255
fill(100,125,255); //r, g, b: 0-255
fill(255, 0, 0, 50); //r, g, b, alpha
fill('red'); //nombre del color
fill('#ccc'); //hex de 3 dígitos
fill('#222222'); //relleno de hex de 6 dígitos
color(0, 0, 255); //objecto p5.Color
matemáticas
+ - / * //operadores básicos matemáticos
random(low,high); //número aleatorio, límite bajo, límite alto
map(value, in1, in2, out1, out2);
//mapea un valor del rango de entrada al rango de salida
primitivas 2d
line(x1, y1, x2, y2);
ellipse(x, y, ancho, alto);
rect(x, y, ancho, alto);
arc(x, y, ancho, alto, inicio, final);
beginShape();
vertex(x1, y1);
vertex(x2, y2);
vertex(x3, y3);
//agrega más vértices
endShape(CLOSE);
text("string", x, y, boxwidth, boxheight);
-
cuadrícula
-
line()
-
ellipse()
-
rect()
-
arc()
-
vertex()
atributos
background(color);
//define el color del fondo
fill(color);
//define el color para rellenar
noFill();
//desabilita el relleno
stroke(color);
//define el color del trazo
strokeWeight(weight);
//define el ancho del trazo en pixeles
noStroke();
//desabilita el trazo
ellipseMode(MODE);
rectMode(MODE);
//CENTER,CORNER (centro, esquina)
textSize(pixels);
//tamaño del texto en pixeles
lógica if/then
if(condición){
//declaraciones
}
=== //igual a
!= //no es igual a
> //mayor que
< //menor que
>= //mayor ó igual que
<= //menor ó igual que