Practica 4 - 2 Graficación

S.E.P.
TECNOLÓGICO NACIONAL DE MÉXICO
INSTITUTO TECNOLÓGICO
de Tuxtepec
ASIGNATURA:
Graficación
DOCENTE:
María Luisa Acosta Sanjuán
CARRERA:
Ingeniería en Sistemas
Computacionales
ACTIVIDAD:
Práctica 2. Ejercicios de la
unidad (Actividad integradora)
UNIDAD 4
Relleno, iluminación y
sombreado.
PRESENTA:
Martin Osorio Pascual
21350279
SEMESTRE:
5
GRUPO:
A
Martes, 28 de Noviembre, 2023

INSTITUTO TECNOLOGICO DE TUXTEPEC
Departamento de Sistemas y Computación
Formato para prácticas de Laboratorio
Clave de
Plan de Nombre de la
Carrera la Semestre Gpo. Periodo
estudios materia
materia
Ingeniería en SCC -
2009-
Sistemas 1010 Graficación. v A AGO-DIC-2023
2010
Computacionales
Duración
Practica No. Laboratorio de: Nombre de la práctica
(Hora)
4_2 SC1 Ejercicios de la unidad (Actividad integradora) 1
1. Enunciado.
De lo solicitado en clase, presentar todos los ejercicios mediante un formato de
práctica en processing aplicando polígono e imágenes.
NOTA: Actualizar formato
No. Práctica: 4_2
2. Introducción
Con la ayuda de la aplicación de Processing vamos a realizar los ejemplos de los programas que
fueron expuestos del tema 4 así como los ejercicios y ejemplos de las diapositivas
proporcionadas por el docente
3. Objetivo (Competencia)
Específica(s):
• Aplica técnicas y herramientas de iluminación y sombreado para obtener un
enriquecimiento visual en aplicaciones generales.
Genéricas:
• Capacidad de abstracción, análisis y síntesis.
• Capacidad de aplicar los conocimientos en la práctica.
• Conocimientos sobre el área de estudio y la profesión.
• Habilidades para buscar, procesar y analizar información procedente de
fuentes diversas.
• Capacidad crítica y autocrítica.
• Capacidad creativa.
• Habilidad para trabajar en forma autónoma.
Página 1 de 4
• Investigar las técnicas actuales para el relleno, iluminación y sombreado de

objetos gráficos, elaboración de una síntesis sobre cada uno de los temas.
• Utilizando las APIs apropiadas, aplicar a los objetos gráficos desarrollados
en los temas 2 y 3, relleno homogéneo, degradado y con material y textura,
presentando en plenaria los resultados obtenidos.
• Haciendo uso de las APIs apropiadas, aplicar iluminación y sombreado a
los objetos gráficos desarrollados en la actividad anterior, mediante la
creación de luces de diversos tipos puntuales, direccionales en área o
volumen, con distinto color o propiedades, presentando en plenaria los
resultados obtenidos.
4. Fundamento
Relleno: En arte digital o dibujo, el relleno se refiere al proceso de completar o pintar
áreas de una ilustración con un color sólido, textura o patrón. Se puede utilizar una
herramienta de relleno para aplicar color de manera rápida y uniforme en un área
específica del dibujo.
Métodos de relleno de polígonos con color:
• Scan-line
• Inundación
• Linea de barrido
• Relleno mediante un patrón
Color homogéneo: Se refiere a un color uniforme, consistente y sin variaciones visuales

dentro de una superficie o área determinada. Este término se utiliza en diversos
contextos, como el diseño, el arte, la decoración, la fotografía y la descripción de
características físicas, entre otros.
Color degradado: Es la combinación de dos o más colores, de manera que uno de ellos
va perdiendo intensidad a medida que el otro que va ganándolo. Esto como resultado,
te da una transición cromática de colores, que tiene una vista impactante para el
espectador. Se puede decir que no hay saltos de color y una línea que separe a estos,
sino más bien se nota la transición entre ellos.
Material: Etimológicamente quiere decir "relativo a la materia" por lo tanto es una

característica de los objetos.
El material, es un recubrimiento a modo de capa que se le aplica a un objeto
modelado, con el fin de hacerlo más realista y así poder comprender la naturaleza de
dicho objeto.
En los programas de modelado 3D, es posible simular una gran cantidad de
materiales, ya sean naturales o sintéticos.
Página 2 de 4

Textura: Es la apariencia externa y superficial de la estructura de los materiales, objetos
y cosas que nos rodean, es una propiedad que se le da a un material, es decir, es la
forma en que están entrelazadas las fibras de un tejido, lo cual produce una sensación
táctil, o en el caso del modelado 3D una sensación visual.
Iluminación: En el contexto del arte visual, la iluminación se refiere al manejo de la luz

en una composición. Puede implicar resaltar áreas específicas de una imagen para
simular fuentes de luz naturales o artificiales, creando así contrastes entre luces y
sombras para dar profundidad y realismo a la obra.
El modelo más utilizado es el modelo de Phong:

• Modelo de iluminación de Phong (Luz ambiental)
• Modelo de iluminación de Phong (Luz Difusa)
• Modelo de iluminación de Phong (Luz especular)
Sombreado: El sombreado es la técnica utilizada para representar áreas de una

imagen que están en sombra o menos iluminadas. Puede hacerse utilizando diferentes
tonos, líneas, tramas o difuminados para mostrar la forma tridimensional y la
profundidad de los objetos en una composición.
Usos:
• Mejora de la percepción tridimensional
• Destacar áreas específicas
• Claridad y legibilidad
• Representación de Superficies
Sombreado Interpolado:
Sombreado Gouraud: Calcula el color de cada píxel interpolando los colores de los
tres vértices más cercanos al píxel.
Sombreado Phong: El sombreado Phong calcula el color de cada píxel interpolando

los colores de los vértices de la superficie
Página 3 de 4
5. Descripción (Procedimiento)
A) Equipo necesario Material de apoyo
• Diapositivas otorgadas
1. Laptop
2. Processing
B) Desarrollo de la práctica:
De las figuras de ejemplos presentados en la EXPOSICIÓN vamos a realizarlo en

el programa processing:
practica_1_Exposicion:
void setup() {
size(400, 400);}
void draw() {
background(255); // Fondo blanco
fill(150, 200, 100); // Color de relleno (en
este caso, verde claro)
stroke(0); // Color del borde (en este caso,
negro)
// Definir las coordenadas de los vértices
del polígono
int[] x = {50, 150, 250, 150};
int[] y = {150, 50, 150, 250};
// Dibujar y rellenar el polígono
beginShape();
for (int i = 0; i < x.length; i++) {
vertex(x[i], y[i]);
Página 4 de 4
}
endShape(CLOSE);
}
Como vemos se trata de un cuadrado hecho en vértices utilizando arrays de color verde
con un fondo blanco, con un de color de borde negro.
void setup() {
size(400, 200);
background(255); // Fondo blanco
// Color homogéneo
fill(255, 0, 0); // Color rojo
rect(50, 50, 100, 100); // Rectángulo con color
homogéneo
// Color degradado
noFill(); // Sin relleno
stroke(0); // Color de trazo negro
int startX = 200; // Posición x inicial
int endX = startX + 100; // Posición x final
int startY = 50; // Posición y inicial
int endY = startY + 100; // Posición y final
for (int x = startX; x <= endX; x++) { //Inicia un bucle for que recorre las posiciones
horizontales desde startX hasta endX.
float inter = map(x, startX, endX, 0, 1); // Interpolación entre 0 y 1
int c = lerpColor(color(255, 0, 0), color(0, 0, 255), inter); // Color degradado de rojo a azul
stroke(c); // Cambiar color de trazo
line(x, startY, x, endY); // Dibujar línea vertical para crear el degradado
}
}
En este programa podemos observar la ejemplificación del color homogeneo de color rojo
y la transición del color degradado de rojo, pasando por los tonos intermedios hasta llegar
al azul.
Página 5 de 4

PImage textura;
void setup() {
size(400, 400,P3D);
textura =
loadImage("madera.jpg");
textureMode(NORMAL);
}
void draw() {
background(255);
translate(width / 2, height / 2);

rotateY(frameCount * 0.01);
noStroke();
beginShape();
texture(textura);
float lado = 300;
vertex(-lado / 2, -lado / 2, 0, 0, 0);
vertex(lado / 2, -lado / 2, 0, 1, 0);
vertex(lado / 2, lado / 2, 0, 1, 1);
vertex(-lado / 2, lado / 2, 0, 0, 1);
endShape(CLOSE);
}
Como vemos este crea una un cuadro con puros vértices a la cual tiene una textura de
madera, también nos damos cuenta que el cuadro tiene una rotación.
PImage texturaNaranja;
void setup() {
size(400, 400,P2D);
texturaNaranja = loadImage("naranja.jpg");
void setup() {
size(400, 400,P2D);
Página 6 de 4

texturaNaranja =
loadImage("naranja.jpg");
textureMode(NORMAL);
}
void draw() {
background(255);
noStroke();
// Dibuja el círculo con la textura de la
naranja
beginShape();
texture(texturaNaranja);
for (float ang = 0; ang < TWO_PI; ang +=
0.1) {
float x = width / 2 + cos(ang) * 100;
float y = height / 2 + sin(ang) * 100;
float u = map(x, 0, width, 0, 1);
float v = map(y, 0, height, 0, 1);
vertex(x, y, u, v);
}
endShape(CLOSE);
}
Aquí observamos un programa en el que a una esfera se le pueda otorgar una textura
para simular ser una naranja.
PVector direcDeLaLuz;
void setup() {
size(800, 600, P3D);
direcDeLaLuz = new PVector(1, -1, 0); // Dirección de la luz
}
void draw() {
background(255);
translate(width / 2, height / 2, 0);
rotateX(frameCount * 0.01);
lights(); // Habilitar iluminación
drawEsfera();
Página 7 de 4

}
void drawEsfera() {
float radio = 200; //Tamaño del radio de la esfera (ajustala al tamño deseado)
for (float phi = 0; phi < PI; phi += PI / 5){ //cambia el 5 por 50 o 100
beginShape(TRIANGLE_STRIP);
for (float theta=0; theta<TWO_PI+0.1; theta+=PI/20){ //Triangulos en la figura
float x = radio * sin(phi) * cos(theta);
float y = radio * sin(phi) * sin(theta);
float z = radio * cos(phi);
PVector normal = new PVector(x, y, z);//objeto PVector que se crea con las coordenadas
x, y, z
normal.normalize();//Al normalizar la normal, garantizamos que su longitud es 1
float intensidadLuz = max(0, normal.dot(direcDeLaLuz));//oscura
fill(255 * intensidadLuz,0,255 * intensidadLuz);//cambiar a otro color
vertex(x, y, z);//coordenadas de los vértices construyendo objetos 3D
y=radio*sin(phi + PI/10)*sin(theta);// calcular las coordenadas y de los vértices de una
esfera en coordenadas esféricas.
z = radio * cos(phi + PI / 10);
normal.set(x, y, z);
normal.normalize();
intensidadLuz = max(0, normal.dot(direcDeLaLuz));
fill(255 * intensidadLuz,255 * intensidadLuz,0); //cambiarle colores
vertex(x, y, z);
}
endShape();
}
}
Página 8 de 4

Este código utiliza la iluminación para simular sombras y resaltes en la esfera, creando un
efecto tridimensional más realista. Experimentar con los valores y colores te permitirá
obtener diferentes resultados visuales.
float angleX = 0;
float angleY = 0;
void setup() {
size(800, 800, P3D);
}
void draw() {
background(255);
lights();
float dirX = cos(radians(45));

float dirY = sin(radians(45));
float dirZ = cos(radians(45));
directionalLight(255, 255, 255, -dirX, -dirY, -dirZ);

rotateX(angleX);
rotateY(angleY);
fill(150, 200, 250);

sphere(150);
angleX += 0.01;
angleY += 0.01;
}
Este programa crea una esfera con un iluminado a la cual cada que rota este
automáticamente se la iluminación se queda en el mismo lugar.
PVector lightDir;
void setup() {
size(800, 800, P3D);
lightDir = new PVector(1, -1, -1);
lightDir.normalize();
Página 9 de 4

}
void draw() {
background(255);
lights();
directionalLight(255, 255, 255, lightDir.x, lightDir.y, lightDir.z);
fill(150, 200, 250);

noStroke();
float radius = 200;

int detail = 50;
for (float i = 0; i < TWO_PI; i += PI / detail) {

for (float j = 0; j < PI; j += PI / detail) {
float x = radius * sin(j) * cos(i);
float y = radius * sin(j) * sin(i);
float z = radius * cos(j);
float nx = sin(j) * cos(i);

float ny = sin(j) * sin(i);
float nz = cos(j);
float shadedColor = calculateShading(nx, ny, nz);
fill(shadedColor);
pushMatrix();
translate(x, y, z);
sphere(5);
popMatrix();
}
}
}
float calculateShading(float nx, float ny, float nz) {

float dotProduct = nx * lightDir.x + ny * lightDir.y + nz * lightDir.z;
float shadedColor = map(dotProduct, -1, 1, 0, 255);
return shadedColor;
}
Página 10 de
4

Este crea varias esferas cada vez más alejadas a comparación de las que están en el
centro a la cual nos damos cuenta que una cierta parte tiene iluminación y otra no.
Ejercicios de las diapositivas proporcionadas por el docente.
practica_1_Diapositiva:
beginShape();
vertex(20, 20);
vertex(85, 30);
vertex(65, 75);
vertex(30, 55);
endShape(CLOSE);
Este programa crea una figura como un trapecio la cual está basada en vértices y que
una cierta parte de la figura se puede visualizar que esta más atrás de la otra
Desarrollar un programa en Processing que permita dibujar polígonos de n lados.
• Para ello hay que implementar una función polygon con los siguientes parámetros:
✓ Centro (dos enteros),
✓ Radio (entero)
✓ Número de lados del polígono (entero)
Información para su desarrollo:

• Lo primero es implementar la función setup, donde se puede definir el tamaño de
ventana,
p.e. size(500,500), y a continuación invocar a la función polygon
• La función polygon deberá trazar el polígono utilizando:
✓ Las funciones trigonométricas sin() y cos() cuyos argumentos se exigen en radianes
✓ El (0,0) está situado en la esquina superior izquierda (las x positivas hacia la derecha,
las y positivas
hacia abajo)
✓ Constantes predefinidas como PI y TWO_PI
✓ Usar las transformaciones TRASLATE() y ROTATE()
Creamos el código de acuerdo a las características del enunciado:
Página 11 de
4
void setup() { //configuramos nuestra ventana:

size (500, 500); //El tamño de la ventana es de 800 X 600 px
background (255); //El fondo es blanco
}
void draw(){ //Lo que se dibujará en la ventana

translate(width/2,height/2); //centra el objeto en la ventana
rotate(PI/1.5); //angulo de rotacion
polygon(6,200.0);//número de lados y el radio del polígono (puedes cambiar los lados y el
radio)
}
void polygon(int cantLad, float radio){ //función que define las caracterisitcas del polígono
float theta = 0.0; //Valor del ángulo
inicial
float x = 0.0; //origen del eje de las x
float y = 0.0; //origen de las y
beginShape(); //Inicio de la crecio de

la forma
for(int i=0; i<cantLad; i++) { //Este
ciclo dibujara la figura de acuerdo a la
cantidad de lados que se especifique
x=cos(theta)*radio; //Angulo sobre el
eje de las x
y=sin(theta)*radio; //Angulo sobre el
eje de las y
vertex(x,y); //Se crea el vértice
theta += TWO_PI/cantLad; //Se
incrementa una circunferencia
completa entre la cantidad de lados
}
endShape (CLOSE); // Siempre se debe terminar la función forma
}
Este programa crea un polígono de 6 lados en el centro.
Código de la clase principal:
Página 12 de
4

background (255); //El fondo es blanco
fill(100,150,0); //El color monocromático gris oscuro
}

radio)
}
Creamos una nueva pestaña llamada “polygon”
float theta = 0.0; //Valor del ángulo inicial
beginShape(); //Inicio de la crecio de la

forma
for(int i=0; i<cantLad; i++) { //Este ciclo
dibujara la figura de acuerdo a la cantidad
de lados que se especifique
x=cos(theta)*radio; //Angulo sobre el eje
de las x
y=sin(theta)*radio; //Angulo sobre el eje
de las y
theta += TWO_PI/cantLad; //Se
incrementa una circunferencia completa
entre la cantidad de lados
}
}
Este programa creo un polígono de 6 lados con un relleno de color verde permitiéndonos
identificar la funcionabilidad del color homogéneo.
Código de la clase principal:
//Polígono sobre lienzo degradado
Página 13 de
4
colorMode (RGB); //Modelo de color para el fondo
for (int i = 0; i < 800; i++) { //Aplica al ancho de la ventana

float r = 50 + (i*0.5); //
float g = 50 + (i+0.5);
float b = 300 - (i);
stroke(r, g, b); //La linea tomará el valor generado. Para que tome un color degradado se
utiliza el for Line(1, 0, 1, 600);//Aplica al alto de la ventana
line(i, 0, i, 600);//Aplica al alto de la ventana
}
}

radio)
}
Creamos una nueva pestaña llamada “polygon”

float theta = 0.0; //Valor del ángulo inicial
beginShape(); //Inicio de la crecio de la forma
for(int i=0; i<cantLad; i++) { //Este ciclo dibujara la figura de acuerdo a la cantidad de
lados que se especifique
x=cos(theta)*radio; //Angulo sobre el eje de las x
y=sin(theta)*radio; //Angulo sobre el eje de las y
fill(#1B2FDE);
theta += TWO_PI/cantLad; //Se incrementa una circunferencia completa entre la
cantidad de lados
}
}
Página 14 de
4
Este programa crea un sketch donde

podemos visualizar que el fondo tiene un
degradado de tono amarillo hacia el tono
azul, así como un polígono de 6 lados a
la cual tiene un relleno de tono azul.
Para poder realizar este programa utilizaremos la
siguiente imagen:
size (400, 400, P3D); //Se utiliza la libreria 3D

noStroke();//Sin lineas
PImage img = loadImage("world32k.jpg"); //Manda a llamar una in
textureMode (NORMAL); //El modo puede ser NORMAL o IMAGE
beginShape(); //Se genera el poligono de cuadrado
texture(img);//se le inserta la limagen
vertex(40, 80, 0, 0);//Los vértices de
cuadrado
vertex (320, 20, 1, 0);
vertex (380, 360, 1, 1);
vertex(160, 380, 0, 1);
endShape (CLOSE); //Se termina el
modelado de la imagen
Como vemos el programa crea un

trapecio, pero con en un ejemplo
anterior ahora con una textura que en
este caso descargue.
Página 15 de
4

//Se mueve la textura de controlado por el mouse
PImage img;
void setup() {
size (300, 300, P2D);
img = loadImage("world32k.jpg");
textureMode (NORMAL);
}
void draw() {
background(0);
translate(width/2, height/2);
rotate(map (mouseX, 0, width, -PI, PI));
if (mousePressed) {
textureWrap(REPEAT);
} else {
textureWrap(CLAMP);
}
beginShape();
texture(img);
vertex(-100, 100, 0, 0);
vertex (100, -100, 2, 0);
vertex(100, 100, 2, 2);
vertex(-100, 100, 0, 2);
endShape();
}
Como vemos el programa consiste igual que el ejemplo anterior solo que este tiene
una rotacion en 3D siguiendo al cursor del mouse.
size(300,300);
background(0);
smooth();
stroke(255, 60);
for (int i = 0; i < 300; i++) {
float r = random(10);
strokeWeight(r);
float offset = r * 5.0;
line(i-20, 300, i+offset, 0); }
Este programa crea un lienzo donde vemos unas

rayas/barras aleatoriamente dentro del lienzo.
Página 16 de
4

PVector direcDeLaLuz;
void setup() {
size(800, 600, P3D);
direcDeLaLuz = new PVector(1, -1, 0); // Dirección de la luz
}
void draw() {
background(255);
rotateX(frameCount * 0.01);
lights(); // Habilitar iluminación
drawEsfera();
}
void drawEsfera() {
float radio = 200; //Tamaño del radio de la esfera (ajustala al tamño deseado)
for (float phi = 0; phi < PI; phi += PI / 5){ //cambia el 5 por 50 o 100
beginShape(TRIANGLE_STRIP);
for (float theta=0; theta<TWO_PI+0.1; theta+=PI/20){ //Triangulos en la figura
float x = radio * sin(phi) * cos(theta);
float y = radio * sin(phi) * sin(theta);
float z = radio * cos(phi);
PVector normal = new PVector(x, y, z);//objeto PVector que se crea con las
coordenadas x, y, z
normal.normalize();//Al normalizar la normal, garantizamos que su longitud es 1
float intensidadLuz = max(0, normal.dot(direcDeLaLuz));//oscura
fill(255 * intensidadLuz,0,255 * intensidadLuz);//cambiar a otro color
vertex(x, y, z);//coordenadas de los vértices construyendo objetos 3D
y=radio*sin(phi + PI/10)*sin(theta);// calcular las coordenadas y de los vértices de
una
// esfera en coordenadas esféricas.
z = radio * cos(phi + PI / 10);
normal.set(x, y, z);
normal.normalize();
intensidadLuz = max(0, normal.dot(direcDeLaLuz));
fill(255 * intensidadLuz,255 * intensidadLuz,0); //cambiarle colores
vertex(x, y, z);
}
endShape();
}
}
Página 17 de
4
Lo que hace este programa es

que crea una esfera 3D con
iluminación simulada que
responde a la rotación de la
escena. El color de la esfera
cambia en función de la
intensidad de la luz en cada
punto, creando un efecto visual
interesante.
void setup(){
size(800,600,P3D);
}
void draw() {
background(255);
fill(255); // Color del sombreado
noStroke();
translate(width/2,height/2,0);
// Habilitar iluminación
lights();
sphere(200);
}
Este programa crea una esfera en 3D a la cual tiene iluminación que resalta en el
centro de esta y alrededor da un aspecto de sombra.
Página 18 de
4

6. Resultados y conclusiones
Cada uno de estos programas nos permitieron identificar los aspectos claves a
considerar del relleno, iluminación y sombreado para poder utilizarlo en distintos
programas futuros y programas.
practica_1_Exposicion
Página 19 de
4
Página 20 de
4
practica_1_Diapositiva
Página 21 de
4

Página 22 de
4

Página 23 de
4
Página 24 de
4
7. Anexos
8. Referencias
• Processing el lenguaje para gráficos preferido por diseñadores. (2016, May 16).
Programarfacil.com. https://programarfacil.com/podcast/80-processing-lenguaje-para-
graficos/
• Weitzenfeld, A. (s. f.). ILUMINACIÓN Y SOMBREADO. cannes.itam. Recuperado 28
de noviembre de 2023, de
http://www.cannes.itam.mx/Alfredo/Espaniol/Cursos/Grafica/Sombreado.pdf
• Iluminación y Sombreado. (2023). fing.edu.uy
https://www.fing.edu.uy/inco/cursos/compgraf/Clases/2011/14Iluminacion%20y%20So
mbreado.pdf
• Math. (2020). Tema 4 - Relleno, Iluminación y sombreado [YouTube Video]. In
YouTube. https://www.youtube.com/watch?v=R3h-whRrGys
• Gouraud, Henri (1971). Computer Display of Curved Surfaces, Doctoral Thesis (Thesis).
University of Utah.
• B. T. Phong, Illumination for computer generated pictures, Communications of ACM 18
(1975), no. 6, 311–317.
Fecha de realización: 28 de noviembre del 2023
Formuló Realizó
Martin Osorio Pascual

María Luisa Acosta San Juan
Docente Nombre del alumno y firma
Núm. Control: 21350279
Página 25 de
4
Instructivo de llenado del Formato para prácticas de Laboratorio

Carrera: Escribir el nombre de la carrera
Plan de estudios: Es la clave oficial del plan de estudios
Clave de la materia: Es la clave interna de la materia formado por cuatro dígitos
Nombre de la materia: Nombre de la materia como aparece en la retícula
No. Práctica: Número consecutivo de la práctica
Laboratorio de: Nombre del laboratorio a utilizar (“Tratamiento de la información”, “Redes y
telecomunicaciones” y “Software de base y Arquitectura de computadoras”)
Nombre de la práctica: Nombre que describe a la práctica
Duración (Hora): Duración de la práctica en horas
1.- Enunciado: Descripción breve del problema a resolver
2.- Introducción: Escribir una descripción breve de todo el tema que abarca la práctica
3.- Objetivo (Competencia): Objetivo o competencia a desarrollar
4.- Fundamento: Fundamento teórico de la práctica o tema (Llenado por el alumno)
5.- Descripción (Procedimiento): Escribir el equipo necesario y materia de apoyo (A). Describir los
pasos a seguir para el desarrollo de la práctica (B).
6.- Resultados y conclusiones: Escribir los resultados obtenidos y las conclusiones. (Llenado por el
alumno)
7.-Anexos: Incluir aquí imágenes, tablas y demás información que apoye la información de la práctica.
(Llenado por el alumno)
8.-Referencias: Incluir los datos de las fuentes consultadas. (Llenado por el alumno)
Fecha: Fecha en que se realizó la práctica (Llenado por el alumno)
Formuló: Nombre y firma del maestro
Realizó: Nombre y firma del alumno.
Página 26 de
4

Practica 4 - 2 Graficación

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Practica 4 - 2 Graficación

Cargado por

Copyright:

Formatos disponibles

S.E.P.

TECNOLÓGICO NACIONAL DE MÉXICO

Martes, 28 de Noviembre, 2023

Formato para prácticas de Laboratorio

Formato para prácticas de Laboratorio

• Investigar las técnicas actuales para el relleno, iluminación y sombreado de

Color homogéneo: Se refiere a un color uniforme, consistente y sin variaciones visuales

Material: Etimológicamente quiere decir "relativo a la materia" por lo tanto es una

Formato para prácticas de Laboratorio

Iluminación: En el contexto del arte visual, la iluminación se refiere al manejo de la luz

El modelo más utilizado es el modelo de Phong:

Sombreado: El sombreado es la técnica utilizada para representar áreas de una

Sombreado Phong: El sombreado Phong calcula el color de cada píxel interpolando

Formato para prácticas de Laboratorio

De las figuras de ejemplos presentados en la EXPOSICIÓN vamos a realizarlo en

Formato para prácticas de Laboratorio

Formato para prácticas de Laboratorio

translate(width / 2, height / 2);

Formato para prácticas de Laboratorio

Formato para prácticas de Laboratorio

Formato para prácticas de Laboratorio

float dirX = cos(radians(45));

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

fill(150, 200, 250);

Formato para prácticas de Laboratorio

directionalLight(255, 255, 255, lightDir.x, lightDir.y, lightDir.z);

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

fill(150, 200, 250);

float radius = 200;

for (float i = 0; i < TWO_PI; i += PI / detail) {

float nx = sin(j) * cos(i);

float shadedColor = calculateShading(nx, ny, nz);

float calculateShading(float nx, float ny, float nz) {

Formato para prácticas de Laboratorio

Ejercicios de las diapositivas proporcionadas por el docente.

Información para su desarrollo:

Creamos el código de acuerdo a las características del enunciado:

Formato para prácticas de Laboratorio

void setup() { //configuramos nuestra ventana:

void draw(){ //Lo que se dibujará en la ventana

beginShape(); //Inicio de la crecio de

Este programa crea un polígono de 6 lados en el centro.

Formato para prácticas de Laboratorio

void draw(){ //Lo que se dibujará en la ventana

beginShape(); //Inicio de la crecio de la

Formato para prácticas de Laboratorio

colorMode (RGB); //Modelo de color para el fondo

for (int i = 0; i < 800; i++) { //Aplica al ancho de la ventana

void draw(){ //Lo que se dibujará en la ventana

Creamos una nueva pestaña llamada “polygon”

beginShape(); //Inicio de la crecio de la forma

Formato para prácticas de Laboratorio

Este programa crea un sketch donde

size (400, 400, P3D); //Se utiliza la libreria 3D

Como vemos el programa crea un

Formato para prácticas de Laboratorio

Este programa crea un lienzo donde vemos unas

Formato para prácticas de Laboratorio

Formato para prácticas de Laboratorio

Lo que hace este programa es

Formato para prácticas de Laboratorio

Formato para prácticas de Laboratorio