INSTITUTO TECNOLÓGICO SUPERIOR DE

PÁNUCO
Carrera

Ingeniería En Sistemas Computacionales

Materia

Graficacion

Unidad

Unidad 2 (antología)

Docente

Gil Santana Esparza

Alumnos

Luis Enrique Ortiz Domínguez

Fecha

27/01/2021
INTRODUCCION

En la siguiente investigación se hablará sobre los diferentes modelos de colores

con los cuales se intercambiarán, y con estos modelos se podrán utilizar para
hacer la Graficación con los diferentes colores. A estos modelos se les conoce
como paletas de colores. De los cuales se hablará en la presente investigación, ya
dando a conocer como se representan y en qué forma se aplica en la Graficación
en las diferentes áreas donde su puedan hacer gráficos mediante computadoras.
Paletas de colores

Para representar el color de un objeto gráfico, ya sea un pixel o un objeto

vectorizado, es necesario utilizar una cantidad finita de memoria para ello. Y en los
tiempos iniciales de la computación gráfica, la memoria era un recurso sumamente
costoso y demasiado valioso como para desperdiciarlo. Por ello surgió la
necesidad de utilizar poca memoria para representar los colores a utilizar por una
aplicación gráfica.[ CITATION EDU10 \l 2058 ]

Paletas estándares actuales

Con el advenimiento de dispositivos de graficación cada vez más avanzados (que

pueden desplegar más colores y tienen mayor resolución), con el abaratamiento
exponencial de la memoria primaria para computadoras personales y con tarjetas
gráficas cada vez más sofisticadas, el uso de paletas de colores ha ido poco a
poco cayendo en desuso entre los programadores gráficos. [ CITATION EDU10 \l 2058 ]

RGB

[Red, Green, Blue]

Un color en este formato se suele especificar en la forma de un conjunto de tres

bytes continuos (24 bits), donde los primeros ocho bits, de derecha a izquierda,
representan la intensidad de luz azul. Los segundos ocho bits, de derecha a
izquierda, la intensidad de luz verde, y los últimos ocho, de derecha a izquierda, la
intensidad de luz roja. En la figura 2.1 podemos ver el tipo diagrama de colores en
el modelo RGB.[ CITATION EDU10 \l 2058 ]

Este modelo representa un color mediante la mezcla por adición de los tres
colores primarios de la luz, rojo, verde y azul. De tal manera que, en una superficie
negra, su suma a nula intensidad, resulta en negro; y su suma a máxima
intensidad, resulta en blanco.[ CITATION EDU10 \l 2058 ]
RGBA

[Red, Green, Blue, Alpha]

Este otro modo de especificación de color, es similar al anterior, excepto que usa
32 bits. Los ocho que se han agregado (normalmente al final), representan la
medida de opacidad/transparencia (en el caso de SDL, 00H es transparencia total
y FFH es opacidad total, pero en otras bibliotecas gráficas, es al revés). E igual
que en el caso del RGB, su representación binaria varía dependiendo del
hardware.[ CITATION EDU10 \l 2058 ]

CMY(K)

[Cyan, Magenta, Yellow, Black (o Key)]

Este modelo representa un color mediante la mezcla sustractiva de los colores

cyan, magente y amarillo. De tal manera que, impresos sobre un papel blanco, su
mezcla a mínima intensidad no absorbe nada y la luz se refleja completamente
blanca, pero si se mezclan a máxima intensidad, absorben la luz completamente,
por lo que no vemos luz reflejada (eso es el color negro). [ CITATION EDU10 \l 2058 ]

HSV

El modelo HSV también llamado HSB define un modelo de color en términos de

sus componentes.[ CITATION gra20 \l 2058 ]

Historia

El modelo HSV fue creado en 1978 por Alvy Ray Smith. Se trata de una
transformación no lineal del espacio de color RGB, y se puede usar en
progresiones de color. Nótese que HSV es lo mismo que HSB pero no que HSL o
HSI[ CITATION gra20 \l 2058 ]

HSL

El modelo HSL (del inglés Hue, Saturation, Lightness – Matiz, Saturación,

Luminosidad), también llamado HSI (del inglés Hue, Saturation, Intensity – Matiz,
Saturación, Intensidad), define un modelo de color en términos de sus
componentes constituyentes. El modelo HSL se representa gráficamente como un
cono doble o un doble hexágono. Los dos vértices en el modelo HSL se
corresponden con el blanco y el negro, el ángulo se corresponde con el matiz, la
distancia al eje con la saturación y la distancia al eje blanco-negro se corresponde
a la luminancia. Como los modelos HSI y el HSV, es una deformación no lineal del
espacio de color RGB. Nótese que HSL es lo mismo que HSI pero no que HSV o
HSB.[ CITATION gra20 \l 2058 ]

“En esta investigación gracias a este tema de lo que son los modelos de colores,
la graficacion es más entendible para poder graficar con los diferentes colores que
se pueden hacer y combinar.”
Conclusión

En conclusión, con esta unidad los modelos de colores los veremos en todo para
poder graficar, en esta materia o en otra con la cual podríamos graficar también
médiate códigos de programación.

Bibliografía
graficacion. (27 de septiembre de 2020). blogspot.com. Obtenido de blogspot.com:
https://graficaciontmmjc.blogspot.com/

NAVAS, E. (2010). una humilde introduccion a la graficacion por computadora. el salvador :

Universidad Centroamericana José Simeón Cañas,.
Unidad 2
Temario
Ejercicios
INSTITUTO TECNOLÓGICO SUPERIOR DE PÁNUCO

Carrera

Ingeniería En Sistemas Computacionales

Materia

Graficacion

Unidad

Unidad 2

Docente

Gil santana esparza

Alumnos

Luis Enrique Ortiz Domínguez

Fecha
27/01/2021
Introducción
A lo largo de la unidad este tema es de gran importancia, ya que con el mejoramos
el aprendizaje en nuestro conocimiento en programación en lo que va de la unidad
aprenderemos en cómo aplicar gráficamente las transformaciones geométricas,
las cuales con ellas graficaremos lo que es la traslación y escalación de imágenes
o figuras. Aprender de este tema también ayuda nuestro conocimiento o practica
para volver a realizar soluciones matemáticas.

En la presente documentación mostrare como realice esta práctica para poder ver
como se ve escalada y traslado de la imagen o figura.
Objetivo.
Programar un programa para poder solucionar las trasformaciones geométricas
mediante coordenadas geométricas.
Calendario de actividades.

Planeado

Actividad Día Horario

Buscar en diversas Jueves 21 de enero de 2021. 10 de la mañana hasta las 2 de
fuentes cómo la tarde.
funcionaba. 5 de la tarde hasta las 8 de la
Jueves 21 de enero de 2021. noche.
Diseño Viernes 22 de enero de 2021. 6 de la tarde hasta las 8 de la
noche.
Código Viernes 22 de enero de 2021. 8 de la mañana hasta la 1 de la
tarde.
Ejecuciones. Viernes 22de enero de 2021. 2 de la tarde a 4 de la tarde.
Solución a posibles Viernes 22 de enero de 2021. 6 de la tarde a 9 de la noche.
errores.

Realizado.
Actividad Día Horario
Buscar en Jueves 21 de enero de 2021. 10 de la mañana hasta la
diversas fuentes 1 de la tarde.
cómo funcionaba.
Viernes 22 de enero de 2021. 10 de la mañana a 12 de
la tarde.
Diseño Viernes 22 de enero 6 de la tarde hasta las 8
de la noche.
Código Sábado 23 de enero de 2021. 8 de la mañana hasta las
12 de la tarde.
Sábado 23 de enero de 2021. 7 de la tarde hasta las 9
de la noche.
Jueves 23 de enero de 2021. 9 de la mañana a 11 de la
mañana.
Ejecuciones. Jueves 23 de enero de 2021. 1 de la tarde a 2 de la
tarde.
Solución a Jueves 23 de enero de 2021. 6 de la tarde a 9 de la
posibles errores. noche.
 Viernes 23 de enero de 2021. 9 de la mañana a 12 de la
tarde

Recursos Hardware:

Pc de escritorio marca BenQ

Ram de 4gb

Disco duro de 500gb

Recursos Software:

Software de aplicación NetBeans

Plataforma digital: YouTube

Recursos digitales: Pdf, revistas digitales, sitios web.

Sistema operativo Windows 10 home

Desarrollo.
Este es el programa con el cual mostraré las trasformaciones geométricas.

Esta es la transformación de escalamiento, hace que la imagen se haga más grande esa es la forma
de escalarla.
Codificación

Escalacion

package transformaciones.geometricas;

import java.applet.Applet;

import java.awt.Color;

import java.awt.Graphics;

import java.awt.Scrollbar;

import java.awt.event.AdjustmentEvent;

import java.awt.event.AdjustmentListener;

public class Escalacion extends Applet implements AdjustmentListener{

private static final long serialVersionUID = 1L;

private Scrollbar Zoom;

private int sc=1;

int auxx[]={0,0,0,0,0,0,0,0,0,0,0,0};

int auxy[]={0,0,0,0,0,0,0,0,0,0,0,0};

/*primer parte*/

int polx[]={25,85,85,155,155,205,205,25};

int poly[]={25,25,115,115,65,65,155,155};

/*central*/

int pol1x[]={90,255,255,265,265,310,310,210,210,150,150,90};
int pol1y[]={25,25,115,115,65,65,155,155,60,60,110,110};

public void init()

this.resize(640,480);

Zoom=new Scrollbar(Scrollbar.HORIZONTAL,0,1,0,100);

add(Zoom);

Zoom.addAdjustmentListener(this);

Zoom.setValue(1);

public void paint(Graphics g)

g.setColor(new Color(50,50,100));

PolyScale(polx,poly,8,0,g);

PolyScale(pol1x,pol1y,12,0,g);

public void PolyScale(int polyx[],int polyy[],int p,int L,Graphics g)

int c=0;

while(c<=(p-1))

auxx[c]=polyx[c]*sc;
auxy[c]=polyy[c]*sc;

c++;

switch(L)

case 0:

g.drawPolygon(auxx,auxy,p);

break;

case 1:

g.fillPolygon(auxx,auxy,p);

break;

case 2:

g.drawPolyline(auxx,auxy,p);

break;

public void adjustmentValueChanged(AdjustmentEvent arg0) {

sc=Zoom.getValue();

repaint();

}
Codificación

Traslación

package traslacion;

import java.awt.*;

import java.awt.event.*;

import java.applet.Applet;

public class Traslacion extends Applet implements AdjustmentListener{

private static final long serialVersionUID = 1L;

private Scrollbar Hor;

private Scrollbar Ver;

private int H=0;

private int V=0;

int auxx[]={0,0,0,0,0,0,0,0,0,0,0,0};

int auxy[]={0,0,0,0,0,0,0,0,0,0,0,0};

int polx[]={25,85,85,155,155,205,205,25};

int poly[]={25,25,115,115,65,65,155,155};

int pol1x[]={90,255,255,265,265,310,310,210,210,150,150,90};

int pol1y[]={25,25,115,115,65,65,155,155,60,60,110,110};
public void init()

this.resize(640,480);

Hor=new Scrollbar(Scrollbar.HORIZONTAL,0,1,0,100);

add(Hor);

Hor.addAdjustmentListener(this);

Ver=new Scrollbar(Scrollbar.VERTICAL,0,1,0,100);

add(Ver);

Ver.addAdjustmentListener(this);

public void paint(Graphics g)

g.setColor(new Color(50,50,100));

this.PolMove(polx,poly,8);

g.drawPolygon(auxx,auxy,8);

this.PolMove(pol1x,pol1y,12);

g.drawPolygon(auxx,auxy,12);

g.drawPolygon(auxx,auxy,4);

public void PolMove(int polyx[],int polyy[],int p)

{
int c=0;

while(c<=(p-1))

auxx[c]=polyx[c]+H;

auxy[c]=polyy[c]+V;

c++;

public void adjustmentValueChanged(AdjustmentEvent arg0) {

H=Hor.getValue()*10;

V=Ver.getValue()*10;

repaint();

}
Conclusión

En conclusión me pude dar cuenta y aprender como graficar las operaciones

matriciales de escalacion y traslación ya que estas nos ayudan a ver el origen de
una manera más amplia y así darnos cuenta de cómo es que el origen de vería
desde otro punto de vista todo esto aplicado en 2D. En esta unidad fue de gran
ayuda para poder mejorar nuestros problemas en computación.
INSTITUTO TECNOLÓGICO SUPERIOR DE PÁNUCO

Carrera

Ingeniería En Sistemas Computacionales

Materia

Graficacion

Unidad

Unidad 2

Docente

Gil santana esparza

Alumnos

Luis Enrique Ortiz Domínguez

Fecha
27/01/2021
Introducción

En el presente documento se abordara el tema de cómo es que se desarrollar un fractal

como sabemos que un fractal es un objeto geométrico en el que se repite el mismo patrón
a diferentes escalas y con diferente orientación. Es decir, por mucho que nos acerquemos
o alejemos del objeto, observaremos siempre la misma estructura. De hecho, somos
incapaces de afirmar a qué distancia nos encontramos del objeto, ya que siempre lo
veremos de la misma forma. A continuación veremos cómo se desarrollara un fractal
usando el lenguaje de desarrollo en la plataforma de netbeans y cuáles fueron los
resultados que tendremos al final del desarrollo de un fractal.
Objetivo.
Programar una práctica para poder solucionar un fractal graficado en una
plataforma de netbeans, en este caso será un fractal de cuadros dentro de otro
cuadro y así sucesivamente.

Calendario de actividades.

Planeado

Actividad Día Horario

Buscar en diversas Viernes 22 de enero de 2021. 10 de la mañana hasta las 2 de
fuentes cómo la tarde.
funcionaba. 5 de la tarde hasta las 8 de la
Viernes 22 de enero de 2021. noche.
Diseño Sábado 23 de enero de 2021. 6 de la tarde hasta las 8 de la
noche.
Código Sábado 23 de enero de 2021. 8 de la noche hasta la 10 de la
noche .
Ejecuciones. Domingo 24 de enero de 2021. 2 de la tarde a 4 de la tarde.
Solución a posibles Domingo 24 de enero de 2021. 6 de la tarde a 9 de la noche.
errores.

Realizado.
Actividad Día Horario
Buscar en Viernes 22 de enero de 2021. 10 de la mañana hasta la
diversas fuentes 1 de la tarde.
cómo funcionaba.
Viernes 22 de enero de 2021. 10 de la mañana a 12 de
la tarde.
Diseño Viernes 22 de enero 2021 6 de la tarde hasta las 8
de la noche.
Código Domingo 24 de enero de 8 de la mañana hasta las
2021. 12 de la tarde.
7 de la tarde hasta las 9
 Sábado 23 de enero de 2021. de la noche.
9 de la mañana a 11 de la
Jueves 23 de enero de 2021. mañana.
Ejecuciones. Domingo 24 de enero de 1 de la tarde a 2 de la
2021. tarde.
Solución a Domingo 24 de enero de 6 de la tarde a 9 de la
posibles errores. 2021. noche.
9 de la mañana a 12 de la
Domingo 24 de enero de tarde
2021.

Recursos Hardware:

Pc de escritorio marca BenQ

Ram de 4gb

Disco duro de 500gb

Recursos Software:

Software de aplicación NetBeans

Plataforma digital: YouTube

Recursos digitales: Pdf, revistas digitales, sitios web.

Sistema operativo Windows 10 home

Redacción/Desarrollo

Análisis

Se tratara de desarrollar un programa que sea capaz de graficar trazos y/o figuras
figuras geométricas dándole uso a la graficacion por computadora y manejando la
recursividad.

 Creación de un fractal en forma de cuadros

Diseño y ejecución de pantalla.

Codificación
package practicafractal;

import javax.swing.JFrame;
import java.io.*;
import java.lang.*;
import java.awt.*;

public class practicafractal extends JFrame{

practicafractal(){
super("Cuadros");
setDefaultCloseOperation(EXIT_ON_CLOSE);
setBackground(Color.black);
setSize(200,200);
setVisible(true);
}

public void drawFractal(int cx, int cy,int y, Graphics g){

g.setColor(Color.white);
g.drawRect(cx,cy,y,y);

if(y>2)
{
drawFractal(cx+3,cy+3,(y/2)-6,g);
drawFractal((cx+y/2)+3,cy+3,(y/2)-6,g);
drawFractal(cx+3,cy+(y/2)+3,(y/2)-6,g);
drawFractal((cx+y/2)+3,cy+(y/2)+3,(y/2)-7,g);
}

public void paint(Graphics g){

drawFractal(60,100,200,g);
}

public static void main(String[] args){

new practicafractal();
}
}

Prueba
Conclusión
En conclusión lo que se hizo para poder realizar este cuadro en fractal, se
determinó cada coordenada para poder estar exacto cada cuadro y el tamaño. En
esta unidad queda en claro cómo se trabaja mediante coordenadas y la
gráficacion mediante computadora. La graficacion va a hacer parte de esta materia
ya que con ella vamos a poder darle punto y corrección mediante las coordenadas
a diferentes gráficos o imágenes que vayamos a realizar mas adelante.