Processing

Processing3D Printing BarcelonaAteneu de Fabricació - Barcelona

15/01/2014

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.

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

Data VisualizationGenerative Art

Visual PerformancesInteractive Artworks

App Prototyping

Arduino Video GamesVideo Mapping

3D PrintingLearn Programming

http://abandonedart.org

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

ModelbuilderMk2, a geometry library for Processinghttp://workshop.evolutionzone.com/modelbuilder/

Primeros pasos

Linea - Recta - Rectángulo - Elipse

Centro de origen de la forma

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

Reference

http://processing.org/reference/

size()

Color

Trazo (stroke)

RELLENO (FILL)

stroke( );fill( );rect(250, 200, 100, 75);

QUé valoresponemos de COLOR?

ESCALA DE GRISES

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

abajo

COLOR RGB

COLOR SELECTOR

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.

Second Challenge - Easy

Interacción

Animación

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

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

SETUP

DRAW

void setup ( ) {

}

void draw ( ) {

}

size(width, height);

background(0);

fill( );

stroke( );

rect( );

...

SETUP

DRAW

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

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

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();

LEt’s DO A BOUNCING BALL

ellipse( , ,16,16);

float x = 100;float y = 100;

ellipse(x,y,32,32);

float xspeed = 1;float yspeed = 3.3;

xspeed

yspeed

xspeed

yspeed

Decisiones

CONDITIONAL STATEMENT

if(_________) {

}

MY Question

TRUE

if(_________) {

}

x>width or x <0

xspeed = xSPEED * -1

if(_________) {

}

Y>HEIGHT or Y<0

Yspeed = YSPEED * -1

if(_________) {

}

mousepressedx = mouseXY = MOUSEY

CONDITIONAL STATEMENT (II)if(_________) {

} else {

}

TRUE

FALSE

MY Question

Third Challenge - Medium

http://drdoane.com/thinking-through-a-basic-pong-game-in-processing/

Azar e indeterminación(/r)

RANDOM ELLIPSeS

¿Por qué no funcionaría dentro del draw();?

https://kuler.adobe.com/sandy-stone-beach-ocean-diver-color-theme-15325/

color[] paleta = { #E6E2AF, #A7A37E, #EFECCA, #046380, #002F2F};

Fourth Challenge - Medium

Publicar/compartir

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

Processing - 3D Printing

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