ACTIVIDAD EXTRA-CLASE

Formas
Ha habido mucha preocupación y quejas por introducir 3D a
3D entornos de 2D. En Flash, muchas herramientas de terceras partes
han sido desarrolladas. En Director, un actor gráfico de 3D vectorial
se introdujo recientemente. El sistema es tan complejo que muchos
han desistido incluso de aprenderlo.

En Processing, 3D sólo significa definir un rendering 3D y agregar

una eje z.

vertex(x, y, z);
line(x1, y1, z1, x2, y2, z2);
bezierVertex(x, y, z);
curveVertex(x, y, z);

box(size);
box(width, height, depth);
sphere(size);

Processing actualmente tiene tres modos de rendering. Si no especificamos ningún modo en la

función size() – como hecho en todos los ejemplos hasta ahora - usamos el el rendering de Java
2D. Para usar funciones de 3D hace falta especificar el rendering de la siguiente manera:

size(100,100,P3D); //P3D define el modo de rendering para 3D

Este modo también da soporte a todas las funciones de 2D y además supone ser más rápida que
el rendering 2D. Además existe otro modo de rendering llamado OpenGL. Más información sobre
el los modos de rendering encuentras en esta página de Processing.

size(100,100,P3D);
translate(58, 48, 0);
rotateY(0.5);
box(40);

size(100,100,P3D);
noFill( );
translate(58, 48, 0);
rotateY(0.5);
box(40);
 size(100,100,P3D);
lights( );
translate(58, 48, 0);
rotateY(0.5);
box(40);

size(100,100,P3D);
noStroke( );
lights( );
translate(58, 48, 0);
rotateY(0.5);
box(40);

size(100,100,P3D);
noStroke( );
lights( );
translate(58, 48, 0);
sphere(28);

Nótese que box (caja) y sphere (esfera) no te piden que especifiques coordenadas. En estos
ejemplos, es necesario usar translate y rotate. También hay scale, y un par de funciones
llamadas push y pop que te permiten marcar tus traslados en una moda muy organizada. Para
mayor información ver la referencia de transformaciones de Processing y
los ejemplos Transform de Processing. Si no te importan estas transformaciones, siempre hay
una solución.

Nótese el uso de lights( ) y noLights( ). Usar luces renderizarán la forma 3D de un modo que
sugerirá sombreado. Para más información, mira la referencia de luzes de Processing.

"¿Qué? ¿Esto es para 3D?"

Si crees que esto no es suficiente 3D para permitirte hacer cosas interesantes, entonces mira las
cosas que han hecho en la exposición de Processing. Y esto es sólo el comienzo.

Ejercicio 1
size (200, 200, P3D);
stroke(0);
fill(50, 120, 180);
translate(100, 100, 0);
sphere(70);

Ejercicio 2
size (200, 200, P3D);
noStroke();
fill(50, 120, 180);
lights();
translate(100, 100, -50);
sphere(70);
 Ejercicio 3
size (200, 200, P3D);
noStroke();
fill(50, 120, 180);
lights();
translate(100, 100, -50);
sphere(70);

EJEMPLO 4

size(200, 200, P3D);

noStroke();
background(50);
lights();
translate(width/2+30, height/2, 0);
rotateX(-PI/6);
rotateY(PI/3 + 210/float(height) * PI);
box(45);
translate(0, 0, -50);
box(30);

EJEMPLO 5

// Example 14-8: rotateY

float theta = 0.0;

void setup() {
size(200, 200, P3D);
}

void draw() {
background(255);
stroke(0);
fill(175);
translate(width/2, height/2);
rotateY(theta);
rectMode(CENTER);
rect(0, 0, 100, 100);
theta += 0.02;
}
 EJEMPLO 6

// Drawing lines in 3D requires P3D

// as a parameter to size()
size(100, 100, P3D);
line(30, 20, 0, 85, 20, 15);
stroke(126);
line(85, 20, 15, 85, 75, 0);
stroke(255);
line(85, 75, 0, 30, 75, -50);
Ejemplo 7
size(640,360,P3D);
background(0);
lights();

pushMatrix();
translate(130, height/2, 0);
rotateY(1.25);
rotateX(-0.4);
noStroke();
box(100);
popMatrix();

pushMatrix();
translate(500, height*0.35, -200);
noFill();
stroke(255);
sphere(280);
popMatrix();

Ejemplo 8
void setup() {
size(200, 200, P3D);
}
void draw() {
background(0);
translate(100, 100, 0);
if (mousePressed) {
lights();
}
noStroke();
fill(255);
sphere(50);
}
 Ejemplo 9

void setup() {
size(640, 360, P3D);
noStroke();
fill(204);
}
void draw() {
background(0);
lights();
if(mousePressed) {
float fov = PI/3.0;
float cameraZ = (height/2.0) / tan(fov/2.0);
perspective(fov, float(width)/float(height), cameraZ/2.0,
cameraZ*2.0);
} else {
ortho(-width/2, width/2, -height/2, height/2);
}
translate(width/2, height/2, 0);
rotateX(-PI/6);
rotateY(PI/3);
box(160);
}
Ejemplo 10
void setup() {
size(640, 360, P3D);
}
void draw() {
background(0);
camera(mouseX, height/2, (height/2) / tan(PI/6), width/2,
height/2, 0, 0, 1, 0);
translate(width/2, height/2, -100);
stroke(255);
noFill();
box(200);
}
Ejemplo 11
void setup() {
size(640, 360, P3D);
}
void draw() {
background(0);
camera(mouseX, height/2, (height/2) / tan(PI/6), mouseX,
height/2, 0, 0, 1, 0);
translate(width/2, height/2, -100);
 stroke(255);
noFill();
box(200);
}
Ejemplo 12
size(640, 360, P3D);
background(0);

translate(width/2, height/2, 0);

stroke(255);
rotateX(PI/2);
rotateZ(-PI/6);
noFill();

beginShape();
vertex(-100, -100, -100);
vertex( 100, -100, -100);
vertex( 0, 0, 100);

vertex( 100, -100, -100);

vertex( 100, 100, -100);
vertex( 0, 0, 100);

vertex( 100, 100, -100);

vertex(-100, 100, -100);
vertex( 0, 0, 100);

vertex(-100, 100, -100);

vertex(-100, -100, -100);
vertex( 0, 0, 100);
endShape();

Ejemplo 13
PImage fondo;
int dimension=15;
int sizeBox = 90; // Tamaño de los cubos
float a; // Angulo de rotacion de
los cubos
float offset = PI/24.0; // Angulo entre los cubos
int num = 10; // Cantidad de cubos
color[] colors = new color[num]; // Colores de lo cubos
void setup() {
size(640, 360, P3D);
 fondo = loadImage("fondo.jpg"); // Imagen de fondo
colorMode(RGB, dimension);
for(int i=0; i<num; i++) {
colors[i] = color(255 * (i+1)/num);
}
}
void draw() {
background(0);
translate(width/2, height/2,0); // Posición de los
cubos en el centro de la ventana
rotateX(millis()*0.0004);
rotateY(millis()*0.0007);
strokeWeight(4.5); // Líneas de las aristas de
los cubos
a += 0.01; // Velocidad de rotación

for(int i = 0; i < num; i++) {

pushMatrix();
fill(0,2); // Color de los cubos
rotateY(a + offset*i);
rotateX(a/2 + offset*i);

//Zoom al hacer click

if (mousePressed == true){
sizeBox ++;
} else {
sizeBox -= 0.5; // Aumenta el tamaño del los cubos
logrando el efecto de zoom
sizeBox = 90; // Vuelve a su tamaño inicial
}

box(sizeBox);
popMatrix();
drawFoo();
}
}
void drawFoo() {
translate(-dimension/2*offset, -dimension/2*offset, -
dimension/2*offset);
for (int x=5; x<dimension; x++) {
for (int y=6; y<dimension; y++) {
for (int z=9; z<dimension; z++) {
if (x <= 0 || x > dimension - 2 || x % 8 == 0 ||
y <= 0 || y > dimension - 2 || y % 8 == 0 ||
 z <= 0 || z > dimension - 2 || z % 8 == 0) {
stroke(x, y, z, 3);

}
}
}
}
}
Ejemplo 14
int mousexm=0;
void setup() {
size(1000,800,P3D);
frameRate(2);// Especifica el número de fotogramas que se
mostrarán cada segundo
}
void draw(){
background(0);
translate(width/2,height/2); //Variable del sistema que
almacena el ancho de la ventana de visualización
rotateY(mousexm);// La variable de sistema mouseX siempre
contiene la coordenada horizontal actual del mouse.
lights();
pointLight(250,246,114, // Color
-550, -400, 0);//posicion

directionalLight(0, 102, 255, // Color

1, 0, 0); // The x-, y-, z-axis direction

// Cambiar la altura de la cámara con el mouseY

camera(mouseX,-mouseY, 800.0, // eyeX, eyeY, eyeZ
0.0, 0.0, 0.0, // centerX, centerY, centerZ
0.0, 5.0, 0.0); // upX, upY, upZ

/*
camera(mouseX, 10.0, 5.0, // eyeX, eyeY, eyeZ
90.0, 0.0, 0.0, // centerX, centerY, centerZ
0.0, 5.0, 0.0); // upX, upY, upZ
*/
noStroke();
// El uso de las funciones beginShape () y endShape
() permite crear formas más //complejas. beginShape
() comienza a grabar vértices para una forma y endShape
() detiene la //grabación.
// fondo del cielo------------------------------------------
beginShape();
fill(#86A9CB);
vertex(-600,-400,-50);
fill(#86A9CB);
vertex(600,-400,-50);
fill(#365471);
vertex(600,100,-50);
fill(#365471);
vertex(-600,100,-50);
endShape();

//calle de los edificos------------------------------------

beginShape();
fill(100,100,100);
vertex(-600,100,0);
vertex(-600,100,200);
vertex(600,100,200);
vertex(600,100,0);

endShape();
//caida anden----------------------------------------------
beginShape();
fill(100,100,100);
vertex(-600,100,200);
vertex(-600,105,200);
vertex(600,105,200);
vertex(600,100,200);
endShape();

//carretera------------------------------------------------
beginShape();
fill(100,100,100);
vertex(-600,105,350);
vertex(-600,105,200);
vertex(600,105,200);
vertex(600,105,350);
endShape();

beginShape();
fill(#FEFF00);
vertex(-550,104,278);
vertex(-550,104,272);
vertex(-400,104,272);
vertex(-400,104,278);
endShape();

beginShape();
fill(#FEFF00);
vertex(-350,104,278);
vertex(-350,104,272);
vertex(-200,104,272);
vertex(-200,104,278);
endShape();

beginShape();
fill(#FEFF00);
vertex(0,104,278);
vertex(0,104,272);
vertex(-150,104,272);
vertex(-150,104,278);
endShape();

beginShape();
fill(#FEFF00);
vertex(50,104,278);
vertex(50,104,272);
vertex(200,104,272);
vertex(200,104,278);
endShape();

beginShape();
fill(#FEFF00);
vertex(250,104,278);
vertex(250,104,272);
vertex(400,104,272);
vertex(400,104,278);
endShape();

beginShape();
fill(#FEFF00);
vertex(450,104,278);
vertex(450,104,272);
vertex(600,104,272);
vertex(600,104,278);
endShape();

//caida anden 2-------------------------------------------

beginShape();
fill(100,100,100);
vertex(-600,100,350);
vertex(-600,105,350);
vertex(600,105,350);
vertex(600,100,350);
endShape();

//zona verde----------------------------------------------
beginShape();
fill(25,85,28);
vertex(-600,100,350);
vertex(-600,100,500);
vertex(600,100,500);
vertex(600,100,350);
endShape();

//edificio mitad-------------------------------------------
fill(#989B7B);
translate(60,40,100);
box(200,120,100);

//ultimo edificio------------------------------------------
fill(#8E7D39);
translate(370,0,0);
box(150,120,100);

//primer edificio------------------------------------------
fill(#938677);
translate(-650,-40,0);
box(130,190,100);

//sol------------------------------------------------------
translate(20,-250,20);
noStroke();
fill(255,243,8);
sphere(30);

//ventana edificio 1 --------------------------------------

beginShape();
stroke(40);
fill(#3C7EBF);
vertex(-25,180,31);
fill(#A0D0FF);
vertex(-25,220,31);
fill(#3C7EBF);
vertex(-70,220,31);
fill(#A0D0FF);
vertex(-70,180,31);
endShape();
line(-47,180,32,-47,220,32);
line(-25,200,32,-70,200,32);

beginShape();
stroke(40);
fill(#A0D0FF); vertex(-15,180,31);
fill(#3C7EBF); vertex(-15,220,31);
fill(#A0D0FF); vertex(30,220,31);
fill(#3C7EBF); vertex(30,180,31);
endShape();
line(7,180,32,7,220,32);
line(-15,200,32,30,200,32);

beginShape();
stroke(40);
fill(#3C7EBF); vertex(-25,230,31);
fill(#A0D0FF); vertex(-25,270,31);
fill(#3C7EBF); vertex(-70,270,31);
fill(#A0D0FF); vertex(-70,230,31);
endShape();
line(-47,230,32,-47,270,32);
line(-25,250,32,-70,250,32);

beginShape();
stroke(40);
fill(#A0D0FF); vertex(-15,230,31);
fill(#3C7EBF); vertex(-15,270,31);
fill(#A0D0FF); vertex(30,270,31);
fill(#3C7EBF); vertex(30,230,31);
endShape();
line(7,230,32,7,270,32);
line(-15,250,32,30,250,32);

beginShape();
stroke(40);
fill(#894D04);
vertex(-50,345,31);
vertex(-50,280,31);
vertex(10,280,31);
vertex(10,345,31);
endShape();

line(-20,345,31,-20,280,32);

//ventana segundo edificio---------------------------------

beginShape();
stroke(40);
fill(#A0D0FF); vertex(170,250,31);
fill(#3C7EBF); vertex(170,300,31);
fill(#A0D0FF); vertex(220,300,31);
fill(#3C7EBF); vertex(220,250,31);
endShape();
line(170,275,32,220,275,32);
line(195,250,32,195,300,32);

beginShape();
stroke(40);
fill(#3C7EBF); vertex(290,250,31);
fill(#A0D0FF); vertex(290,300,31);
fill(#3C7EBF); vertex(240,300,31);
fill(#A0D0FF); vertex(240,250,31);
endShape();
line(290,275,32,240,275,32);
line(265,250,32,265,300,32);

beginShape();
stroke(40);
fill(#894D04);
vertex(345,290,31);
vertex(345,350,31);
vertex(305,350,31);
vertex(305,290,31);
endShape();

beginShape();
stroke(40);
fill(64,173,152);
vertex(160,229,-90);
vertex(160,229,50);
vertex(360,229,50);
vertex(360,229,-90);
endShape();

beginShape();
stroke(40);
fill(64,173,152);
vertex(160,210,-20);
vertex(160,229,50);
vertex(360,229,50);
vertex(360,210,-20);
endShape();

beginShape();
stroke(40);
fill(64,173,152);
vertex(160,210,-20);
vertex(160,229,-90);
vertex(360,229,-90);
vertex(360,210,-20);
endShape();

//ventanas tercer edificio---------------------------------

beginShape();
stroke(40);
fill(#8E877F);
vertex(700,270,31);
vertex(700,350,31);
vertex(610,350,31);
vertex(610,270,31);
endShape();
line(613,275,32,697,275,32);
line(613,283,32,697,283,32);
line(613,291,32,697,291,32);
line(613,299,32,697,299,32);
line(613,307,32,697,307,32);
line(613,315,32,697,315,32);
line(613,323,32,697,323,32);
line(613,331,32,697,331,32);
line(613,339,32,697,339,32);
//line(613,347,32,697,347,32);

beginShape();
stroke(40);
fill(#894D04);
vertex(600,290,31);
vertex(600,350,31);
vertex(565,350,31);
vertex(565,290,31);
endShape();

beginShape();
stroke(40);
fill(#81622A);
vertex(550,229,-90);
vertex(550,229,50);
vertex(710,229,50);
vertex(710,229,-90);
endShape();

beginShape();
stroke(40);
fill(#81622A);
vertex(550,210,-20);
vertex(550,229,50);
vertex(710,229,50);
vertex(710,210,-20);
endShape();

beginShape();
stroke(40);
fill(#81622A);
vertex(550,210,-20);
vertex(550,229,-90);
vertex(710,229,-90);
vertex(710,210,-20);
endShape();

//arbol----------------------------------------------------
beginShape();
translate(-150,250,20);
noStroke();
fill(8,90,5);
sphere(20);
endShape();

beginShape();
translate(-15,0,20);
fill(8,90,5);
sphere(20);
endShape();

translate(20,-20,0);
fill(8,90,5);
sphere(20);

fill(#50310B);
translate(-15,70,-10);
box(10,70,10);

//arbol 2-------------------------------------------------
translate(600,-65,-10);
fill(8,90,5);
sphere(25);

translate(-13,-23,5);
fill(8,90,5);
sphere(25);

translate(30,-10,0);
fill(8,90,5);
sphere(25);

translate(-13,-23,5);
fill(8,90,5);
sphere(25);

translate(35,50,-10);
fill(8,90,5);
sphere(25);

translate(0,-40,0);
fill(8,90,5);
sphere(25);

translate(-30,30,15);
fill(8,90,5);
sphere(25);

translate(30,-20,0);
fill(8,90,5);
sphere(25);

translate(0,0,-30);
fill(8,90,5);
sphere(25);

translate(0,20,0);
fill(8,90,5);
sphere(25);

translate(-10,-40,0);
fill(8,90,5);
sphere(25);

translate(-10,115,12);
fill(#50310B);
box(20,100,20);

//camion---------------------------------------------------
//bogega
translate(-40,10,190);
fill(#FFFFFF);
box(200,50,50);

//cabina
translate(140,10,0);
fill(#FF0000);
box(50,30,40);

translate(-10,-20,0);
fill(#FF0000);
box(30,20,40);

fill(0,0,0);
translate(0,90,24);
ellipse(-200,-50,25,25);

translate(-150,-50,0);
ellipse(0,0,25,25);

translate(70,0,0);
ellipse(0,0,25,25);

translate(90,0,-3);
ellipse(0,0,25,25);
//mitad
translate(0,0,-42);
ellipse(0,0,25,25);

translate(-90,0,-5);
ellipse(0,0,25,25);

translate(-70,0,0);
ellipse(0,0,25,25);

translate(-50,0,0);
ellipse(0,0,25,25);

translate(180,0,25);
fill(#FF0000);
box(30,5,25);

beginShape();
stroke(40);
fill(64,173,152);
vertex(36,-30,20);
vertex(36,-50,20);
vertex(36,-50,-17);
vertex(36,-30,-17);
endShape();

beginShape();
stroke(40);
fill(#7C7C7C);
vertex(56,-30,20);
vertex(56,-10,20);
vertex(56,-10,-17);
vertex(56,-30,-17);
endShape();

translate(53,-15,12);
noStroke();
fill(#FFF300);
sphere(5);

translate(0,0,-24);
noStroke();
fill(#FFF300);
sphere(5);

//chapas puertas-------------------------------------------
translate(12,3,-162);
noStroke();
fill(#FFF300);
sphere(3);

translate(-255,0,0);
noStroke();
fill(#FFF300);
sphere(3);

translate(-350,0,0);
noStroke();
fill(#FFF300);
sphere(3);

translate(-17,0,0);
noStroke();
fill(#FFF300);
sphere(3);

//POSTE 1---------------------------------------------------
translate(-230,-80,-20);
fill(#6A6A6A);
box(8,200,8);

translate(0,-98,20);
fill(#6A6A6A);
box(5,5,40);

translate(0,0,30);
fill(#6A6A6A);
box(20,10,40);
translate(0,5,0);
noStroke();
fill(#FFF300);
sphere(6);

//POSTE 2--------------------------------------------------
translate(1010,100,-50);
fill(#6A6A6A);
box(8,200,8);

translate(0,-98,20);
fill(#6A6A6A);
box(5,5,40);

translate(0,0,30);
fill(#6A6A6A);
box(20,10,40);

translate(0,5,0);
noStroke();
fill(#FFF300);
sphere(6);

//RESTO DE HOJAS DE LOS ARBOLES----------------------------

translate(-315,15,-50);
fill(8,90,5);
sphere(25);

translate(-630,60,0);
fill(8,90,5);
sphere(25);

translate(30,30,10);
fill(8,90,5);
sphere(25);

translate(10,-30,0);
fill(8,90,5);
sphere(25);

translate(-5,-20,0);
fill(8,90,5);
sphere(25);
 //prado atras de los edificios-----------------------------
beginShape();
fill(25,85,28);
vertex(-245,140,-140);
vertex(-245,140,-195);
vertex(958,140,-195);
vertex(958,140,-140);
endShape();

//montaña--------------------------------------------------
/* beginShape();
fill(#716E6E);
vertex(500,140,-150);
vertex(950,140,-150);
vertex(725,-300,-160);
endShape();

beginShape();
vertex(950,140,-190);
vertex(950,140,-150);
vertex(725,-300,-160);
endShape();

beginShape();
vertex(500,140,-190);
vertex(500,140,-150);
vertex(725,-300,-160);
endShape();
*/
}

Ejercicio 15
// Elipse continuamente rotando
float angulo = 0.0; //Declaramos una variable de tipo float
para ir acululando las vueltas que de la figura
void setup()
{
size(400, 400,P3D);
}
void draw()
{
fill(0, 20);
noStroke();
 rect(0, 0, width, height); //Creamos el rectangulo que gira
sobre la elipse
noFill();
stroke(255);
translate(width/2, height/2); //Trasladamos la figura al
centro del lienzo
rotate(angulo=angulo+0.1); //Sunamos cada vuelta de la
fiura
translate(-width/2, -height/2); //Tenemos cuadrante
positivos y negativos
ellipse(width/2, height/2, 100, 300); //Aqui se crea la
elipse central
}
Ejercicio 16
// Elipse rotando alrededor
// del eje y
float ang = 0.0;
void setup()
{
size(400, 400, P3D);
stroke(255, 0, 0);
noFill();
}
void draw()
{
background(0);
// Dibujaremos centrado
// en el (0,0,0)
translate(width/2, height/2);
rotateX(ang=ang+ 0.1);
ellipse(0, 0, 300, 200);
}
Ejercicio 17
beginShape(POINTS);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();
 Ejercicio 18
beginShape(LINES);
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

Ejercicio 19

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape();

Ejercicio 20

noFill();
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);
endShape(CLOSE);

Ejercicio 21

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();
 Ejercicio 22

beginShape(TRIANGLE_STRIP);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
vertex(90, 75);
endShape();

Ejercicio 23

beginShape(TRIANGLE_FAN);
vertex(57.5, 50);
vertex(57.5, 15);
vertex(92, 50);
vertex(57.5, 85);
vertex(22, 50);
vertex(57.5, 15);
endShape();

Ejercicio 24

beginShape(QUADS);
vertex(30, 20);
vertex(30, 75);
vertex(50, 75);
vertex(50, 20);
vertex(65, 20);
vertex(65, 75);
vertex(85, 75);
vertex(85, 20);
endShape();
 Ejercicio 25

beginShape(QUAD_STRIP);
vertex(30, 20);
vertex(30, 75);
vertex(50, 20);
vertex(50, 75);
vertex(65, 20);
vertex(65, 75);
vertex(85, 20);
vertex(85, 75);
endShape();

Ejercicio 26

beginShape();
vertex(20, 20);
vertex(40, 20);
vertex(40, 40);
vertex(60, 40);
vertex(60, 60);
vertex(20, 60);
endShape(CLOSE);

Ejercicio 27

PFont font;
String tiempo;
void setup(){
size(600,400);
font=loadFont("ArialMT-48.vlw");
textFont(font,32);
}
void draw(){
background(222);
tiempo=str(hour())+':'+str(minute())+':'+str(second());
text(tiempo,220,200);
}
 Ejercicio 28

size(600, 400);
strokeWeight(5);
line(250, 100, 250, 300);
line(250, 300, 50, 300);
line(50, 300, 50, 200);
line(50, 200, 250, 200);
stroke(255, 0, 0);
line(550, 200, 350, 200);
line(350, 200, 350, 300);
line(350, 300, 550, 300);

Ejercicio 29
void setup() {
size(400, 400);
}
void draw() {
background(222);
ellipse(mouseX, mouseY, 30, 30);
}

Ejercicio 30
int posX=100;
int posY=100;
//Direction Variables
int dirX=1;
int dirY=1;
void setup() {
size(600, 400);
}
void draw() {
background(222);

posX=posX+dirX;
if (posX>width) {
dirX=-1;
}
if (posX<0) {
dirX=1;
}

posY=posY+dirY;
 if (posY>height) {
dirY=-1;
}
if (posY<0) {
dirY=1;
}
//Draw the primitive shape
ellipse(posX, posY, 30, 30);
}