Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
numbers:graphics [2010/04/03 17:06] alfred |
numbers:graphics [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| ====== Gráficos ====== | ====== Gráficos ====== | ||
| + | |||
| ===== Geometría ===== | ===== Geometría ===== | ||
| - | ===== Transformaciones ===== | ||
| Línea 8: | Línea 8: | ||
| + | ==== Problemas geométricos comunes ==== | ||
| + | * [[http://www.devmag.org.za/articles/245-BASIC-VECTOR-RECIPES/#topall]] | ||
| + | Ampliaremos la siguiente clase en [[highlevel:processing|Processing]]: | ||
| + | <code java> | ||
| + | class Point { | ||
| + | int x, y; | ||
| + | Point (int x, int y) { | ||
| + | this.x = x; | ||
| + | this.y = y; | ||
| + | } | ||
| + | void draw () { | ||
| + | point (x, y); | ||
| + | } | ||
| + | } | ||
| + | class Line { | ||
| + | Point p1, p2; | ||
| + | Line (Point p1, Point p2) { | ||
| + | this.p1 = new Point(p1.x, p1.y); | ||
| + | this.p2 = new Point(p2.x, p2.y); | ||
| + | } | ||
| + | void draw () { | ||
| + | line(p1.x, p1.y, p2.x, p2.y); | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | * **Distancia entre dos puntos**. //En la clase Point//: | ||
| + | <code java> | ||
| + | float distance (Point p) { | ||
| + | // Resta y magnitud de dos vectores | ||
| + | int subX = this.x - p.x; | ||
| + | int subY = this.y - p.y; | ||
| + | return sqrt(pow(subX,2) + pow(subY,2)); | ||
| + | } | ||
| + | </code> | ||
| + | * **Distancia entre un punto y una línea**, el siguiente código devuelve la distancia entre un punto P a la lína que pasa entre A y B: | ||
| + | <code java> | ||
| + | public double pointToLineDistance(Point A, Point B, Point P) | ||
| + | { | ||
| + | double normalLength = Math.sqrt((B.x - A.x) * (B.x - A.x) + (B.y - A.y) * (B.y - A.y)); | ||
| + | return Math.abs((P.x - A.x) * (B.y - A.y) - (P.y - A.y) * (B.x - A.x)) / normalLength; | ||
| + | } | ||
| + | </code> | ||
| + | **Saber si dos líneas son paralelas** | ||
| + | **Saber si dos líneas son perpendiculares** \\ | ||
| + | **Teniendo dos puntos y una línea, están los puntos al mismo lado de la línea?** \\ | ||
| + | **Está la línea sobre dos puntos?** \\ | ||
| + | **Un punto está en el ángulo de visión?** \\ | ||
| + | ===== Transformaciones ===== | ||
| - | + | ==== Traslación ==== | |
| - | + | {{numbers:graf:translacion.png?300|}} | |
| - | ===== Animaciones ===== | + | === Por suma === |
| + | Trasladaremos la posición (20, 30) unas (50, -100) posiciones: \\ | ||
| + | {{numbers:graf:translacion_por_suma.png|}} | ||
| + | === Por multiplicación === | ||
| + | Trasladaremos la posición (20, 30) unas (50, -100) veces: \\ | ||
| + | {{numbers:graf:translacion_por_multiplicacion.png|}} | ||
| Línea 20: | Línea 72: | ||
| + | ==== Rotación ==== | ||
| + | === Rotación 2d === | ||
| + | La multiplicación de un vector 2d por la siguiente matriz: \\ | ||
| + | <m> | ||
| + | delim{[} { matrix{2}{2}{{cos(alpha)} {-sen(alpha)} {sen(alpha)} {cos(alpha)} } } {]} | ||
| + | </m> \\ | ||
| + | devolverá otro vector 2d que será el equivalente al primero pero rotado //alpha// radianes. | ||
| + | === Rotación 3d (X, Y, Z) === | ||
| + | Se utilizarán vectores de 3 dimensiones (o de cuatro con el último término a 0). \\ | ||
| + | :?: No tengo claro cual es cual: \\ | ||
| + | <m> | ||
| + | delim{[} { matrix{4}{4}{ 1 0 0 0 0 {cos(alpha)} {-sen(alpha)} 0 0 {sen(alpha)} {cos(alpha)} 0 0 0 0 1 } } {]} | ||
| + | </m> \\ | ||
| + | <m> | ||
| + | delim{[} { matrix{4}{4}{ {cos(alpha)} 0 {sen(alpha)} 0 0 1 0 0 {-sen(alpha)} 0 {cos(alpha)} 0 0 0 0 1 } } {]} | ||
| + | </m> \\ | ||
| + | <m> | ||
| + | delim{[} { matrix{4}{4}{ {cos(alpha)} {-sen(alpha)} 0 0 {sen(alpha)} {cos(alpha)} 0 0 0 0 0 1 } } {]} | ||
| + | </m> | ||
| + | ==== Escalado ==== | ||
| + | ===== Animaciones ===== | ||
| - | ==== Uso de vectores ==== | + | ==== Aceleración mediante vectores ==== |
| * [[numbers:maths#vectores|Operaciones con vectores]] | * [[numbers:maths#vectores|Operaciones con vectores]] | ||
| - | === Aceleración === | ||
| Para los ejemplos se ha utilizado el lenguaje [[highlevel:processing|Processing]] y la [[highlevel:processing#otras_clases|clase PVector]], utilizaremos tres vectores: uno para la posición, otro para la velocidad y otro para la aceleración. \\ | Para los ejemplos se ha utilizado el lenguaje [[highlevel:processing|Processing]] y la [[highlevel:processing#otras_clases|clase PVector]], utilizaremos tres vectores: uno para la posición, otro para la velocidad y otro para la aceleración. \\ | ||
| La parte más importante del código es la clase ''Mover'', esta tiene cuatro métodos: el constructor que inicializa los vectores e indica un máximo de velocidad, ''update'' que es con la que jugaremos para modificar la velocidad, ''display'' que mostrará la pelota según la posición actualy ''checkEdges'' que se encarga de controlar cuando la pelota sale de los bordes. La función ''setup'' inicializa la vista y el objeto ''Mover'' y la función ''update'' actualiza la vista. \\ \\ | La parte más importante del código es la clase ''Mover'', esta tiene cuatro métodos: el constructor que inicializa los vectores e indica un máximo de velocidad, ''update'' que es con la que jugaremos para modificar la velocidad, ''display'' que mostrará la pelota según la posición actualy ''checkEdges'' que se encarga de controlar cuando la pelota sale de los bordes. La función ''setup'' inicializa la vista y el objeto ''Mover'' y la función ''update'' actualiza la vista. \\ \\ | ||
| Línea 111: | Línea 183: | ||
| } | } | ||
| </code> | </code> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| ==== Interpolaciones ==== | ==== Interpolaciones ==== | ||
| Si queremos mover la variable ''X'' de un punto ''pA'' a otro ''pB'' en ''N'' pasos tendremos la siguiente función (siendo ''i'' el paso actual): <m>X = ((pB · (N - i)) + (pA · i)) / N</m> \\ \\ | Si queremos mover la variable ''X'' de un punto ''pA'' a otro ''pB'' en ''N'' pasos tendremos la siguiente función (siendo ''i'' el paso actual): <m>X = ((pB · (N - i)) + (pA · i)) / N</m> \\ \\ | ||
| Línea 199: | Línea 283: | ||
| * [[http://freespace.virgin.net/hugo.elias/models/m_perlin.htm]] | * [[http://freespace.virgin.net/hugo.elias/models/m_perlin.htm]] | ||
| * [[http://devmag.org.za/articles/48-HOW-TO-USE-PERLIN-NOISE-IN-YOUR-GAMES/2/#top1]] | * [[http://devmag.org.za/articles/48-HOW-TO-USE-PERLIN-NOISE-IN-YOUR-GAMES/2/#top1]] | ||
| + | |||
| + | ===== Ecuaciones de formas ===== | ||
| + | ==== Elipse ==== | ||
| + | <code python> | ||
| + | import pygame | ||
| + | from pygame.locals import * | ||
| + | import sys | ||
| + | import math | ||
| + | w = 640 | ||
| + | h = 489 | ||
| + | screen = pygame.display.set_mode((w,h)) | ||
| + | |||
| + | sampling = 50 | ||
| + | r1 = 100 | ||
| + | r2 = 160 | ||
| + | |||
| + | def drawPoint (x,y, c=(255,0,0)): | ||
| + | centX = w/2 | ||
| + | centY = h/2 | ||
| + | nx = centX + x | ||
| + | ny = centY + y | ||
| + | pygame.draw.circle(screen, c, (int(nx), int(ny)), 1) | ||
| + | |||
| + | for i in range(sampling): | ||
| + | theta = i * (2. * 3.1421)/sampling | ||
| + | cosTheta = math.cos(theta) | ||
| + | sinTheta = math.sin(theta) | ||
| + | tmp1 = (cosTheta*cosTheta)/(r2*r2) | ||
| + | tmp2 = (sinTheta * sinTheta)/(r1*r1) | ||
| + | tmp = math.sqrt(tmp1+tmp2) | ||
| + | drawPoint(cosTheta/tmp, sinTheta/tmp) | ||
| + | |||
| + | pygame.display.flip() | ||
| + | |||
| + | while True: | ||
| + | for event in pygame.event.get(): | ||
| + | if event.type == QUIT: | ||
| + | sys.exit() | ||
| + | pygame.display.update() | ||
| + | </code> | ||