Está en la página 1de 11
INSTITUTO TECNOLÓGICO SUPERIOR DE FELIPE CARRILLO PUERTO GRAFICACION PRACTICA N° (1) (SUBLIME TEXT) Aplicación de
INSTITUTO TECNOLÓGICO SUPERIOR DE FELIPE CARRILLO PUERTO GRAFICACION PRACTICA N° (1) (SUBLIME TEXT) Aplicación de

INSTITUTO TECNOLÓGICO SUPERIOR DE FELIPE CARRILLO PUERTO

GRAFICACION

PRACTICA N° (1)

(SUBLIME TEXT)

Aplicación de las funciones primitivas con canvas y JavaScript

DOCENTE: PALOMA GONGORA SABIDO

(Raul Enrique Dzidz Ku, 6ª, B)

(29-02-16)

1

PRACTICA N° 2: (TRANSFORMACIONES JAVASCRIPT Y JAVA)

1.1 OBJETIVO

Aprender a realizar trasformaciones en javascript con canvas y en java con las funciones que cada uno de

estos lenguajes manejen.

1.2 MATERIALES/RECURSOS

1 Pc

El software para la escritura del código (Sublime Text) para javascript y canvas, y Netbeans para programar en java.

Y las funciones que previamente se investigaron.

1.3 CONCEPTOS BASICOS

Canvas: es un elemento HTML incorporado en HTML5 que permite la generación de gráficos dinámicamente por medio del scripting. Permite generar gráficos estáticos y animaciones. Cualquier texto dentro de este elemento se mostrará solo en los navegadores que no soportan el canvas.

.fillStyle: Función de JavaScript encargada de rellenar el color de la figura en el canvas.

.fillRect: Función de JavaScript encargada de trazar rectángulos en el canvas.

.strokeStyle: Función de JavaScript que sirve para dibujar el contorno de la figura.

.closePath: Sirve para cerrar un camino, volviendo a su punto inicial de dibujo.

.Stroke: Método para dibujar una línea por todo el recorrido del camino que hayamos creado por medio de sus distintos segmentos.

.Fill: Método para confirmar el relleno de la función fillStyle.

.beginPath: Esta función sirve para decirle al contexto del canvas que vamos a empezar a dibujar un camino.

.lineWidth: Propiedades anchura de línea o devuelve el ancho de la línea actual en píxeles.

.scale: escala la figura que deseemos.

.rotate: gira la figura en los angulos que queramos.

.traslate: traslada o mueve una figura a otro punto en el plano

<script>:El elemento < script> o bien contiene declaraciones de secuencias de comandos , o señala a un archivo de script externo a través del atributo src.

.getContext():Método devuelve un contexto de dibujo en el lienzo , o null si no se admite el identificador de contexto.

1.4 PROCEDIMIENTO

1.4.1 PASO 1

Lo primero que se hace es abrir el sublime text y creamos la estructura básica de un documento HTML .

text y creamos la estructura básica de un documento HTML . 1.4.2 Paso 2 Lo siguiente

1.4.2 Paso 2

Lo siguiente será crear la estructura del canvas que consta de una etiqueta <canvas></canvas> el cual contendrá el tamaño que nosotros queramos y le damos un id para identificar nuestro canvas.

queramos y le damos un id para identificar nuestro canvas. 1.4.3 Paso 3 Crear la etiqueta

1.4.3 Paso 3

Crear la etiqueta <script></script> el cual no sirve para agregar código JavaScript y le damos el atributo type con el valor text/javascript, a nuestro documento dentro de la etiqueta <body></body>.

1.4.4 Paso 4 Dentro de la etiqueta de nuestro script creamos dos variables que nos

1.4.4 Paso 4

Dentro de la etiqueta de nuestro script creamos dos variables que nos servirán para crear las figuras 2D.

dos variables que nos servirán para crear las figuras 2D. La primera variable hace el llamado

La primera variable hace el llamado al canvas que creamos en el “body”. También creamos una variable llamada “dibujo” para poder trabajar con el contexto 2D. y con esto ya podemos comenzar a dibujar nuestras funciones.

1.4.5 Dibujar un rectángulo

Crear un cuadrado es algo sencillo, solo tenemos que hacer el llamado a la función “fillRect”, en la cual definimos las coordenadas (x, y) de inicio y el ancho del largo del cuadrado.

a la función “fillRect”, en la cual definimos las coordenadas (x, y) de inicio y el
a la función “fillRect”, en la cual definimos las coordenadas (x, y) de inicio y el

1.4.6 Traslado del rectángulo

Para hacer el traslado utilizaremos la función traslate que requiere de dos parámetros que son (x) y (y) que nos dibujara el rectángulo en otra parte de nuestro canvas con los mismos valores.

en otra parte de nuestro canvas con los mismos valores. 1.4.7 Rotación La función rotate utiliza
en otra parte de nuestro canvas con los mismos valores. 1.4.7 Rotación La función rotate utiliza

1.4.7 Rotación

La función rotate utiliza una función matemática, que utiliza los radianes para hacer rotar la figura en este caso nuestro rectángulo. Un radian es igual a 180° este valor es dividido entre el valor que coloquemos después de nuestra función math.PI/ en este caso 5 y nos da como resultado 36°.

1.4.8 E scala La función scale nos permite duplicar el tamaño original del rectángulo ya
1.4.8 E scala La función scale nos permite duplicar el tamaño original del rectángulo ya

1.4.8

Escala

La función scale nos permite duplicar el tamaño original del rectángulo ya que utilizamos los valores (2,2), esta función multiplica por dos los valores que se le tienen asignado a nuestro rectángulo original.

los valores (2,2), esta función multiplica por dos los valores que se le tienen asignado a
los valores (2,2), esta función multiplica por dos los valores que se le tienen asignado a

1.5

PROCEDIMIENTO EN JAVA

1.5.1 PASO 1

Lo primero que se debe realizar es abrir el editor de código Netbeans y crear un nuevo proyecto al cual llamaremos Primitivas, senos crea la función principal con el mismo nombre agregamos un nuevo java class con el nombre de Funciones. La siguiente imagen nos muestra como quedara nuestro proyecto.

siguiente imagen nos muestra como quedara nuestro proyecto. 1.5.2 PASO 2 Ya que ctengamos las dos

1.5.2 PASO 2

Ya que ctengamos las dos clases la Principal (Primitivas) y Funciones. En la clase principal importaremos las librerías que se utilizaran java.awt.Color;, y javax.swing.JFrame; el primero para asignarle color a nuestro frame y el segundo es para que importar un JFrame que será donde se dibujen las funciones.

para asignarle color a nuestro frame y el segundo es para que importar un JFrame que

En la misma clase crearemos unas variables que nos servirán. Estos son c que nos indica que new JFrame se llamara “Funciones primitivas” la siguiente línea es para que al cerrar el frame el proceso termine, lo siguiente es llamar a la clase Funciones con la variable e. le asignamos un color de fondo con el setBackground, también un tamaño con setSize y hacemos que sea visible.

también un tamaño con setSize y hacemos que sea visible. 1.5.3 PASO 3 En la clase

1.5.3 PASO 3

En la clase Funciones importamos las librerías que se usaran para dibujar las librerías, Font para fuente, Graphics para dibujar graficos 2d, y el Jpanel.

para fuente, Graphics para dibujar graficos 2d, y el Jpanel. Después declaramos que la clase funciones

Después declaramos que la clase funciones es una extensión de la clase Primitivas ya que las variables declaradas en la clase Primitivas se usaran en la clase Funciones, y declaramos una variable privada del tipo entero llamada stringY.

1.5.4 PASO 4 Creamos un public void con el nombre de paintComponent y le pasamos

1.5.4 PASO 4

Creamos un public void con el nombre de paintComponent y le pasamos el parámetro Graphics y le pasamos la variable e que declaramos en la clase principal,

pasamos la variable e que declaramos en la clase principal, 1.5.5 Dibujamos cuadrado La creación del

1.5.5 Dibujamos cuadrado

La creación del cuadrado es igual que la del rectángulo, se hace con la función “fillRect”, lo único que cambia es que los valores de la altura y de anchura deben ser idénticos, contrario al del rectángulo, los cuales podían ser distintos.

os valores de la altura y de anchura deben ser idénticos, contrario al del rectángulo, los
os valores de la altura y de anchura deben ser idénticos, contrario al del rectángulo, los

1.5.6

Traslado en java

Para realizar el traslado de un objeto en java al igual que en javascript utilizamos la función traslate la cual nos pide dos valores los cuales utiliza que son las coordenadas donde se localizara el cuadrado que se trasladara después de la función traslate dibujamos de nuevo nuestro cuadrado.

de la función traslate dibujamos de nuevo nuestro cuadrado. 1.5.7 Escala en java Ahora veremos la
de la función traslate dibujamos de nuevo nuestro cuadrado. 1.5.7 Escala en java Ahora veremos la

1.5.7 Escala en java

Ahora veremos la forma de escalar un objeto en java la función que utilizaremos es scale que de igual manera nos pide dos valores los cuales como en el javascript son los valores por el cual duplicara o triplicara en tamaño del cuadrado.

dos valores los cuales como en el javascript son los valores por el cual duplicara o
dos valores los cuales como en el javascript son los valores por el cual duplicara o

1.5.8

Rotación en java

La rotación en java nos pide tres valores a diferencia del javascript que utilizábamos la librería math, aquí no se utiliza ya que la función rotate nos pide los grados que rotara la figura y el valor inicia donde comenzara la rotación y donde termina.

valor inicia donde comenzara la rotación y donde termina. 1.6 RETROALIMENTACIÓN FINAL como pudimos observar las
valor inicia donde comenzara la rotación y donde termina. 1.6 RETROALIMENTACIÓN FINAL como pudimos observar las

1.6 RETROALIMENTACIÓN FINAL

como pudimos observar las funciones que maneja javascript para la traslación y la escala son similares,a diferencia de lo que es el rotate que utiliza la librería Math y los radianes en el javascript y en java utiliza tres valores que son los grados de rotación y los valores de inicio y fin de nuestra rotación.