Para realizar mi proyecto me he basado en las enseñanzas de Arte Generativo de Matt Pearson.
Pueden bajar el libro "Generative Art" por internet como tambien consultar dos páginas relacionadas con el libro:
*Capitulo nº 7 movimiento, del libro Getting Started with Processing, con mi traducción al español:
Lo primero que hice fue comenzar con los conceptos básicos que me ayudaran a la construcción de un código que " se genere por su solo" utilizando elementos como random o noise y unas cuantas operaciones matemáticas es posible hacer que una figura o un conjunto de elementos de la sensación de movimiento "por si solo".
Para comenzar describiré una lista de los elementos básicos junto a sus funciones y otros datos:
* frame loop:
Con frame loop puedes agregar la dimensión de tiempo a una visual 2D y crear trabajos que crecen y se mueven. Aquí se encuentran:
-setup()
-draw()
-Variable scope. Las variables dentro de las funciones se llaman local. Solo existen en esa localidad. Variables fuera de las funciones son llamadas global: están en todas partes.
*Aveces se usa un (_) para decir que una variable es global.
*Capturando imágenes estáticas desde una aplicación:
Con el siguiente código se puede capturar cuadro por cuadro una composición que se mueva.
void KeyPressed() {
if (keyCode == ENTER) {
saveFrame ("screen -####.jpg");
}
}
*frame Rate():
Para crear movimiento fluido, porcessing ejecuta el código dentro de draw() a 60 fotogramas por segundo. La función frameRate() cambia la velocidad en la cual el rpograma se ejecuta.
Para crear ejemplo de movimiento fluido, usamos datatype llamado float.
float= número decimal (variable)
Permite mover la figura tan lento como quieres (1.01, 1.02, 1.03).
En cambio int = variable número entero solamente se mueve (1,2,3,4)
*random():
En Processing una función random da valores en un rango de 0 a 1, lo cual lo puedes manipular para dar un valor entre cualquier rango.
-Un parámetro para un valor máximo
-Dos parámetros para un valor entre un rango.
EJ:
float randnum = random (20, 480);
float randnum = random (460) + 20;
float randnum = (random (1) * (max + min)) - min
- random genera número al azar. Cada vez que la función random es llamada, regresa un valor inesperado en un rango específico. Si se pasa un parámetro a la función devolverá un número decimal entre 0 y el valor del parámetro más alto.
La función que llama random (5) devuelve valores entre 0 y 5 (empezando en cero, subiendo pero no incluyendo 5).
Si dos parámetros son pasados, devolvera un decimal con un valor entre los parámetros. La función llama a random (-5, 10.2) devuelve valores empezando a -5 hasta (sin incluir) 10.2
Para convertir un número flotante a un entero usa la función int()
Syntax random (high)
random ( low, high)
high int o float
low int o float
*randomSeed():
Por omisión random() produce diferentes resultados cada vez que el programa es ejecutado. Setea el parámetro del valor a una constante para devolver los mismo números al azar cada vez que el software se ejecute.
randomSeed(value);
value = int
* int():
Datatype para enteros, números sin una decimal. Pueden ser números grandes o chicos. Están almacenados a 32 bits de información. La primera vez que una variable es escrita, tiene que ser declarada expresando su datatype.
int var = value
var: nombre de la variable que se refiere el valor
value: cualquier valor entero
*float():
datatype para números decimales
float var = value
var: variable de la variable que se refiere el valor
value: cualquier valor decimal
*noise():
Enables you to harness in your own creations the same naturalistic variance seen on the big screen. Is generally used to produce a sequence of numbers.
-Devuelve "the Perlin noise" valor a coordenadas específicas. Perlin noise es un generador de secuencias aleatorias que produce un orden más natural, una sucesión armónica de números comparado con el random() estandar.
-La principal diferencia de random() es que Perlin noise es definido en un espacio dimensional n infinito donde cada par de coordenadas corresponde a un valor semi-aleatorio arreglado. El valor resultante estara siempre entre 0.0 y 1.0. Processing puede trabajar con 1D, 2D Y 3D noise, dependiendo el número de coordenadas dadas. El valor noise puede ser animado moviendose por el espacio noise.
Come una regla general mientras más pequeña la diferencia entre coordenadas, más suave será el resultado de la secuencia noise. Se recomienda steps entre 0.005 y 0.03.
noise (x)
noise (x,y)
noise (x,y,z)
x float : coordenadas x
y float: coordenadas y
z float coordenadas z
*Like noise the trigonometric functions sin and cos also return values that vary smothly according to arguments you pass to them. With these two mathematical functions, you pass an angle (in radians) adn the functions return a value between -1 and 1.
-Los valores de random y noise son resultados de un calculo.
*pow():
Facilitates exponential expresions. La función pow() es una forma eficiente de multiplicar números por ellos mismos ( o su recíproco) en largas cantidades.
ej: pow (3,5) es equivalente a 3*3*3*3*3 y
pow (3,-5) es equivalente a 1/ 3*3*3*3*3
*sin():
calcula el seno de un ángulo. Esta función espera que los valores del parámetro del ángulo sean dados en radianes (valor de 0 a 6.28). Los valores son retornados en un rango de -1 a 1.
sin (rad)
rad = float: and angle in radians
*cos():
Esta función espera que el valor del parámetro del ángulo sea dada en radianes (valores de 0 a PI*2). Los valores son devueltos en un rango de -1 a 1.
angle: float = ángulo en radianes
*radians():
convierte a una medida de grados (degree) en su valor de radianes (radians) correspondiente.
Los radianes y los grados son dos formas de medir una misma cosa. Hay 360 grados en un circulo y 2*PI radianes en un círculo.
-Por ejemlo: 90º = PI/2 = 1,570...
Todos los métodos trigonométricos en processing requieren que sus parámetros sean especificados en radianes.
radians (angle)
angle = int or float
Ej: float deg = 45.0
float rad = radians (deg);
* degrees():
Convierte un valor en radianes a grados.
Ej: degrees (angle)
angle = int or float
*tan():
Calcula el radios del seno y coseno de un ángulo. Esta función espera que los valores del parámetro del ángulo esten dados en radianes (valores de 0 a PI*2). Los valores son retornados en un rango de infinity a -infinity.
Ej: tan (angle)
angle = float = un ángulo en radianes
cuando sin() y cos() son usados juntos ellos producen movimiento circular.
-cos() provee las coordenadas x
-sin() provee las coordenadas y
*Radians y degrees*
-Un radian equivale a 180/PI
360 grados = 2PI radianes
radin= degrees*(180/PI)
*scalar:
sin() y cos() son multiplicados por la variable scalar para cambiar el radios del movimiento.
*offset():
sin() y cos() son sumadas con un valor offset (valor de desplazamiento) para establecer el centro del movimiento circular.
*beginShape():
Usar las funciones beginShape() y endShape() permiten crear formas más complejas. beginShape() empieza con el vértice de una figura y endShape() lo termina. Después de llamar a beginShape() una serie de vertex() comandos deben seguir. Para pasar de dibujar la figura llama a endShape().
La función vertex() con dos parámetros especifica una posición 2D y el vertex () con tres parámetros una posición 3D.
*vertex():
Todas las figuras estén hechas para conectar una serie de vértices. vertex() es usado para especificar las coordenadas del vértice para puntos. lineas, triángulos, cuadrados y polígonos y es usado exclusivamente entre las funciones beginShape() y endShape().
*translate():
modificando el sistema de coordenadas se puede crear diferentes transformaciones como traslación rotación y scaling.
-translate() especifica la cantidad (de pixeles) para ubicar un objeto en la pantalla. El parámetro x especifica la traslación de izquierda a derecha. El parámetro y especifica la traslación de arriba a abajo. El parámetro z especifica la traslación (más cerca o más lejos) de la pantalla. Si se llama a translate (50,0) y luego translate (20,0) se convertira en translate (70,0).
Si translate esta dentro de draw() la transformación es reseteada cuando el loop comienza de nuevo.
translate (x,y); x= izquierda / derecha
translate (x,y,z); y= arriba / abajo
z= adelante / atras
Ya que translate() suma las traslaciones que son llamadas dentro de void draw, para aislar las transformaciones y que n ointervengan con las demás usamos: pushMatrix() y popMatrix()
*pushMatrix():
guarda la posición inicial del sistema de coordenadas.
*popMatrix():
restaura el sistema de coordenadas a la manera que era antes. Se utiliza estas funciones para aislar las transformaciones.
_________________________________________________________________________________
*Primeros códigos:
-Sketch_1: Este fue el primer código que encontré en el libro "Generative Art" de Matt Pearson referente a la idea que quiero trabajar para mi proyecto. Se le realizó unos ajustes al código para resaltar su forma circular.
http://www.openprocessing.org/visuals/?visualID=46050
-Sketch_2: Este código lo hice yo utilizando los parámetro sin(), cos() y random() de manera de aplicarlo a un línea y crear un movimiento circular.
http://www.openprocessing.org/visuals/?visualID=46052
-Sketch_3: este código es una combinación del sketch 1 y 2, que también lo hice yo, donde da la leve sensación que el figura esta creciendo, actualmente estoy trabajando en este código para poder lograr un efecto de movimiento mejor y agregarle más características.
http://www.openprocessing.org/visuals/?visualID=46054
*Capturando imágenes estáticas desde una aplicación:
Con el siguiente código se puede capturar cuadro por cuadro una composición que se mueva.
void KeyPressed() {
if (keyCode == ENTER) {
saveFrame ("screen -####.jpg");
}
}
*frame Rate():
Para crear movimiento fluido, porcessing ejecuta el código dentro de draw() a 60 fotogramas por segundo. La función frameRate() cambia la velocidad en la cual el rpograma se ejecuta.
Para crear ejemplo de movimiento fluido, usamos datatype llamado float.
float= número decimal (variable)
Permite mover la figura tan lento como quieres (1.01, 1.02, 1.03).
En cambio int = variable número entero solamente se mueve (1,2,3,4)
*random():
En Processing una función random da valores en un rango de 0 a 1, lo cual lo puedes manipular para dar un valor entre cualquier rango.
-Un parámetro para un valor máximo
-Dos parámetros para un valor entre un rango.
EJ:
float randnum = random (20, 480);
float randnum = random (460) + 20;
float randnum = (random (1) * (max + min)) - min
- random genera número al azar. Cada vez que la función random es llamada, regresa un valor inesperado en un rango específico. Si se pasa un parámetro a la función devolverá un número decimal entre 0 y el valor del parámetro más alto.
La función que llama random (5) devuelve valores entre 0 y 5 (empezando en cero, subiendo pero no incluyendo 5).
Si dos parámetros son pasados, devolvera un decimal con un valor entre los parámetros. La función llama a random (-5, 10.2) devuelve valores empezando a -5 hasta (sin incluir) 10.2
Para convertir un número flotante a un entero usa la función int()
Syntax random (high)
random ( low, high)
high int o float
low int o float
*randomSeed():
Por omisión random() produce diferentes resultados cada vez que el programa es ejecutado. Setea el parámetro del valor a una constante para devolver los mismo números al azar cada vez que el software se ejecute.
randomSeed(value);
value = int
* int():
Datatype para enteros, números sin una decimal. Pueden ser números grandes o chicos. Están almacenados a 32 bits de información. La primera vez que una variable es escrita, tiene que ser declarada expresando su datatype.
int var = value
var: nombre de la variable que se refiere el valor
value: cualquier valor entero
*float():
datatype para números decimales
float var = value
var: variable de la variable que se refiere el valor
value: cualquier valor decimal
*noise():
Enables you to harness in your own creations the same naturalistic variance seen on the big screen. Is generally used to produce a sequence of numbers.
-Devuelve "the Perlin noise" valor a coordenadas específicas. Perlin noise es un generador de secuencias aleatorias que produce un orden más natural, una sucesión armónica de números comparado con el random() estandar.
-La principal diferencia de random() es que Perlin noise es definido en un espacio dimensional n infinito donde cada par de coordenadas corresponde a un valor semi-aleatorio arreglado. El valor resultante estara siempre entre 0.0 y 1.0. Processing puede trabajar con 1D, 2D Y 3D noise, dependiendo el número de coordenadas dadas. El valor noise puede ser animado moviendose por el espacio noise.
Come una regla general mientras más pequeña la diferencia entre coordenadas, más suave será el resultado de la secuencia noise. Se recomienda steps entre 0.005 y 0.03.
noise (x)
noise (x,y)
noise (x,y,z)
x float : coordenadas x
y float: coordenadas y
z float coordenadas z
*Like noise the trigonometric functions sin and cos also return values that vary smothly according to arguments you pass to them. With these two mathematical functions, you pass an angle (in radians) adn the functions return a value between -1 and 1.
-Los valores de random y noise son resultados de un calculo.
*pow():
Facilitates exponential expresions. La función pow() es una forma eficiente de multiplicar números por ellos mismos ( o su recíproco) en largas cantidades.
ej: pow (3,5) es equivalente a 3*3*3*3*3 y
pow (3,-5) es equivalente a 1/ 3*3*3*3*3
*sin():
calcula el seno de un ángulo. Esta función espera que los valores del parámetro del ángulo sean dados en radianes (valor de 0 a 6.28). Los valores son retornados en un rango de -1 a 1.
sin (rad)
rad = float: and angle in radians
*cos():
Esta función espera que el valor del parámetro del ángulo sea dada en radianes (valores de 0 a PI*2). Los valores son devueltos en un rango de -1 a 1.
angle: float = ángulo en radianes
*radians():
convierte a una medida de grados (degree) en su valor de radianes (radians) correspondiente.
Los radianes y los grados son dos formas de medir una misma cosa. Hay 360 grados en un circulo y 2*PI radianes en un círculo.
-Por ejemlo: 90º = PI/2 = 1,570...
Todos los métodos trigonométricos en processing requieren que sus parámetros sean especificados en radianes.
radians (angle)
angle = int or float
Ej: float deg = 45.0
float rad = radians (deg);
* degrees():
Convierte un valor en radianes a grados.
Ej: degrees (angle)
angle = int or float
*tan():
Calcula el radios del seno y coseno de un ángulo. Esta función espera que los valores del parámetro del ángulo esten dados en radianes (valores de 0 a PI*2). Los valores son retornados en un rango de infinity a -infinity.
Ej: tan (angle)
angle = float = un ángulo en radianes
cuando sin() y cos() son usados juntos ellos producen movimiento circular.
-cos() provee las coordenadas x
-sin() provee las coordenadas y
*Radians y degrees*
-Un radian equivale a 180/PI
360 grados = 2PI radianes
radin= degrees*(180/PI)
*scalar:
sin() y cos() son multiplicados por la variable scalar para cambiar el radios del movimiento.
*offset():
sin() y cos() son sumadas con un valor offset (valor de desplazamiento) para establecer el centro del movimiento circular.
*beginShape():
Usar las funciones beginShape() y endShape() permiten crear formas más complejas. beginShape() empieza con el vértice de una figura y endShape() lo termina. Después de llamar a beginShape() una serie de vertex() comandos deben seguir. Para pasar de dibujar la figura llama a endShape().
La función vertex() con dos parámetros especifica una posición 2D y el vertex () con tres parámetros una posición 3D.
*vertex():
Todas las figuras estén hechas para conectar una serie de vértices. vertex() es usado para especificar las coordenadas del vértice para puntos. lineas, triángulos, cuadrados y polígonos y es usado exclusivamente entre las funciones beginShape() y endShape().
*translate():
modificando el sistema de coordenadas se puede crear diferentes transformaciones como traslación rotación y scaling.
-translate() especifica la cantidad (de pixeles) para ubicar un objeto en la pantalla. El parámetro x especifica la traslación de izquierda a derecha. El parámetro y especifica la traslación de arriba a abajo. El parámetro z especifica la traslación (más cerca o más lejos) de la pantalla. Si se llama a translate (50,0) y luego translate (20,0) se convertira en translate (70,0).
Si translate esta dentro de draw() la transformación es reseteada cuando el loop comienza de nuevo.
translate (x,y); x= izquierda / derecha
translate (x,y,z); y= arriba / abajo
z= adelante / atras
Ya que translate() suma las traslaciones que son llamadas dentro de void draw, para aislar las transformaciones y que n ointervengan con las demás usamos: pushMatrix() y popMatrix()
*pushMatrix():
guarda la posición inicial del sistema de coordenadas.
*popMatrix():
restaura el sistema de coordenadas a la manera que era antes. Se utiliza estas funciones para aislar las transformaciones.
_________________________________________________________________________________
*Primeros códigos:
-Sketch_1: Este fue el primer código que encontré en el libro "Generative Art" de Matt Pearson referente a la idea que quiero trabajar para mi proyecto. Se le realizó unos ajustes al código para resaltar su forma circular.
http://www.openprocessing.org/visuals/?visualID=46050
-Sketch_2: Este código lo hice yo utilizando los parámetro sin(), cos() y random() de manera de aplicarlo a un línea y crear un movimiento circular.
http://www.openprocessing.org/visuals/?visualID=46052
-Sketch_3: este código es una combinación del sketch 1 y 2, que también lo hice yo, donde da la leve sensación que el figura esta creciendo, actualmente estoy trabajando en este código para poder lograr un efecto de movimiento mejor y agregarle más características.
http://www.openprocessing.org/visuals/?visualID=46054
No hay comentarios:
Publicar un comentario