GraficacioDAEG

La graficacion inicio como por 1950 donde se mostraban las primeras imágenes gráficas en un osciloscopio desde ahí fue evolucionando dando como resultado una herramienta que todos conocemos directa o indirectamente ya sea por juegos o películas que están hechas con software de animación y podemos ver que cada vez es mas realista o juegos que incluso deben tener una tarjeta gráfica para poder tener ese tipo de gráficos ahora no solo es usado para eso sino que podemos ver como lo usan para poder hacer simulaciones de eventos importantes que pasaron o que podrían pasar como lo serian fenómenos naturales o accidentes de avión pero lo que es mas importante es que ahora muchas personas pueden tener acceso a esta tecnología y pueden aprender para hacer sus propios proyectos cada vez mas personas hacen cosas mas realistas con esta tecnológica como seria el movimiento del agua o superficies reflejantes en tiempo real, y ya que se emplea en muchas cosas que usamos diariamente como los videojuego...

Para esta practica creamos un planeta tierra donde se vieran las estrellas, las nubes y que el planeta estuviera girando con lo que se necesitara tener apache instalado y colocar la carpeta del proyecto dentro del servidor local, hecho eso continuaremos haciendo el html, la carpeta de imágenes y librerías para poder seguir con el script donde estará la función que dentro de ella irán el render, dos tipos de luz que sera una luz direccional y otra que sea luz natural luego de eso seguiremos con la creación de la esfera que sera le planeta tierra y seguiremos con la creación de el material de las nubes. Al terminar con eso seguiremos con la cámara y la posición que esta debe tomar, el fondo seguirá después de eso que sera una textura de estrellas con eso hecho seguiremos con el renderizado de el fondo para poder seguir con crear con el material de la tierra que sera puesta dentro de una función donde también llevara configuraciones para que la luz creada también sea reflejada en l...

La practica 8 esta enfocada a las texturas con lo que empezaremos con lo básico de crear nuestro código html básico, la carpeta de las librerías y ahora también crear una carpeta que contendrá las imágenes que usaremos como las texturas, ahora colocamos el escenario y la cámara con la configuración para poder movernos por el escenario una vez hecho eso colocaremos el render con diferentes configuraciones aquí también pondremos controles ahora con eso hecho seguiremos con las texturas que están en la carpeta de imágenes crearemos los objetos y como parámetro le pasaremos la ubicación de las imágenes. Ahora crearemos el plano donde irán las texturas en las configuraciones del plano agregamos para que la textura envuelva el plano hecho eso le damos configuraciones para que el plano rote y comenzamos con la creación de un cubo y una figura irregular, la figura irregular también tendrá textura por lo que al hacer el material de la figura también agregaremos la textura de dicha figura...

En esta practica lo que se quería conseguir era ver como la luz y la sombra interactúan sobre los objetos en este caso se uso un cubo para que desde un punto le diera luz y pudiera tener una sombra, como siempre se inicia con el html y las diferentes librerías, ahora continuaremos con el la función del script donde colocaremos el escenario y la cámara pero ahora también vamos a colocar un plano donde ira el cubo a ese plano también se le hará girar al terminar con eso crearemos el cubo que también lo agregaremos al escenario y arriba del plano para que cuando proyecte una sombra podamos apreciarla. Después posicionaremos la cámara para que apunte al centro del plano donde estará el cubo terminando con eso agregaremos una fuente de luz para poder crear las sombras que el cubo debe de generar, agregaremos esa fuente de luz al escenario una vez terminado con eso agregaremos controles con los cuales podremos manipular la rotación, la transparencia del cubo y para poder cambiar el co...

Para esta practica lo que queremos hacer fue colocar diferentes figuras 3D en el plano como seria un cubo, un cilindro, una esfera, un dodecaedro, una dona y para conseguir eso lo que debemos hacer es crear nuestro archivo html y desde ahí referencia a los distintas librerías que vamos a utilizar luego de eso seguiremos con el script donde colocaremos nuestra función para crear nuestras figuras ahí lo primero que haremos sera declarar variables como la del escenario, la cámara entre otras después seguirá con la creación del escenario y luego la cámara. Una vez terminado con eso seguiremos con la creación de las figuras la primera sera una esfera luego seguiremos con una figura que no es 3D pero se hace con vectores y un for, luego seguiremos con el cubo, también colocaremos controles para que la cámara se mueva alrededor de las figuras así también nosotros modificar la velocidad de la rotación, para acabar colocaremos las figuras que nos faltan como el cilindro, la dona y el dod...

En esta practica lo que haremos sera un cubo que rote y una figura con solo lineas así que iniciamos con lo el html donde se referencia a las librerías continuamos con el script donde hacemos la función que contendrá las variables que utilizaremos colocaremos el escenario luego la cámara pero ahora agregaremos una configuración nueva para que cada que minimicemos o maximicemos no cambie lo que tendremos en nuestra ventana, agregaremos también controles para poder mover la cámara y ver nuestro proyecto desde diferentes vistas una vez terminado eso agregaremos nuestro render y seguiremos con nuestra figura y cubo. Para la figura crearemos e inicializaremos una variable que sea un vector que contenga 7 constantes que nosotros queramos para formar la figura una vez hecho eso usaremos la longitud de la variable previamente creada para usarla en un for que usara las variables x, y, z para darle los valores del vector y esas tres variables se las pasaremos a la figura y así solo la ag...

en esta practica lo que haremos sera una curva de bezier con lo que empezaremos haciendo el archivo para el html donde ira solo lo básico y se referenciara a las librerías, después crearemos una carpeta llamada js donde irán las librerías y el script, empezaremos añadiendo una función en el script que contendrá el código para hacer la curva de bezier, comenzaremos declarando variables que seria la de la cámara, el render, el escenario, la curva, la geometría y entre otras que se declararan mas adelante ahora comenzaremos con el escenario inicializandolo después continuaremos con la cámara para inicializarla también y agregar las características que queramos que tenga. Ahora continuaremos con el render que contendrá las configuraciones que nosotros queramos como el tamaño del render o el color que lleva entre otros, una vez terminado con eso seguiremos con la curva donde la inicializamos y le pasaremos como parámetros objetos de tipo vector que estos a su vez contendrán solo dos pa...

En esta practica lo que haremos sera una curva de bezier con lo que empezaremos haciendo el archivo para el html donde ira solo lo básico y se referenciara a las librerías, después crearemos una carpeta llamada js donde irán las librerías y el script, empezaremos añadiendo una función en el script que contendrá el código para hacer la curva de bezier, comenzaremos declarando variables que seria la de la cámara, el render, el escenario, la curva, la geometría y entre otras que se declararan mas adelante ahora comenzaremos con el escenario inicializandolo después continuaremos con la cámara para inicializarla también y agregar las características que queramos que tenga. Ahora continuaremos con el render que contendrá las configuraciones que nosotros queramos como el tamaño del render o el color que lleva entre otros, una vez terminado con eso seguiremos con la curva donde la inicializamos y le pasaremos como parámetros objetos de tipo vector que estos a su vez contendrán solo dos...

En esta practica también colocamos nuestro html básico donde referenciamos la carpeta que contendrá las librerías, en esta practica lo que queremos es generar 1000 puntos de forma aleatoria por lo que empezaremos creando la función para el script he inicializaremos nuestras variables que son las de escenario, cámara, render, punto, geometry, material con eso iniciamos colocando nuestro escenario, con eso terminado colocamos la cámara donde nosotros queramos junto con otras configuraciones como seria la perspectiva una vez hecho eso seguiremos con la figura. Iniciamos la variable geometry que sera un objeto que viene desde la librería three después crearemos tres variables mas que serán x, y, z para darle posición, entonces usaremos un for que se repita las mismas veces que queramos que el punto aparezca, dentro del for inicializamos las tres variables previamente creadas donde se les asignara valores al azar también ahí le pasaremos los parámetros a geometry que serán los mism...

en esta practica el resultado que buscamos es un punto y para esto tendremos que hacer algo parecido que en la practica anterior pero en esta usaremos mas librerías aparte de three.js que nos ayudaran en esto, así que iniciamos con el html básico solo que en esta ocasión el script no ira dentro del html como en la practica anterior sino que haremos una carpeta para guardar los archivos js y ahí pondremos el script junto con jquery y three que usaremos para la practica, dentro del html haremos referencia a las librerías junto con su ubicación después de hacerlo nos pasaremos al script. Dentro del script iniciaremos con una función que contendrá todo el código de la practica iniciaremos similar que en la otra practica declarando las variables para el escenario, la cámara, el render, la figura a utilizar después de hacerlo seguiremos en la creación de un objeto escena enseguida de eso seguiremos con la configuración de la cámara, entonces al acabar con la cámara seguirá el render c...

usando la librería three.js la utilizamos para crear una linea en esta primer practica, primero que nada iniciamos haciendo el html básico para una pagina web dentro de ella colocamos variables y métodos para la creación de esa linean, necesitamos variables para la cámara, el escenario, el material y otra mas para guardar el tipo de figura que vamos a crear, después de haber declarado las variables las vamos a inicializar y la primera sera la del escenario entonces seguirá la cámara que tendrá el tipo de perspectiva que queramos darle y también la posición que queramos darle. Al terminar de colocar la cámara y sus métodos entonces colocaremos el render para crear la linea una vez colocado haremos un objeto de three.geometry para crear la linea este objeto lo repetiremos tres veces y cada uno tendrá 3 parámetros que serán x,y,z para poder darle una ubicación con esos tres parámetros al terminar de darle la ubicación iniciaremos con el material de la linea como el color que queremo...