Cuerpos Geométricos
En esta clase agregaremos parámetros a los cuerpos geométricos, en particular la cantidad de polígonos. Se le pide al alumno que invente sus propios valores, el valor de la práctica actual no está en copiar código sino en crear sus propias abstracciones 3D.
Al final del post, hay ejemplos de diversos ejercicios creados por alumnos.
Cuando se crea un toro lo hacemos de la siguiente manera: torus()
Dentro del paréntesis podemos o no poner un valor, en el segundo caso P5 determina un valor por defecto. Pero si agregamos un segundo valor obtenemos el diámetro (ancho de la rosquilla/anillo) aunque en la referencia dice que se trata del segundo radio.
POLIGONOS DEL TORO
Como trabajamos con objetos primitivas (objetos básicos) P5Js nos da control sobre la cantidad de polígonos que podemos darle a cada forma.
Para el toro, podemos agregar 2 valores extra, el tercero y cuarto número para indicar cuantos polígonos debe tener de forma perimetral y circular en el anillo respectivamente. En la siguiente imagen, podemos ver como cambiando los valores de 3, 6 o 20 nos da una forma más redondeada ya que hay más polígonos para definir el cuerpo geométrico. Les indico a los chicos que no conviene subir más de 20 o 40 ya que al agregar muchos objetos le puede resultar pesado a la memoria de la computadora, y les explico la diferecia entre un personaje de la PS1 que tal vez tendría 100 polígonos, contra un personaje de la PS4 donde podemos estar por encima de los 2 mil polígonos por personaje.
POLIGONOS DEL CILINDRO Y EL CONO
Para el cilindro, usamos los ultimos valores para especificar la cantidad de divisiones poligonales en el cuerpo, para la base y la altura, aunque todavía no podemos deformar el cilindro, y por ello el cuarto valor puede ser omitido.
El cono es identico al cilindro en cuanto a sus parámetros, podemos especificar 4 valores: radio de la base, altura, polígonos de la base y polígonos de división hacia arriba.
POLIGONOS DE LA ESFERA
La esfera solo tiene un parámetro de radio (que es el que usamos comunmente), pero podemos agregar 2 números que son las divisiones verticales y polares (como paralelos y meridianos).
Para la clase, pongo varios rotateY() y torus() con diversos valores aunque le pido a los alumnos que pongan sus propios valores, o incluso que usen en vez de toros, cilindros, esferas, o que cambien el eje del rotate (rotateX, rotateY o rotateZ).
//Código de la Clase
var imagen1;var imagen2;
var imagen3;
var imagen4;
var imagen5;
function setup() {
createCanvas( windowWidth , windowHeight , WEBGL );
imagen1 = loadImage ("imagenes/tardis0.jpg");
imagen2 = loadImage ("imagenes/tardis1.jpg");
imagen3 = loadImage ("imagenes/tardis2.jpg");
imagen4 = loadImage ("imagenes/tardis3.jpg");
imagen5 = loadImage ("imagenes/tardis4.jpg");
}
function draw(){
background(0);
rotateX( mouseY/100 );
rotateY( mouseX/100 );
rotateY( frameCount/100 );
torus(100,20, 3,3)
rotateY( frameCount/100 );
torus(200,20, 6,6)
rotateY( frameCount/100 );
torus(300,20, 9,9)
rotateY( frameCount/100 );
torus(400,20, 13,13)
}