1 Portada






Instituto tecnológico superior de jerez

Ingeniería en Sistemas Computacionales


Alumno: José Félix Alvarado Barrios

No. De control: 16070124

Semestre: 5

Docente: ISC Ricardo Saldivar Quezada

Materia: Graficación

Actividad: Blog

Jerez de García Salinas
10 de noviembre 2018

1.1 Introducción

Graficación
La graficación es el arte o la ciencia de producir imágenes gráficas con la ayuda de la computadora.

La gráfica por computadora es la creación, almacenamiento, manipulación y despliegue de imágenes con la asistencia de una computadora.

La graficación por computadora es una de las áreas más importantes de las ciencias de la computación y su principal objetivo es establecer los principios, técnicas y algoritmos para la generación y manipulación de imágenes mediante una computadora.

Las imágenes pueden ser de distinta complejidad, en dos dimensiones hasta modelos tridimensionales donde se requiere producir imágenes de aspecto real.












Aplicaciones

Diseño industrial. Es un tema del diseño que busca crear o modificar objetos o ideas para hacerlos útiles, estéticos, prácticos o atractivos visualmente, con la intención de crear necesidades del ser humano, adaptando los objetos e ideas no solo en su forma sino también las funciones de este.

Diseño ambiental. El diseñador de ambientes proyecta y da forma al habitad humano, diseñando lugares para la vida doméstica, pública o de trabajo, proyecta en ellos espacios ambientales en espacios habituales.

Diseño arquitectónico. Se define como diseño arquitectónico a la disciplina que tiene por objeto generar propuestas que tiene por objeto generar propuestas e ideas para la creación y realización de espacios físicos enmarcado dentro de la arquitectura.

 diseño urbano. El diseño urbano está orientado a interpretar la forma y el espacio público con criterios físico-estético-funcionales, buscando satisfacer las necesidades de las comunidades o sociedades urbanas, dentro de una consideración del beneficio  colectivo en un área urbana existente o futura, hasta llegar a la conclusión de una estructura urbana a seguir.

Diseño de interiores. El diseño interior es la disciplina proyectual involucrada en el proceso de formar la experiencia del espacio interior, con la manipulación del volumen espacial así como el tratamiento superficial. No debe ser confundido con la decoración interior, el diseño interior indaga en aspectos de la psicología ambiental, la arquitectura, y del diseño de producto, además de la decoración tradicional

Diseño y fotografía. Maximiza tu creatividad, consigue toda la magia en tus imágenes y contenidos gráficos un sofisticado conjunto de herramientas para la creación y edición de ilustraciones. Transforma todo aquella que puedas imaginas y preséntalo de maneras impactantes.

Audio y video. Aplicaciones para la edición de video con opciones inteligentes y automatizadas que te permiten mejorar tus películas con efectos de calidad profesional, y compartir en casi cualquier pantalla.

Diseño web. Es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación de diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y video.

Diseño de videojuegos. El desarrollo de videojuegos es el proceso de creación de un videojuego, desde el concepto inicial hasta el videojuego en su versión final. Es una actividad multidisciplinaria, que involucra profesionales de la programación, el diseño gráfico, la animación, el sonido, la música, la actuación, etcétera.

Diseño de películas. Es la técnica que consiste en crear imágenes en movimiento mediante el uso de ordenadores o computadoras. Cada vez más los gráficos creados son en 3d, aunque los gráficos en 2d todavía se siguen usando ampliamente para conexiones lentas y aplicaciones en tiempo real que necesitan renderizar rápido. Algunas veces el objetivo de la animación es la computación en sí misma, otras pueden ser otro medio, como una película. Los diseños se elaboran con la ayuda de programas de diseño, modelado y por último renderizado.



1.2.1 Practica 1


En esta práctica generamos el código en un archivo html, el cual comenzamos por definir el idioma en el que estará, además de especificar qué tipo de caracteres aceptar. Una vez que se configuro eso se asignó el título, asi como la configuración del canvas. Ya teniendo esto configurado pasamos a especificar donde es que se encuentran nuestras librerías. Una vez concluido esto pasamos a especificar que utilizaremos código el lenguje de programación de java script dentro del mismo código html.


El código que generamos de java script fue para realizar la programación dentro de lo cual lo que generamos fue: La configuración de nuestra escena, cámara y render, por lo cual utilizamos métodos predefinidos dentro de la librería de THREE.JS. Para después pasar a lo que sería la creación de un semi triangulo, para lo cual también se mandó llamar un método ya predefinido para la creación de los vértices, y su configuración de color, despues de eso lo que proseguimos a hacer es pasar como parámetros los vectores y su material a una variable que guarde la figura para después añadirla a la escena y realizar el render.



1.2.2 Practica 2


En esta práctica el objetivo es de generar los puntos donde se unirían las líneas al crear un triángulo. A diferencia de la primer practica en esta ya se contendrán dos archivos uno donde tendremos la generación del index y otra donde se generará el código java script.

En el archivo index con extensión html lo único que se genera es la configuración del idioma, el título que contendrá, la ubicación de las librerías que se utilizaran y la configuración del canvas, asi como también contendrá el nombre del archivo donde estará creado el de java script para la ejecución del mismo.



En el archivo donde se utiliza el lenguaje de java script lo que se hace es configurar la cámara, escena y el render utilizando métodos de las librerías que instanciaron anteriormente en el index, una vez que se configuro todo, se pasa a la creación de la geometría de los puntos (que de igual forma se hizo con la ayuda de un método de la librería de THREE:JS) una vez creados lo puntos se les asigno un material en el cual también se utilizó un método de la librería de THREE.JS. Ya teniéndose generado tanto la geometría como el material, lo que se hace es pasar como parámetros estas dos cosas ya mencionadas al método Points el cual también fue llamado de la librería de THREE.JS para la asignación a la escena, ya que por ultimo lo que se mandara al render será la escena  y la cámara.


1.2.3 Practica 3


En esta práctica el objetivo es basarse en la practica 2 para de generar los puntos de manera aleatoria dentro de toda la escena. De igual forma esta práctica contendrá un archivo índex (codigo html) y otro con el codigo necesario de java script.

En el archivo index de igual forma lo único que se genera es la configuración del idioma, el título que contendrá, la ubicación de las librerías que se utilizaran y la configuración del canvas, asi como también contendrá el nombre del archivo donde estará creado el de java script para la ejecución del mismo.


En el archivo donde se utiliza el lenguaje de java script lo que se hace es configurar la cámara, escena y el render utilizando métodos de las librerías que instanciaron anteriormente en el index, una vez que se configuro todo, se pasa a la creación de la geometría de los puntos es generada dentro de un ciclo el cual arrojará tres valores rondom para ser insertados en el método que es mandado llamar(la librería de THREE:JS) una vez creados lo puntos se les asigno un material en el cual también se utilizó un método de la librería de THREE.JS. Ya teniéndose generado tanto la geometría como el material, lo que se hace es pasar como parámetros estas dos cosas ya mencionadas al método Points el cual también fue llamado de la librería de THREE.JS para la asignación a la escena, ya que por ultimo lo que se mandara al render será la escena  y la cámara.


1.2.4 Practica 4


En esta práctica el objetivo es crear una curva de Bezier. De igual forma esta práctica contendrá un archivo índex (codigo html) y otro con el código necesario de java script.

En el archivo index de igual forma lo único que se genera es la configuración del idioma, el título que contendrá, la ubicación de las librerías que se utilizaran y la configuración del canvas, asi como también contendrá el nombre del archivo donde estará creado el de java script para la ejecución del mismo.


En el archivo donde se utiliza el lenguaje de java script lo que se hace es configurar la cámara, escena y el render utilizando métodos de las librerías que instanciaron anteriormente en el index, una vez que se configuro todo, se pasa a la creación de la geometría de los puntos que se necesitan para generar la curva utilizando (la librería de THREE:JS, específicamente CubicBezierCurve) una vez creados lo puntos se les asigno un material en el cual también se utilizó un método de la librería de THREE.JS. Ya teniéndose generado tanto la geometría como el material, lo que se hace es pasar como parámetros estas dos cosas ya mencionadas al método Points el cual también fue llamado de la librería de THREE.JS para la asignación a la escena, ya que por ultimo lo que se mandará al render será la escena y la cámara. Además de añadir un axes helper(Llamado el método desde la librería de THREE.JS) para indicarnos donde está el centro en el escenario.


1.2.5 Practica 5

En esta práctica el objetivo de esta práctica es generar dos figuras un cubo en 3D con rotación y un escudo en 2D. De igual forma esta práctica contendrá un archivo índex (codigo html) y otro con el código necesario de java script.



En el archivo index de igual forma lo único que se genera es la configuración del idioma, el título que contendrá, la ubicación de las librerías que se utilizaran y la configuración del canvas, asi como también contendrá el nombre del archivo donde estará creado el de java script para la ejecución del mismo.

En el archivo donde se utiliza el lenguaje de java script lo que se hace es configurar la cámara, escena y el render(dentro de la configuración del render el antialias se pondrá en verdadero para evitar problemas cuando se realice la animación de rotación del cubo) utilizando métodos de las librerías que instanciaron anteriormente en el index, una vez que se configuro todo, se pasa a la creación de la geometría de los puntos que se necesitan para generar la figura del escudo (utilizando la librería de THREE:JS, específicamente el método Geometry) una vez creados lo puntos se les asigno un material en el cual también se utilizó un método de la librería de THREE.JS.


Después comenzamos a realizar la figura del cubo la cual con ayuda del método BoxGeometry instanciado de la librería de THREE.JS solo queda definir los valores de x,y,z.
Ya teniéndose generado tanto la geometría como el material, lo que se hace es agregarlos a la escena. Por ultimo en la función que nos permite hacer el renderizado se agrega la velocidad de rotación que se dese.