Este documento proporciona información sobre Processing, un lenguaje de programación y entorno de desarrollo utilizado para crear arte y proyectos interactivos. Processing se puede utilizar para la visualización de datos, el arte generativo, performances visuales, prototipado de aplicaciones y más. El documento también incluye enlaces a ejemplos de proyectos creados con Processing y una introducción sobre cómo dibujar formas básicas y agregar color y animación en Processing.

1. Processing
3D Printing Barcelona
Ateneu de Fabricació - Barcelona
15/01/2014

2. 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.

3. Processing showcase
http://www.processing.org/exhibition/

4. Data Visualization
Generative Art
Visual Performances
Interactive Artworks
App Prototyping

5. Arduino
Video Games
Video Mapping
3D Printing
Learn Programming

7. http://abandonedart.org

9. http://n-e-r-v-o-u-s.com/cellCycle/

10. ModelbuilderMk2, a geometry library for Processing
http://workshop.evolutionzone.com/modelbuilder/

12. Primeros pasos

14. Linea - Recta - Rectángulo - Elipse

15. Centro de origen de la forma

16. 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);

18. Reference
http://processing.org/reference/

19. size()

21. Color

22. Trazo (stroke)
RELLENO (FILL)
QUé valores
ponemos de COLOR?
stroke(
);
fill(
);
rect(250, 200, 100, 75);

23. ESCALA DE GRISES

24. Si dibujamos dos formas, processing siempre usará la última
especificación de relleno y trazo, leyendo el código de arriba a
abajo

25. COLOR RGB

27. COLOR SELECTOR

30. TRANSPARENCIA
Valor 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.

31. Second Challenge - Easy

32. Animación
Interacción

33. 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);

34. * Le asistentes
asombrados por la
verdad finalmente
revelada
SETUP
DRAW
Ponemos aquella
parte del código que
sólo se ejecutará una
vez al principio
Ponemos aquella parte
del código que se
ejecutará en bucle, una y
otra vez, hasta la
finalización del programa

35. void setup ( ) {
SETUP
size(width, height);
}
void draw ( ) {
background(0);
fill( );
DRAW
stroke( );
rect( );
...
}

36. SETUP
DRAW

37. ¿Dónde está la animación? ¿Los efectos
especiales? ¿La interacción?

38. ¿Qué oCURRE?
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
¿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);

40. LEt’s DO AN EXPERIMENT
Comentamos la función
background();
Definimos el fondo del
“canvas” dentro del
bloque setup()
Cambiamos el ancho y
alto de la figura
ellipse();

41. LEt’s DO A BOUNCING BALL

42. ellipse(
,
,16,16);
float x = 100;
float y = 100;
xspeed
float xspeed = 1;
float yspeed = 3.3;
yspeed
ellipse(x,y,32,32);

43. xspeed
yspeed

44. Decisiones

45. CONDITIONAL STATEMENT
MY Question
if(_________) {
TRUE
}

46. x>width or x <0
if(_________) {
xspeed = xSPEED * -1
}
Y>HEIGHT or Y<0
if(_________) {
Yspeed = YSPEED * -1
}

47. mousepressed
if(_________) {
x = mouseX
Y = MOUSEY
}

48. CONDITIONAL STATEMENT (II)
MY Question
if(_________) {
TRUE
} else {
FALSE
}

49. Third Challenge - Medium
http://drdoane.com/thinking-through-a-basic-ponggame-in-processing/

50. Azar e indeterminación
(/r)

52. RANDOM ELLIPSeS
¿Por qué no
funcionaría dentro
del draw();?

53. https://kuler.adobe.com/sandy-stone-beach-oceandiver-color-theme-15325/
color[] paleta = {
#E6E2AF,
#A7A37E,
#EFECCA,
#046380,
#002F2F
};

56. Fourth Challenge - Medium

57. Publicar/compartir

59. 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

61. Processing - 3D Printing

62. https://dl.dropboxusercontent.com/u/2345750/sketch_3DPrintingBCN.zip