Made with Processing / Running on Processing JS

Processing Workshop


Design Programacional / Introdução ao Processing para designers

Oficina voltada aos conceitos básicos de programação em Processing
por Dimitre Lima
Nível: Iniciante
Versão Utilizada: 1.0.9

Agenda

Links

Processing
Processing JS
Open Processing
http://www.sketchpatch.net/
http://www.flickr.com/groups/processing/
Ben Fry - Zip Decode

Dia #1

Cada retângulo é um exemplo diferente 
rect(20,20,60,60);

int origem = 20;
rect(origem,origem,60,60);

int x, y;
y = 30; 
x = y * 2;
point (x, y);

int x, y;
x = 20;
y = 30;
point (x, y);

x = x + 10;
y = y + 10;
point (x, y);

x = x + 10;
y = y + 10;
point (x, y);

int a;
for (a=0; a<6; a++) {
	point (a*10, 30);
}

for (int a=0; a<6; a++) {
	point (a*10, a*10);
	println (a);
}

size(500,500);
for (int a=0; a<width; a+=4) {
	line (a, 0, a, 10);
}

for (int a=0; a<width; a+=40) {
	line (a, 0, a, 20);
}

// contorno preto
stroke(0);
line (20,20,80,80);

// preenchimento branco
stroke(255);
line (20,80,80,20);

// contorno preto
stroke(0);
line (20,20,80,80);

// preenchimento branco
stroke(255);
line (20,80,80,20);

size(500,300);
strokeWeight(10);
stroke(0,127);
line (width*.2,height*.2,width*.8, height*.8);

stroke(255,127);
line (width*.2,height*.8,width*.8, height*.2);

int dist = 30;
size (500,500);
background(255);

for (int y=0; y<height/dist; y++) {
	strokeWeight(y*3);
	line (0, y*dist, width, y*dist);
}

size (500,500);
noStroke();
int distancia = 50;
int diametro = 30;

for (int x=0; x<width/distancia; x++) {
	for (int y=0; y<height/distancia; y++) {
		ellipse (x*distancia, y*distancia, diametro, diametro);
	}
}

// Interatividade
void setup() {
	size(300,300);
}

void draw() {
	ellipse (mouseX,mouseY,30,30);
}

void setup() {
	size(300,300);
	fill(0);
	noStroke();
	smooth();
}

void draw() {
	background(255);
	ellipse (mouseX,mouseY,30,30);
}

//randomico
void draw()Ê{
	println ( int(random(6)) + 1 );
}

void draw() {
	stroke(random(255));
	line (random(width), random(height), random(width), random(height));
}

void setup() {
	size(500,500);
}

void draw() {
	stroke(random(255));
	line (random(width), random(height), random(width), random(height));
}

//movimento browniano
float x, y;

void setup() {
	size(400,400);	
	x = width/2;
	y = height/2;
}

void draw() {
	x += random(10)-5;
	y += random(10)-5;
	ellipse(x,y,10,10);
}

// saveFrame - gerando uma imagem TIF de cada frame
float x, y;

void setup() {
	size(400,400);	
	x = width/2;
	y = height/2;
}

void draw() {
	x += random(10)-5;
	y += random(10)-5;
	ellipse(x,y,10,10);
	saveFrame();
}

// Desenho
void setup() {
	size(400,400);
	background(255);
	smooth();
}

void draw() {
	if (mousePressed) {
		line (mouseX, mouseY, pmouseX, pmouseY);
	}
}

// Desenho 2
void setup() {
	size(400,400);
	background(255);
	smooth();
}

void draw() {
	if (mousePressed) {
		strokeWeight(random(20));
		stroke(random(255));		
		line (mouseX, mouseY, pmouseX, pmouseY);
	}
}

// Desenho 3
void setup() {
	size(400,400);
	background(255);
	smooth();
}

void draw() {
	if (mousePressed) {
		strokeWeight(random(20));
		stroke(random(255));		
		line (mouseX, mouseY, pmouseX, pmouseY);
		line (width - mouseX, height - mouseY, width - pmouseX, height - pmouseY);		
	}
}

// Desenho 4
void setup() {
	size(400,400);
	background(255);
	smooth();
}

void draw() {
	if (mousePressed) {
		strokeWeight(random(20));
		stroke(random(255));		
		line (mouseX, mouseY, pmouseX, pmouseY);
		line (width - mouseX, height - mouseY, width - pmouseX, height - pmouseY);		
	}
}

void setup() {
  size(400,400);
  background(255);
  colorMode(HSB,100);
  smooth();
}

void draw() {
  if (mousePressed) {
    strokeWeight(random(20));
    stroke(random(35)+50,90,90);    
    line (mouseX, mouseY, pmouseX, pmouseY);
    line (width - mouseX, height - mouseY, width - pmouseX, height - pmouseY);    
  }
}

//desaceleracao
float x, y;
void setup() {
  size(500,500);
  smooth();
}

void draw() {
  x += (mouseX-x)/30.0;
  y += (mouseY-y)/30.0;
  rect (x,y, 50, 50);
}

float x, y;
void setup() {
  size(500,500);
  smooth();
  noStroke();
}

void draw() {
  fill(0,5);
  rect(0,0,width,height);
  fill(255);
  x += (mouseX-x)/30.0;
  y += (mouseY-y)/30.0;
  ellipse (x,y, 50, 50);
}

// translate, rotate, pushMatrix, popMatrix
translate(0, height/2);
smooth();
rectMode(CENTER);

for (int a=0; a<30; a++) {
  pushMatrix();
  translate(a*3,0);
  rotate(a/10.0);
  rect(0,0,20,20);
  popMatrix();
}

void setup() {
  size(500,500);
  smooth();
}
void draw() {
  background(127);
  translate(width/2, height/2);
  ellipse(sin(frameCount/80.0)  * width/2, 0, 100,100);
}

void setup() {
  size(500,500);
  smooth();
  noFill();
  strokeWeight(.2);
  background(255);
}
void draw() {
  translate(width/2, height/2);
  ellipse(sin(frameCount/80.0)  * width/2, sin(frameCount/60.0) * height/2, 100,100);
}

float easyX, easyY;
void setup () {
  size (300,300);
  fill(255,0,80);
  noStroke();
  smooth();
}

void draw() {
	background(0);
	translate (width/2, height/2);
	easyX += (mouseX-easyX)/30.0;
	easyY += (mouseY-easyY)/30.0;
	for (int a=0; a<100;a++) {
		rotate(easyY/200.0 );
		translate (0,a*1);
		ellipse (0,0,8,8);
	}
}

Alguns artistas (Arte Numérica)

Aaron Meyers
Andreas Köberle
Andy Gilmore
Ben Fry
Casey Reas
Damon Zucconi
David Bollinger
John Maeda
Juan Pablo De Gregorio
Karsten Schmidt
Kristopher Collins
Leander Herzog
Leonel Cunha
Lucas Nijs, Fredrik de Bleser, Tom de Smedt
Marcus Wendt (field.io)
Mario Klingemann
Marius Watz
Michael Hansmeyer
Mikael Hvidtfeldt Christensen
Neil Banas
Noel Borstad
Robert Hodgin
Ryan Alexander
TODO.TO.IT