ejercicio en clases 31 agosto

http://openprocessing.org/visuals/?visualID=35175

ejercicio setup y draw 3

void setup() {
size(500,400);
smooth();
background(109);
frameRate(30);
}
void draw(){
stroke(mouseX,0,mouseY);
float distance=dist(pmouseX,pmouseY,mouseX,mouseY);
float maxStroke=80;
strokeWeight(maxStroke-constrain(distance,0,maxStroke));
line(pmouseX,pmouseY,mouseX,mouseY);
}
void mouseClicked(){
rectMode(CENTER);
fill(mouseY,400,mouseX);
noStroke();
triangle(mouseX,mouseY,30,30,40,50);
}
void keyPressed(){
background(0);
}

ejercicio setup y draw 2

void setup() {
size(500,400);
smooth();
background(255);
frameRate(30);
}
void draw(){
stroke(mouseX,0,mouseY);
float distance=dist(pmouseX,pmouseY,mouseX,mouseY);
float maxStroke=15;
strokeWeight(maxStroke-constrain(distance,0,maxStroke));
line(pmouseX,pmouseY,mouseX,mouseY);
}
void mouseClicked(){
rectMode(CENTER);
fill(mouseY,400,mouseX);
noStroke();
triangle(mouseX,mouseY,30,30,40,50);
}
void keyPressed(){
background(0);
}

ejercicio setup y draw

códigos:

void setup(){
size(400,400);
}
void draw(){
line(pmouseX,pmouseY,mouseX,mouseY);
}

trabajo en clases 3

trabajo en clases 2

trabajo en clases 1

http://www.openprocessing.org/visuals/?visualID=35135

Getting Started with Processing / Capítulo 1

Capítulo 1 /Hola

Processing es un software para la creación de imágenes e interacciones mediante líneas de códigos para la creación de imágenes como círculos, líneas, cuadrados, en una pantalla paralela. Lo que se logra después de tiempo de investigación de algoritmo lo que se puede ver son imágenes e interfaces de creaciones visuales.
Processing ofrece una manera de creación gráfica interactiva. Las formas de interactuar y crear imágenes a través de la programación se presentaran en las páginas siguientes.

Bocetos y prototipos

La idea de processing es dibujar primero en papel para luego pasarlo a códigos de una manera más rápida y amigable. Por lo general las ideas pasan de bocetos al software, las ideas finales se seleccionan y se juntan para formar un prototipo, en donde los dibujos se mueven a partir de los bocetos hechos en la pantalla.

Flexibilidad

Processing cuenta con una barra de herramientas que trabajan creando diversas combinaciones. El programa puede ser utilizado para un proyecto rápido o para una investigación en profundidad. Existen más de 100 bibliotecas para ampliar el procesamiento en cuanto a sonido, visión artificial y fabricación digital.

Gigantes

Desde la década de 1960 la gente ha estado haciendo fotografías con los computadores y hay mucho que aprender de esto. Esto está sobre los hombros de gigantes, los que incluyen pensadores del diseño, infografía, arte, arquitectura y estadísticas.
Algunos de estos artistas son: Sketchpad Ivan Sutherland (1963), Alan Kay Dynabook (1968) y Ruth Leavitt (1976). Processing esta inspirado en las grandes ideas por más de cuatro décadas.

Árbol genealógico

Processing está basado en un lenguaje genealógico, su raíz viene del lenguaje de programación denominado Java, tiene relación pero Processing tiene interacción entre la gráfica y su interacción. Los elementos gráficos están relacionados con PostScript (una base de PDF) y Open GL (especificación de gráficos en 3D). Debido a estas relaciones Processing es una puerta para otros lenguajes de programación.

Participa

Miles de personas están descargando Processing cada día y al igual que ellos tu puedes hacer lo mismo gratuitamente. Processing es un software libre en donde puedes personalizar sus herramientas y puedes participar compartiendo tus trabajos en línea en “ Openprocessing.org”


Link a paper en Scribd: http://es.scribd.com/doc/62466041/Capitulo-1-Getting-Started

es un ROBOK

todos los codigos:

size (500,600);
noStroke();
background(0);
fill (173,255,47); //cabeza
rect(180,90,140,90);
fill (199,21,133); // cuello
rect (235,180,25,32);
fill(173,255,47); //cuerpo
rect(180,200,140,120);
fill(154,50,205); //brazo izquierdo
rect (150,200,30,110);
fill (154,50,205); //brazo derecho
rect (320,200,30,110);
fill (199,21,133); //muñeca izquierda
rect (160,310,10,15);
fill (199,21,133); //muñeca derecha
rect (330,310,10,15);
fill (154,50,205); //manito izquierda
rect (152,320,25,20);
fill (154,50,205); //manito derecha
rect (323,320,25,20);
fill (173,255,47); //pierna izquierda
rect (210,320,30,90);
fill(173,255,47); //pierna derecha
rect (260,320,30,90);
fill (154,50,205); //pie izquierdo
rect (205,410,40,30);
fill (154,50,205); //pie derecho
rect (255,410,40,30);
smooth();
fill (255,255,255); //ojo izquierdo
stroke(0);
ellipse (220,125,30,50);
fill (255,255,255); //ojo derecho
stroke (0);
ellipse (280,125,30,50);
noStroke();
fill (224,102,255); //boton
ellipse (250,290,10,10);
fill (224,102,255); //boton
ellipse(250,260,10,10);
fill (224,102,255); //boton
ellipse (250,230,10,10);
fill (0); //ojo negro derecho
ellipse (280,130,10,10);
fill(0); //ojo izquierdo negro
ellipse(220,130,10,10);

http://www.openprocessing.org/visuals/?visualID=35125

ejercicio 3

Demo Color.


Demo simple para mostrar como se despliegan los colores en Processing
/*

En un computador, los colores son la combinacion de rojo, verde y azul.
El rango de cada color va entre 0-255. Al mezclar estos valores, puedes obtener millones de colores.
ejemplo- rojo=255, verde=166, azul=0. Crearemos un narano, si los 3 valores son iguales (rojo =100, verde=100, azul=100) luego obtienes un tipo de gris..

Mira colorMode() para otras maneras de combinar colores
*/
//setea tamano de ventana

size(300, 300);

//setea background a negro. Fijate que solo uso un argumento.
//Processing lo suficientemente inteligente para saber que 1 argumento significa un tipo de gris

background(0);

//apaga stroke

noStroke();

//cambia fill a rojo brillante

fill(255,0,0);

//dibuja un rectangulo rojo a la izquierda arriba

rect(0,0,100,50);

//cambia fill a un verde oscuro

fill(0,80, 0);

//dibuja un rect verde justo a la derecha de la derecha del anterior

rect(100,0,100,50);

//cambia fill a celeste

fill(150,150,255);

//dibuja un rect azul justo a la derecha del anterior

rect(200,0,100,50);

//cambia fill a un gris medio

fill(128);

//dibuja un gran rect justo abajo de los tres previos

rect(0,50,300,100);

segundo ejercicio

ELLIPSE MODE Y DIBUJAR ELLIPSES


//PS un circulo es una ellipse que tiene el mismo ancho y alto.

//setae una ventana en processing a 200 pixels ancho y 200 pixeles de alto

size(200, 200);

//Por defecto, processing coloca un borde pixeleado negro alrededor de sus graficas.
//la funcion noStroke() lo apagara.

noStroke();

//cambiar el fondo a negro. Lo que va () se puede cambiar para que resulte otro color.

background(0);

//Hagamos el circulo suave, por defecto, lucira un poco “duro”

smooth();

/*por defecto ellipseMode es CENTER. Quiero comenzar con CORNER.
Si una caja fuera a ser dibujada alrededor de la ellipse, el costado superior izquierdo de esa caja estaria en los primeros 2 argumentos
*/

ellipseMode(CORNER);


//dibuja una elipse que sea de 50 pixeles de ancho por150 pixeles de alto
//y el costado superior iquierdo de la caja este 75, 10

ellipse(75, 10, 50, 150);

/*cambiemos ellipseMode atras a CENTER, por defecto.
Ahora el centro de la elipse esta situado en losprimeros 2 argumentos.
is placed at the first two arguments en la funcion ellipse().
Ancho y alto son son aun los mismos.
*/

ellipseMode(CENTER);

//cambiaremos el "fill" de la siguiente elipse a un gris claro

fill(185);

//hagamos que esta elipse luzca “dura”, apagaremos smooth() y lo llamaremos noSmooth().

noSmooth();

/*Dibujaremos una elipse que tenga 100 pixeles de ancho y 55 pixeles de alto y su centro este a 50, 100.
El lado izquierdo de la elipse deberia tocar el lado izquierdo de la pantalla.
Puedes ver por que?
Tambien fijate que parte de esta nueva elipse tapa parte de la elipse antigua, eso es porque processing pinta sobre cualquier imagen en el algoritmo.
*/

ellipse(50, 100, 100, 55);

//Mejor volvamos a smooth…

smooth();



/*Cambiemos el ellipseMode a CORNERS.
CORNERS nos permite dibujar una elipse definiendo la esquina izquierda superior y la esquina derecha inferior de su caja
*/

ellipseMode(CORNERS);

//cambiar "fill" a un gris oscuro

fill(64);

//dibujar un rectangulo donde su esquina superior izquierda sea de 0,175
//y su esquina inferior derecha este a 200, 190

// dibujar una ellpse donde su esquina superior izquierda sea de 0,155
//y su esquina inferior derecha este a 200, 190

ellipse(0, 155, 200, 190);

//dibujaremos una caja alrededor del ultimo circulo.
//es el mismo argumento que la elipse, pero usa rectMode y rect.

rectMode(CORNERS);

//apaga fill y enciende stroke con un grosor de 2 pixeles.
//de otra manera el rect's fill pintara sobre nuestra elipse!

noFill();
strokeWeight(2);

//deja stroke en blanco
stroke(255);

//dibuja un rectangulo con los mismos argumentos de la ultima elipse.

rect(0,155,200,190);

Primer ejercicio

Simple bosquejo que muestra como usar rectMode y dibujar rectangulos.


//setea una ventana de processing a 200 pixeles de ancho y 200 pixeles de alto.

size(200, 200);

//Por defecto, processing coloca un borde pixeleado negro alrededor de sus graficas.
//la funcion noStroke() lo apagara.

noStroke();

//cambiar el fondo a negro. Lo que va () se puede cambiar para que resulte otro color.

background(0);

/*por defecto rectMode es CORNER (costado). Colocara al rectangulo en la parte superior izquierda, en los 2 primeros argumentos, y dibujara el ancho y alto desde aqui.
*/
//dibuja un rectangulo de 50 pixeles de ancho y 150 pixeles de alto
//costado superior izquierdo es de 75, 10

rect(75, 10, 50, 150);

//cambiemos rectMode a CENTER. Ahora el centro del rectangulo //esta en los primeros dos argumentos en la funcion rect

rectMode(CENTER);

//cambiaremos el "fill" del rectangulo a un gris claro

fill(185);

/*Dibujemos un rectangulo que sea de 40 pixeles de ancho y 55 pixeles de alto y su centro de 20, 100.
El borde izquierdo del rectangulo deberia tocar el lado izquierdo de la pantalla. Puedes ver por que? */

rect(20, 100, 40, 55);


/*Cambiemos el rectMode a CORNERS.
CORNERS nos permite dibujar un rectangulo definiendo la esquina izquierda superior y la esquina derecha inferior. Las otras dos esquinas pueden ser deducidas desde estas dos otras esquinas.
*/

rectMode(CORNERS);

//cambiar "fill" a un gris oscuro

fill(64);

//dibujar un rectangulo donde su esquina superior izquierda sea de 0,175
//y su esquina inferior derecha este a 200, 190

rect(0, 175, 200, 190);




1 RECT DEMO

SE INICIA SEGUNDO SEMESTRE

en tecnologías aplicadas II...ahora con PROCESSING... aquí está mi primer intento en clases!