Programación de gráficos II: animación de arte generativo
Joshua Davis, Artist, Designer, and Technologist
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Avance
1:09
-
2.
Unidad 1, video 1
2:00
-
3.
Unidad 1, video 2
3:33
-
4.
Unidad 1, video 2
6:17
-
5.
Introducción a HRotate y Anchor
1:39
-
6.
Unidad 2, video 1
12:55
-
7.
Unidad 2, video 2
12:46
-
8.
Unidad 2, video 3
14:04
-
9.
Introducción a HCanvas
2:02
-
10.
Unidad 3, video 1
6:09
-
11.
Unidad 3, video 2
14:50
-
12.
Introducción a HFollow
2:30
-
13.
Unidad 4, video 1
12:48
-
14.
Introducción a HTimer y HRandomTrigger
1:45
-
15.
Unidad 5, video 1
12:42
-
16.
Unidad 5, video 2
14:40
-
17.
Unidad 5, video 3
8:52
-
18.
Introducción a HTween y HCallback
2:50
-
19.
Unidad 6, video 1
8:34
-
20.
Unidad 6, video 2
15:13
-
21.
Unidad 6, video 3
7:00
-
22.
Mira la unidad 6, video 4
9:59
-
23.
Unidad 6, video 5
5:39
-
24.
Unidad 6, video 6
9:18
-
25.
Unidad 6, video 7
6:25
-
26.
Unidad 6, video 8
10:56
-
27.
Introducción a HSwarm
3:00
-
28.
Unidad 7, video 1
13:26
-
29.
Unidad 7, video 2
11:40
-
30.
Introducción a HOscillator
3:05
-
31.
Unidad 8, video 1
18:11
-
32.
Unidad 8, video 2
4:00
-
33.
Unidad 8, video 3
13:01
-
34.
Unidad 8, video 4
5:38
-
35.
Unidad 8, video 5
4:37
-
36.
Unidad 8, video 6
7:38
-
37.
Unidad 8, video 7
5:51
-
38.
Unidad 8, video 8
7:39
-
39.
Unidad 8, video 9
6:03
-
40.
Introducción a la combinación de comportamientos
1:22
-
41.
Unidad 9, video 1
12:27
-
42.
Unidad 9, video 2
5:46
-
43.
Unidad 9, video 3
7:12
-
44.
Unidad 9, video 4
14:47
-
45.
Unidad 9, video 5
14:07
-
46.
Unidad 9, video 6
10:33
-
47.
Unidad 9, video 7
7:10
-
48.
Unidad 9, video 8
10:17
-
49.
Unidad 9, video 9
7:46
-
50.
Unidad 9, video 10
10:20
-
51.
Unidad 9, video 11
5:16
-
52.
Unidad 9, video 12
10:09
-
53.
Unidad 9, video 13
8:14
-
54.
Introducción a la salida
2:25
-
55.
Unidad 10, video 1
7:44
-
56.
Unidad 10, video 2
13:14
-
57.
Processing 3 + biblioteca HYPE/actualización
7:11
-
58.
Más clases creativas en Skillshare
0:33
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
3102
Estudiantes
32
Proyectos
Acerca de esta clase
Mi primera clase de Skillshare, “Programación de gráficos I: introducción arte generativo", es requisito OBLIGATORIO para tomar este curso. Les enseño a los estudiantes a crear un número infinito de patrones usando mi biblioteca de HYPE Framework y comandos muy simples. En esta clase, tomaremos composiciones estáticas (como las que creamos en la clase inicial) y las animaremos usando un conjunto similar de aleatorizaciones basadas en reglas. En otras palabras, ¡vamos a darle VIDA a tu obra de arte!
Desarrollé el Hype Framework como una forma de colaborar con la creación de arte generativo estático y animado a través de Processing. Gran parte de mi trabajo, incluyendo los 30 segundos de renderización de video de mi Tumblr praystation, está hecho con las técnicas y principios que voy a enseñar en esta clase de Skillshare. Así que, si te fascinan estas cosas, ¿qué estás esperando? ¡Inscríbete!
Qué aprenderás
A través de videos capturados, te guiaré por el proceso de creación de arte generativo animado usando mi Hype Framework. Cubriremos:
- Rotación y anclaje (HRotate y Anchoring). Cómo girar un objeto en torno a la posición de anclaje.
- Pintar un lienzo (HCanvas). Aprenderemos cómo pintar un lienzo y cuáles son las diferencias con el escenario, y también repasaremos las capas, el aclarado y el desvanecimiento de elementos que se pintan en ese lienzo.
- Desplazamiento con el ratón (HFollow). Cómo usar el mouse como entrada para mostrar animación a partir de gestos con el ratón.
- HTimer y HRandomTrigger. Cómo configurar una acción que se active a partir de un tempo (tanto constante como escalonado).
- Objetos en movimiento (HTween y HCallback). Cómo mover un objeto de un lugar a otro y luego activar un evento cuando un objeto llega a su destino.
- Comportamiento de enjambre (HSwarm)). Cómo usar un comportamiento de enjambre para animar objetos en pantalla a medida que se reúnen alrededor de un punto, ya sea fijo o animado.
- Oscilación de ondas (HOscillator))). ¡Mi favorito! Cómo usar la oscilación de onda para animar cosas en la pantalla usando ondas sinusoidales, cuadradas, triangulares o de sierra.
- Toques finales y salida. Cómo combinar animaciones y clases y cómo trasladar nuestras animaciones a video.
Qué harás
Como proyecto de clase, animarás formas de arte generadas con código; a partir de archivos que ya tienes o de lo que creaste en mi primera clase. Tu resultado final será una secuencia de imágenes renderizadas (. MOV/. mp4) que podemos subir a Tumblr, Flickr, YouTube, o Vimeo.
Conoce a tu profesor(a)
Joshua Davis is an award-winning designer, technologist, author and artist in new media, and is acclaimed for his role in designing the visualization of IBM's Watson, the intelligent computer program capable of answering questions, for the quiz show Jeopardy.
Joshua's work has been exhibited at the Tate Modern (London), the Ars Electronica (Austria), the Design Museum (London), le Centre Pompidou (France), the Institute of Contemporary Arts (London), PS.1 MoMA (New York), the Smithsonian's Cooper-Hewitt, National Design Museum and more.
Ver perfil completoProyecto de clase práctica
Crea un video de arte generativo animado
Introducción
- Que comience la fiesta
Busca lo que te apasiona. Invoca tu espíritu animal. Y que comience la fiesta.
- Pre-requisito para la primera clase
El REQUISITO para tomar esta clase, es que hayas tomado mi primera clase/http://skl.sh/1l5cT6n ya que describe cómo usar HYPE Framework para Processing con la configuración de Sublime Text 2.
- Revisita hypeframework.org
Vuelve a consultar http://hypeframework.org y mira algunas de las animaciones.
- Descarga el zip de HYPE (instalación)
Descarga el zip de HYPE (instalación)
https://github.com/hype/HYPE_Processing/tree/staging
Contiene muchos ejemplos de animaciones.
- Visita http://praystation.tumblr.com
Visita http://praystation.tumblr.com. Este es mi proyecto personal, en él empleo la mayoría de las clases que enseño aquí.
- Mira este video
https://vimeo.com/85263005/glitch 041/Phantogram/Fall in Love.
¡Tú también puedes hacerlo!
HRotate y Anchor
- Descarga 02_HRotate.zip
Descarga 02_HRotate.zip. Es un adjunto vinculado a la unidad 2, video 1.
- Mira la unidad 2, video 1
Mira la unidad 2, video 1, que cubre los archivos "ex 1" a "ex 3".
- Mira la unidad 2, video 2
Mira la unidad 2, video 2, que cubre los archivos "ex 4" a "ex 7".
- Practica HRotate
Practica usando new HRotate(target, 1) y .anchorAt(H.center) o .anchor(50,-50) con algunos archivos que hicimos en la primera clase.
- Mira la unidad 2, video 3
Mira la unidad 2, video 3, que cubre los archivos "ex 8" a "ex 10".
- Practica el anidado
Practica el anidamiento de un recurso en el otro.
- Practica autoClear
Practica .autoClear(false) y .autoClear(true); que despeja o NO despeja el escenario antes de actualizar la animación de recursos en la pantalla.
- Practica SVG
Carga algunos de tus archivos SVG de la clase anterior junto con un HRotate.
HCanvas
- Descarga 03_HCanvas.zip
Descarga 03_HCanvas.zip. Está vinculado como adjunto a la unidad 3, video 1.
- Mira la unidad 3, video 1
Mira la unidad 3, video 1, que cubre los archivos "ex 1" y "ex 2".
- Mira la unidad 3, video 2
Mira la unidad 3, video 2, que cubre los archivos "ex 3" a "ex 6".
- Repasa HCanvas
Repasa HCanvas, que es un PGraphics extendido.
- Practica HCanvas
Practica usar varios HCanvas como capas y pintar recursos en lienzos únicos. Imagina que son capas de Photoshop o Illustrator.
- Practica .fade()
Practica usar .autoClear(false) y .fade(2); en un HCanvas para quemar los senderos a 0 alpha. Número más pequeño = quemado más lento; número mayor = quemado más rápido
HFollow
- Descarga 04_HFollow.zip
Descarga 04_HFollow.zip. Es un adjunto vinculado a la unidad 4, video 1.
- Mira la unidad 4, video 1
Mira la unidad 4, video 1, que cubre los archivos "ex 1" a "ex 6".
- Practica .ease() y .spring()
Practica usar HFollow, haciendo ajustes a .ease() y .spring() para cambiar la forma en que la animación persigue tus movimientos de ratón.
- Practica "ex 5"
Haz algunas modificaciones a "ex 5" cambiando la foto de muestra; ¡prueba usar un retrato!
HTimer y HRandomTrigger
- Descarga 05_Timers.zip
Descarga 05_Timers.zip. Es un adjunto vinculado a la unidad 5, video 1.
- Mira la unidad 5, video 1
Mira la unidad 5, video 1, que cubre los archivos "HTimer 1" a "HTimer 4".
- Mira la unidad 5, video 2
Mira la unidad 5, video 2, que cubre los archivos "HTimer 5" a "HTimer 7".
- Practica HTimer
Practica quitar .requestAll() y copiar y pegar un HTimer en algunos de los archivos anteriores que hicimos en la primera clase, donde usamos HDrawablePool.
- Recordatorio de HCanvas con HDrawablePool
Cuando usas HCanvas con un HDrawablePool, pool.autoAddtoStage() se convierte en pool.autoParent(HCanvasName)
- Mira la unidad 5, video 3
Mira la unidad 5, video 3, que cubre los archivos "HRandomTrigger 1" y "HRandomTrigger 2".
- Recordatorio de chance con datos de flotación
Chance en HRandomTrigger usa 1f/15. Para obtener más información sobre el tipo de datos de flotación. visita http://docs.oracle.com/javase/tutorial/java/nutsandbolts/datatypes.html1 o http://www.tutorialspoint.com/java/java_basic_datatypes.htm
HTween y HCallback
- Descarga 06_HTween.zip
Descarga 06_HTween.zip. Es un adjunto vinculado a la unidad 6, video 1.
- Mira la unidad 6, video 1
Mira la unidad 6, video 1, que cubre los archivos "ex 1" y "ex 2".
- Practica .ease() y .spring()
Juega con números nuevos para .ease() y .spring() para ver qué tipos de animaciones consigues.
- Mira la unidad 6, video 2
Mira la unidad 6, video 2, que cubre los archivos "ex 3" y "ex 4".
- Practica PVector
Practica PVector, tu nuevo amante (si no lo era ya). http://www.processing.org/reference/PVector.html
- Mira la unidad 6, video 3
Mira la unidad 6, video 3, que cubre el archivo "ex 5_3D".
- Recordatorio de 3D
Cuando usas las coordenadas 3D, tienes que actualizar Processing con el renderizador adecuado, tamaño (640,640,P3D) y también debes informar a HYPE para que cambie a las coordenadas 3D de acuerdo con .use3D(true) http://www.processing.org/tutorials/p3d y http://www.processing.org/reference/camera_.html4
- Mira la unidad 6, video 4
Mira la unidad 6, video 4, que cubre los archivos "ex 6" y "ex 7".
- Practica HTween
Intenta agregar algunos HTween a los archivos que creamos en la primera clase. Tal vez puedas usar un HTween para rotación o alpha, por ejemplo.
- Mira la unidad 6 video 5
Mira la unidad 6, video 5, que cubre el archivo "ex 8".
- Mira la unidad 6, video 6
Mira la unidad 6, video 6, que cubre el archivo "ex 9".
- Mira la unidad 6, video 7
Mira la unidad 6, video 7, que cubre los archivos "ex 10" y "ex 11".
- Mira la unidad 6, video 8
Mira la unidad 6, video 8, que cubre los archivos "ex 12_3D" y "ex 13_3D".
- Practica HBox y pointLight()
Practica HBox y pointLight() como reemplazo de los archivos anteriores con los que puedes haber estado jugando con http://www.processing.org/reference/pointLight_.html
HSwarm
- Descarga 07_HSwarm.zip
Descarga 07_HSwarm.zip. Es un adjunto vinculado a la unidad 7, video 1.
- Mira la unidad 7, video 1
Mira la unidad 7, video 1, que cubre los archivos "ex 1" a "ex 3".
- Practica .speed() .turnEase() .twitch(
Intenta ajustar los valores para .speed() .turnEase() y .twitch() para obtener diferentes variaciones de las animaciones.
- Mira la unidad 7, video 2
Mira la unidad 7, video 2, que cubre los archivos "ex 4" a "ex 7".
- Practica . SVG
Intercambia HRect con algunos de los archivos HShape . SVG que hiciste en la clase anterior como comportamiento de enjambre.
- Practica HPixelColorist
Practica cambiar la foto desde la que se toma el color; ¡prueba usando un retrato!
HOscillator
- Descarga 08_HOscillator.zip
Descarga 08_HOscillator.zip. Es un adjunto vinculado a la unidad 8, video 1.
- Mira la unidad 8, video 1
Mira la unidad 8, video 1, que cubre los archivos "ex 1" a "ex 6".
- Practica ajustar valores
Intenta ajustar los valores de .range() .speed() .freq() y .currentStep() para obtener diferentes variaciones de oscilación.
- Mira la unidad 8, video 2
Mira la unidad 8, video 2, que cubre los archivos "ex 7 SINE", "ex 8 SQUARE", "ex 9 TRIANGLE" y "ex 10 SAW".
- Mira la unidad 8, video 3
Mira la unidad 8, video 3, que cubre los archivos "ex 11" a "ex 15".
- Practica HOscillator
Intenta agregar algunos HOscillator a los archivos que creamos en la primera clase. También, intenta apilar unos cuantos HOscillator diferentes para que la magia sea aún más oscura.
- Mira la unidad 8, video 4
Mira la unidad 8, video 4, que cubre los archivos "ex 16" y "ex 17".
- Usa HImage o HShape
Usa "ex 16" o "ex 17" con HImage o HShape . SVG para obtener este tipo de visuales
http://www.pinterest.com/pin/180495897536926335 o http://www.pinterest.com/praystation/224-sara-blake-sealife
- Mira la unidad 8, video 5
Mira la unidad 8, video 5, que cubre el archivo "ex 18".
- Mira la unidad 8, video 6
Mira la unidad 8, video 6, que cubre el archivo "ex 19_3D".
- Mira la unidad 8, video 7
Mira la unidad 8, video 7, que cubre el archivo "ex 20".
- Mira la unidad 8, video 8
Mira la unidad 8, video 8, que cubre los archivos "ex 21_3D" y "ex 22_3D".
- Mira la unidad 8, video 9
Mira la unidad 8, video 9, que cubre el archivo "ex 23_3D".
Combinación de comportamientos
- Descarga 09_combos.zip
Descarga 09_combos.zip. Es un adjunto vinculado al video 1 de la unidad 9.
- Sugerencia
Prepárate un termo de café que te de energía por cinco horas, luego déjate perseguir por un toro rojo (guiño), y ponte tus pantuflas. Es solo una sugerencia.
- Mira la unidad 9, video 1
Mira la unidad 9, video 1, que cubre los archivos "ex 1" y "ex 2".
- Referencia
Referencia: http://www.processing.org/reference/beginShape_.html y http://www.processing.org/reference/beginShape_.html
- Mira la unidad 9, video 2
Mira la unidad 9, video 2, que cubre el archivo "ex 3".
- Mira la unidad 9, video 3
Mira la unidad 9, video 3, que cubre los archivos "ex 4 MOV" y "ex 5 MOV".
- Mira la unidad 9, video 4
Mira la unidad 9, video 4, que cubre el archivo "ex 6".
- Referencia
Referencia: http://www.processing.org/reference/ArrayList.html
- Mira la unidad 9, video 5
Mira la unidad 9, video 5, que cubre los archivos "ex 7" y "ex 8".
- Mira la unidad 9, video 6
Mira la unidad 9, video 6, que cubre el archivo "ex 9 PNG" a "ex 11 PNG".
- Mira la unidad 9, video 7
Mira la unidad 9, video 7, que cubre el archivo "ex 12".
- Mira la unidad 9, video 8
Mira la unidad 9, video 8, que cubre los archivos "ex 13" y "ex 14".
- Mira la unidad 9, video 9
Mira la unidad 9, video 9, que cubre el archivo "ex 15 SWARM".
- Mira la unidad 9, video 10
Mira la unidad 9, video 10, que cubre los archivos "ex 16" y "ex 17".
- Mira la unidad 9, video 11
Mira la unidad 9, video 11, que cubre el archivo "ex 18".
- Mira la unidad 9, video 12
Mira la unidad 9, video 12, que cubre el archivo "ex 19".
- Mira la unidad 9, video 13
Mira la unidad 9, video 13, que cubre el archivo "ex 20".
Salida
- Descarga 10_output.zip
Descarga 10_output.zip. Es un adjunto vinculado a la unidad 10, video 1.
- Mira la unidad 10, video 1
Mira la unidad 10, video 1, que cubre el archivo "ex 14" de la sección anterior.
- Mira la unidad 10, video 2
Mira la unidad 10, video 2, busca en Google el convertidor de video iSkysoft y Sequimago (solo Apple),
- Pon tu mano aquí
Pon tu mano aquí: http://imgur.com/eNK6Y
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
