Processing/JS

Ejemplos

Línea y relleno

relleno

// tamaño ventana
size(200,200);
//color background negro 0,0,0
background(0);
//sin línea
noStroke();

// Relleno azul
fill(0,0,255);
rect(0,0,100,100);

// Relleno y transparencia 75%
fill(0,0,255,191);
rect(0,100,100,100);

// Relleno y transparencia 55%
fill(0,0,255,127);
rect(100,0,100,100);

// Relleno y transparencia 25%
fill(0,0,255,63);
rect(100,100,100,100);

mouseX, mouseY

mouse

void setup() {
size(200,200);
//background(255);
}

void draw() {
// Dibuja un nuevo background en cada frame
background(255);
stroke(0);
fill(0,0,255);
// en modo CENTER, el rectángulo se dibuja en el centro del cursor
rectMode(CENTER);
// mouseX y mouseY posición del ratón
rect(mouseX,mouseY,50,50);
}

pmouseX, pmouseY

linea

void setup() {
size(200, 200);
background(255);
smooth();
}

void draw() {
stroke(0);
// Dibuja una linea entre la posición anterior y la actual del cursor
line(pmouseX, pmouseY, mouseX, mouseY);
}

mousePressed, keyPressed

rect

void setup() {
size(200,200);
background(255);
}

void draw() {
// No se dibuja nada en principio
}

// dibuja un rectángulo al presionar el ratón
void mousePressed() {
noStroke();
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,16,16);
}

// Dibuja el fondo cuando se presiona una tecla.
void keyPressed() {
background(255);
}

líneas pmouse

lineas_pmouse

void setup() {
size(200,200);
smooth();
// 30 frames por segundo
frameRate(30);
}

void draw() {
// Dibuja un fondo blanco
background(255);
stroke(0);
// dibuja dos líneas con la posición del ratón y la posición anterior de 100 pixels
line(mouseX-10,mouseY,pmouseX-10,pmouseY+100);
line(mouseX+10,mouseY,pmouseX+10,pmouseY+100);
}

Elipse variable

float circleH = 100;
float change = 0.5;

void setup() {
size(200,200);
smooth();
}

void draw() {
background(255);
noStroke();
fill(0);
ellipse(100,100,100,circleH);
circleH = circleH - change;
if (circleH<-100 || circleH>100){
change = -change;
}
}

circulos aleatorios

// todos los valores variables
float r;
float g;
float b;
float a;
float diam;
float x;
float y;

void setup() {
size(200,200);
background(255);
smooth();
}

void draw() {
r = random(255);
g = random(255);
b = random(255);
a = random(255);
diam = random(20);
x = random(width);
y = random(height);

// dibuja la elipse con los valores aleatorios de diametro, posición y color
noStroke();
fill(r,g,b,a);
ellipse(x,y,diam,diam);
}


Rectangulos con tamaño según la posición del ratón

recy mouse

void setup() {
size(200,200);
smooth();
}

void draw() {
background(100);
stroke(255);
// Rellena el color según el número de frame
fill(frameCount);
rectMode(CENTER);
// Dibuja rectángulos que parten del centro
rect(width/2,height/2,mouseX+10,mouseY+10);
}