Download - Processing
![Page 1: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/1.jpg)
Processing3D Printing BarcelonaAteneu de Fabricació - Barcelona
15/01/2014
![Page 2: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/2.jpg)
Processing is a programming language, development environment, and online community. Since 2001,
Processing has promoted software literacy within the visual arts and visual literacy within technology.
![Page 3: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/3.jpg)
Processing showcase http://www.processing.org/exhibition/
![Page 4: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/4.jpg)
Data VisualizationGenerative Art
Visual PerformancesInteractive Artworks
App Prototyping
![Page 5: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/5.jpg)
Arduino Video GamesVideo Mapping
3D PrintingLearn Programming
![Page 6: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/6.jpg)
![Page 8: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/8.jpg)
![Page 9: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/9.jpg)
http://n-e-r-v-o-u-s.com/cellCycle/
![Page 10: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/10.jpg)
ModelbuilderMk2, a geometry library for Processinghttp://workshop.evolutionzone.com/modelbuilder/
![Page 11: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/11.jpg)
![Page 12: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/12.jpg)
Primeros pasos
![Page 13: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/13.jpg)
![Page 14: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/14.jpg)
Linea - Recta - Rectángulo - Elipse
![Page 15: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/15.jpg)
Centro de origen de la forma
![Page 16: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/16.jpg)
First Challenge - Easy
size(200, 200);rectMode(CENTER);rect(100,100,20,100);ellipse(100,70,60,60);ellipse(81,70,16,32); ellipse(119,70,16,32); line(90,150,80,160);line(110,150,120,160);
![Page 17: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/17.jpg)
![Page 18: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/18.jpg)
Reference
http://processing.org/reference/
![Page 19: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/19.jpg)
size()
![Page 20: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/20.jpg)
![Page 21: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/21.jpg)
Color
![Page 22: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/22.jpg)
Trazo (stroke)
RELLENO (FILL)
stroke( );fill( );rect(250, 200, 100, 75);
QUé valoresponemos de COLOR?
![Page 23: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/23.jpg)
ESCALA DE GRISES
![Page 24: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/24.jpg)
Si dibujamos dos formas, processing siempre usará la última especificación de relleno y trazo, leyendo el código de arriba a
abajo
![Page 25: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/25.jpg)
COLOR RGB
![Page 26: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/26.jpg)
![Page 27: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/27.jpg)
COLOR SELECTOR
![Page 28: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/28.jpg)
![Page 29: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/29.jpg)
![Page 30: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/30.jpg)
TRANSPARENCIAValor Alpha contempla un valor que va desde el 0 al 255, donde 0
es igual a una transparencia total y 255 corresponde a una opacidad completa.
![Page 31: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/31.jpg)
Second Challenge - Easy
![Page 32: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/32.jpg)
Interacción
Animación
![Page 33: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/33.jpg)
fill(#D10D51);ellipse(292, 58, 20, 20);fill(#E8CC2A);ellipse(250, 130, 20, 20);fill(#934A2F);ellipse(364, 120, 25, 25);fill(#ADFFCD);quad(124, 168, 40, 256, 64, 172, 148, 88);quad(124, 168, 40, 256, 160, 336, 244, 248);quad(124, 168, 244, 248, 264, 164, 148, 88);fill(#2E1479);ellipse(95, 170, 20, 20);fill(#25AD33);ellipse(190, 165, 20, 20);fill(#892537);ellipse(124, 276, 20, 20);fill(#0E208E);ellipse(164, 232, 20, 20);fill(#FFFFB4);quad(260, 220, 196, 196, 316, 156, 392, 176);quad(260, 220, 196, 196, 216, 328, 284, 356);quad(260, 220, 284, 356, 416, 316, 392, 176);fill(#D10D51);ellipse(292, 58, 20, 20);fill(#E8CC2A);ellipse(250, 130, 20, 20);fill(#934A2F);ellipse(364, 120, 25, 25);fill(#ADFFCD);quad(124, 168, 40, 256, 64, 172, 148, 88);quad(124, 168, 40, 256, 160, 336, 244, 248);quad(124, 168, 244, 248, 264, 164, 148, 88);fill(#2E1479);ellipse(95, 170, 20, 20);fill(#25AD33);ellipse(190, 165, 20, 20);fill(#892537);ellipse(124, 276, 20, 20);fill(#0E208E);ellipse(164, 232, 20, 20);fill(#FFFFB4);quad(260, 220, 196, 196, 316, 156, 392, 176);quad(260, 220, 196, 196, 216, 328, 284, 356);quad(260, 220, 284, 356, 416, 316, 392, 176);
![Page 34: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/34.jpg)
Ponemos aquella parte del código que sólo se ejecutará una vez al principio
SETUP
DRAWPonemos aquella parte del código que se ejecutará en bucle, una y otra vez, hasta la finalización del programa
* Le asistentes asombrados por la verdad finalmente revelada
![Page 35: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/35.jpg)
SETUP
DRAW
void setup ( ) {
}
void draw ( ) {
}
size(width, height);
background(0);
fill( );
stroke( );
rect( );
...
![Page 36: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/36.jpg)
SETUP
DRAW
![Page 37: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/37.jpg)
¿Dónde está la animación? ¿Los efectos especiales? ¿La interacción?
![Page 38: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/38.jpg)
SETUP
DRAW
En cada iteración, la elipse y el rectángulo tienen la misma posición, el mismo color de relleno y de contorno
¿Qué oCURRE?
¿Alguna solución?Processing se reserva para él algunos nombres, por ejemplo mouseX, mouseY, que indican la posición del cursor
ellipse(mouseX, mouseY, 300, 300);
![Page 39: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/39.jpg)
![Page 40: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/40.jpg)
LEt’s DO AN EXPERIMENT
Definimos el fondo del “canvas” dentro del bloque setup()
Comentamos la función background();
Cambiamos el ancho y alto de la figura ellipse();
![Page 41: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/41.jpg)
LEt’s DO A BOUNCING BALL
![Page 42: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/42.jpg)
ellipse( , ,16,16);
float x = 100;float y = 100;
ellipse(x,y,32,32);
float xspeed = 1;float yspeed = 3.3;
xspeed
yspeed
![Page 43: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/43.jpg)
xspeed
yspeed
![Page 44: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/44.jpg)
Decisiones
![Page 45: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/45.jpg)
CONDITIONAL STATEMENT
if(_________) {
}
MY Question
TRUE
![Page 46: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/46.jpg)
if(_________) {
}
x>width or x <0
xspeed = xSPEED * -1
if(_________) {
}
Y>HEIGHT or Y<0
Yspeed = YSPEED * -1
![Page 47: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/47.jpg)
if(_________) {
}
mousepressedx = mouseXY = MOUSEY
![Page 48: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/48.jpg)
CONDITIONAL STATEMENT (II)if(_________) {
} else {
}
TRUE
FALSE
MY Question
![Page 49: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/49.jpg)
Third Challenge - Medium
http://drdoane.com/thinking-through-a-basic-pong-game-in-processing/
![Page 50: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/50.jpg)
Azar e indeterminación(/r)
![Page 51: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/51.jpg)
![Page 52: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/52.jpg)
RANDOM ELLIPSeS
¿Por qué no funcionaría dentro del draw();?
![Page 53: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/53.jpg)
https://kuler.adobe.com/sandy-stone-beach-ocean-diver-color-theme-15325/
color[] paleta = { #E6E2AF, #A7A37E, #EFECCA, #046380, #002F2F};
![Page 54: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/54.jpg)
![Page 55: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/55.jpg)
![Page 56: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/56.jpg)
Fourth Challenge - Medium
![Page 57: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/57.jpg)
Publicar/compartir
![Page 58: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/58.jpg)
![Page 59: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/59.jpg)
Tweak mode depends on "oscP5" library and will complain if you don't have it installed. Go ahead and install this library by going to the "Sketch" menu. click on "Import Library..." --> "Add Library..." and select "oscP5" from the list.
Built with Processing and Processing.js
![Page 60: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/60.jpg)
![Page 61: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/61.jpg)
Processing - 3D Printing
![Page 62: Processing](https://reader033.vdocuments.us/reader033/viewer/2022042816/558a3ee2d8b42ae8778b46b6/html5/thumbnails/62.jpg)
https://dl.dropboxusercontent.com/u/2345750/sketch_3DPrintingBCN.zip