Embedded Files
A partir de acá empezarás a programar usando p5.js. Para empezar, primero que nada, hay que dirigirse al editor de p5.js, que es el entorno de trabajo donde se escribe el código.
Al ingresar, ya hay una estructura de código predeterminada que se puede editar, donde aparecen las funciones principales.
Funciones principales
setup():
En este bloque se escribe cualquier código que esté involucrado en la definición del estado inicial del programa. Se usa para especificar el tamaño del lienzo para los gráficos, el grosor del trazado o la velocidad del programa.
function setup() {
// escribir el código aquí
}
draw():
En esta parte se escribe cualquier código involucrado en dibujar contenido en la pantalla, como (definir el color de fondo, dibujar figuras, texto o imágenes.
function draw() {
// escribir el código aquí
}
Dibujar
Una pantalla de computadora es una matriz de elementos de luz llamados pixeles. Cada pixel tiene una posición dentro de la matriz definida por sus coordenadas. Dentro de la ventana del navegador, p5.js crea un lienzo para dibujar, un área en la que se dibujan las gráficas. El lienzo puede ser del mismo tamaño que la ventana, o puede tener dimensiones distintas. El lienzo está usualmente ubicado en la esquina superior izquierda de la ventana, pero se lo puede posicionar en otros lugares.
Cuando se dibuja en el lienzo, la coordenada x es la distancia desde el borde izquierdo del lienzo y la coordenada y es la distancia desde el borde superior. Escribimos las coordenadas de un pixel así: (x, y). Así que, si el lienzo es de 200×200 pixeles, la esquina superior izquierda es (0, 0), el centro está en (100, 100) y la esquina inferior derecha es (199, 199).
Lienzo
Lienzo
El lienzo es creado y las imágenes son dibujadas dentro de él a través de elementos de código llamados funciones. Las funciones son el bloque fundamental de un programa en p5.js. El comportamiento de una función está definido por sus parámetros. Por ejemplo, hay una función importante llamada createCanvas() que crea un lienzo para dibujar con un ancho y una altura específicos. Si el programa no tiene una función createCanvas(), el lienzo creado por defecto es de 100×100 pixeles.
El lienzo es creado y las imágenes son dibujadas dentro de él a través de elementos de código llamados funciones. Las funciones son el bloque fundamental de un programa en p5.js. El comportamiento de una función está definido por sus parámetros. Por ejemplo, hay una función importante llamada createCanvas() que crea un lienzo para dibujar con un ancho y una altura específicos. Si el programa no tiene una función createCanvas(), el lienzo creado por defecto es de 100×100 pixeles.
Ejemplo
Ejemplo
La función createCanvas() tiene dos parámetros; el primero define el ancho del lienzo para dibujar, el segundo define la altura. Para dibujar un lienzo que sea de 600 pixeles de ancho y 400 pixeles de altura, hay que escribir:
function setup() {
createCanvas(800, 600);
}
Estos valores se pueden cambiar para crear lienzos más pequeños o más grandes.
Dibujar un punto
Dibujar un punto
Para definir el color de un solo pixel dentro del lienzo, se usa la función point(). Posee dos parámetros que definen la posición: la coordenada x seguida de la coordenada y. Para crear un pequeño lienzo y un punto en el centro de él, la coordenada (240, 60), hay que escribir:
Para definir el color de un solo pixel dentro del lienzo, se usa la función point(). Posee dos parámetros que definen la posición: la coordenada x seguida de la coordenada y. Para crear un pequeño lienzo y un punto en el centro de él, la coordenada (240, 60), hay que escribir:
function setup() {
createCanvas(480, 120);
}
function draw() {
background(204);
point(240, 60);
}
Page updated
Google Sites
Report abuse