Scribd
Cargar
28 vistas6 páginas

Tutorial de Líneas Aleatorias en p5.js

Este documento presenta una introducción al lenguaje de programación Processing. Explica cómo generar números aleatorios y dibujar líneas en posiciones aleatorias. También describe las funciones setup() y draw(), así como cómo establecer el frameRate para controlar la velocidad del bucle.

Cargado por

Gisel hamet
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
28 vistas6 páginas

Tutorial de Líneas Aleatorias en p5.js

Este documento presenta una introducción al lenguaje de programación Processing. Explica cómo generar números aleatorios y dibujar líneas en posiciones aleatorias. También describe las funciones setup() y draw(), así como cómo establecer el frameRate para controlar la velocidad del bucle.

Cargado por

Gisel hamet
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Processing

Random = azar, números aleatorios


random(100) generará un número al azar entre 0 y 100.

Probar:

line (0, 0, 100, random(100));

Luego:

line (0, 0, random(100), random(100));

Luego:

line (random(100), random(100), random(100), random(100));


Processing
Evolución del lenguaje  Modos de programación
Java:
Más antiguo – Orientado a ser ejecutado de manera
local (computadoras en instalaciones fijas). Mejor
conexión con sensores y hardware - Acceso a archivos
locales - Ligeramente más rápido.

p5js:
Más moderno – Orientado a publicar en Internet
(páginas web) – Acceso a archivos locales –
Ligeramente más lento. Mayor comunidad

Trabajaremos en modo P5js


Processing
function setup () {
instrucciones que realiza solo una vez, al arrancar

function draw () {
instrucciones que realiza muchas veces, en loop

}
Processing
function draw y function setup
function setup() {
createCanvas(500,500); //Define el tamaño del escenario en pixeles en p5js

background (255,255,255); // Define el color del escenario en RGB

stroke(255,0,0); // Define el color del trazo de línea en RGB

function draw() {
//background(255);

line(random(500), random(500), random(500), random(500));

}
Processing
frameRate
Indica cuántas veces ejecuta la función function draw{} por segundo.
function setup() {
createCanvas(500,500);
frameRate(1);
// Indica cuantas veces ejecuta la funcion draw{} en un
segundo. Se pasa un numero en “cuadros por segundo” (fps)

function draw() {
background(random(255), random(255), random(255));

}
Processing
Otro ejemplo:
function setup() {
createCanvas(500,500); // Escenario de 500 x 500 pixeles
stroke(255); // Trazo color blanco
strokeWeight (5); // Trazo de 5 pixeles de grosor
}

function draw() {
background(0); // Limpia el escenario y lo pinta de negro
line(0,random(500), 500,random(500)); // Hace una línea entre el lado izquierdo y el lado derecho.

Propuestas de modificaciones:
- Hacer las líneas de un color RGB al azar.
- En vez de una línea desde izquierda a derecha, hacer una línea desde arriba hacia abajo.

También podría gustarte