Details
Esta clase le enseñará los fundamentos de la creación de contenido interactivo utilizando TouchDesigner.
¡Experimenta cómo hacer que tu portafolio se destaque con diseños experimentales y dinámicos!
¿Qué es 'TouchDesigner' y 'p5js'?
TouchDesigner basado en nodos
TouchDesigner es un lenguaje de programación visual basado en nodos para crear contenidos multimedia interactivos en tiempo real. Es una herramienta que recientemente ha estado en el centro de atención en la industria del diseño debido a su buena compatibilidad con otras herramientas en la práctica.
método de entrada del comando p5js
p5js es un tipo de biblioteca JavaScript de tipo entrada de comando para implementar contenido interactivo en la web/aplicación, y puede operarse fácilmente sin procesos HTML y CSS complicados a través del editor web.
Perfil y cartera del codificador experto Jeonghyo
Más de 30 ejercicios de clase.
Parte 01. Ejercicios de práctica
Usando operadores
Aplicar desenfoque de luz
Aplicando la máquina del tiempo
Aplicar el efecto espejo
Crear movimientos que reaccionen a los sonidos.
Generando partículas a partir de modelos 3D
Sellos de renderizado
Crear gráficos que signifiquen el cursor.
Crear movimientos que reaccionen a los sonidos.
Generando partículas a partir de modelos 3D
Sellos de renderizado
Crear gráficos que signifiquen el cursor.
Parte 02. Ejercicios de arte
Crear un efecto de espejo oscilante
Crear un efecto de partícula espumosa
Crear un efecto de pintura en aerosol.
Crear un personaje que mire el cursor
Obras de arte controladas remotamente
*Estas son imágenes de muestra para una mejor comprensión.
codificador creativo
Jeonghyo
Hola, soy Jeonghyo, un codificador creativo independiente.
Actualmente dirijo un espacio cultural llamado "Nest" y trabajo en un nuevo estilo interactivo que se desvía de las obras de arte multimedia clásicas.
Normalmente trabajo en actuaciones remotas basadas en la web que responden en tiempo real o reinterpretan interfaces existentes para permitir interacciones con personajes e ilustraciones. Participé en proyectos, desde performances de arte contemporáneo hasta exposiciones de arte multimedia.
Muchas personas renuncian a sus sueños de crear arte multimedia o obras de arte interactivas debido a la amenaza inminente de los lenguajes de programación profesionales.
Entonces, en esta clase, hice todo lo posible para reducir la barrera de la codificación para los diseñadores. Espero que caigas en el encanto del arte interactivo, que no sólo es innovador sino también eficiente con sus infinitas posibilidades.

Codificador creativo, Jeonghyo
[Actual]
Programador independiente
Representante de Nest,
un espacio cultural dedicado a la codificación creativa
Proyectos y premios reconocibles
[Proyectos involucrados]
Vídeo de la campaña del Proyecto Cultural Sulwhasoo 2022
Juego web DMZ Adventure <Tierra sin nombre> 2021
Sitio web de promoción All-Star de Converse 2021
Sitio web del Simposio Mundial de Guión 2017 2017
[Exposición]
Reportaje especial del Museo de Arquitectura de Kimchungup
[Arquitectura de medios: el camino de Kim Chung Up hacia el arte arquitectónico]
Exposición del Grupo Kote <Flujo Continuo>
[Actuación]
Actuación de clausura de JSCONF COREA 2020
<TRACERS 2.5> Performance de Arte Contemporáneo
Búnker de arte de Bucheon B39
Aspectos destacados de la clase
Comparación y análisis de herramientas de codificación creativa.
Aprenda codificación basada en nodos y basada en comandos para crear obras de arte en movimiento en tiempo real. Compararás y analizarás las características de cada método y desarrollarás el ojo para elegir el que se adapta al medio de tu elección.
Fundamentos de interacción e ideas.
Aprenda múltiples ejemplos de procesamiento de datos de entrada, como mouse, teclados, sonidos, videos de cámara web y valores de funciones, para mejorar su comprensión de los fundamentos de la interacción. Luego, practicaremos el pensamiento flexible para convertir datos en contenido.
Crea 5 obras de arte interactivas con más de 30 mini ejercicios.
Podrás fortalecer tu capacidad para crear contenido basado en tus ideas con más de 30 mini ejercicios que incluso los principiantes podrán seguir fácilmente. Durante este proceso, puedes completar cinco obras de arte interactivas propias.
Detalles de la clase
Aprenderás
-
TD - Comprender el proceso de programación de nodos a través del concepto de entrada/salidaConozca el proceso básico de programación de nodos con el concepto de entrada y salida, y conozca las características que se conectan a cada tipo de datos. -
TD - Aprendiendo los métodos de expresión en un espacio 2DAprenda a controlar la cantidad deseada de efecto en el rango entre 0 y 1 e incluso expresarlo en un área bidimensional a través de Luma Map. -
TD - Renderizando tu arte 3DConozca los tres componentes del renderizado 3D: el objeto, la cámara y la fuente de luz, y comprenda su relación con los gráficos 3D para reflejar la sensación que desea en los resultados renderizados en 2D.
-
p5js: comprensión de datos numéricos a través de formas básicasIngrese datos numéricos para representar formas básicas con píxeles en 2D y aprenda los sentidos numéricos necesarios para las obras de arte interactivas. -
p5js: creación de una animación especificando valoresPresente una representación visual de los cambios que ocurren con el tiempo o el valor de los datos del dispositivo de entrada y comprenda cómo se relacionan con las interacciones y la animación. -
p5js: desde la representación de contenidos de comunicación remota hasta su usoConozca los métodos de representación de la comunicación remota en cada herramienta y la interfaz adecuada y los formularios de interacción necesarios para utilizarlos.
- Unlimited Access
- Best Price
Buy now, get unlimited access.
12/31 (Sat) (UTC-7) Special offer ends soon.
This special offer ends soon.
Buy now and save!
plan de estudios
Mirada en profundidad
SECCIÓN 01. Primeros pasos con Touchdesigner: gráficos 2D e interacción
01. Orientación: Diversas Expresiones y Medios de Trabajo Interactivo
- Presentación del instructor y presentación del portafolio.
- Tipos y ejemplos de interacciones según diversos medios.
- Cómo elegir la herramienta adecuada para su situación
02. TouchDesigner: interfaz y codificación de nodos
- Explicación de la interfaz de usuario de TouchDesigner
- Cómo operar el mouse y las teclas de método abreviado
- Nodo - Explicación de Operadores y Componentes
- Conexión de archivos de película en/nivel/operadores de transformación
03. TouchDesigner: uso del operador ARRIBA
- Crear un vídeo con el operador compuesto
- Conceptos básicos del operador Rectángulo/Círculo y las opciones de operación compuestas
- Enmascaramiento de vídeos con Luma Map
04. TouchDesigner: Interacciones con una cámara web
- Usando Luma Blur Operador y Luma Map
- Usando el operador de desplazamiento y el mapa de Luma
- Usando Time Machine / Texture 3D Operador y Luma Map
05. TouchDesigner: cree su obra de arte usando el operador TOP
- 3 componentes para renderizar escenas 3D
- Hacer una esfera oscilante
- Aplicar Luma Blur / Displace para crear efectos
- Crear diferentes efectos cambiando los valores de los parámetros.
SECCIÓN 02. Uso de TouchDesigner: gráficos 3D e interacción
06. TouchDesigner: uso del operador SOP
- Conceptos básicos de varios operadores y vértices de formas 3D.
- Aplicando geometría
- Usando cámara/luz
- Operador Mat y textura de renderizado
07. TouchDesigner: uso del operador CHOP y entrada de sonido
- Crear valores cambiantes con el operador de velocidad
- Creando valores recurrentes con el operador LFO
- Usar entrada de sonido para cambiar gráficos
08. TouchDesigner: creación de ilustraciones utilizando el operador SOP
- Usando el operador de partículas
- Duplicar un objeto con instancias
- Crear efectos de partículas en forma de modelo 3D.
- Crear diferentes efectos cambiando los valores de los parámetros.
09. TouchDesigner: Comunicación con el operador DAT
- Comunicación mediante el operador Touch In-Out
- Comunicarse con diferentes ordenadores conectados al mismo Wifi
- Las ventajas y desventajas de los diferentes métodos de comunicación.
SECCIÓN 03. Fundamentos de p5js: crear ilustraciones interactivas con formas básicas
10. P5js: Introducción a la interfaz y la codificación del editor web
- Introducción a p5js
- Explicación de la interfaz del editor web
- Cómo crear un lienzo, pintar el color de fondo con la función de fondo e ingresar valores de color
11. p5js: Dibujar formas básicas
- Dibujar un rectángulo y un círculo con la función rect/circle
- Agregar estilo a las formas con la función de relleno/trazo
- Fijar vértices y dibujar un punto/línea/triángulo
- Capas de formas usando push/pop/translate
12. p5js: llamadas a funciones e interacción
- Llamada a función relacionada con el ratón e interacción.
- Llamada de función relacionada con el teclado e interacción.
- Comprender las llamadas a funciones de dibujo y crear animaciones.
- Usando variables del sistema frameCount / mouseX / mouseY
13. p5js: creación de ilustraciones interactivas
- Creando un gráfico que cambia constantemente con frameCount
- Crear un gráfico que siga el cursor
- Ideas interactivas y cómo hacer una buena interacción.
SECCIÓN 04. P5js intermedio: valores cambiantes e interacciones
14. p5js: variables y declaraciones condicionales
- Almacenamiento de valores que cambian con la interacción.
- Cree una representación visual de valores cambiantes con gráficos.
- Realizar cambios dinámicos con declaraciones condicionales
15. p5js: Creación de gráficos que cambian según el estado
- Diseñar gráficos que cambien gradualmente según las condiciones.
- Establecer un límite en el valor máximo
- Repita la interacción mediante la inicialización de valores.
16. p5js: interacciones complejas utilizando vectores
- Interacción usando la función dist
- El concepto de vector y la función createVector.
- Cálculos simples con Vector
- Limitar el movimiento mediante el método de límite.
17. p5js: creación de ilustraciones interactivas
- Diseñar el rostro de un personaje.
- Crear movimiento que sigue al cursor
- Crear una apariencia tridimensional ajustando la gama de piezas
- Realizar cambios adicionales para cada interacción
SECCIÓN 05. Obras de arte interactivas mediante control remoto
18. Representar un servidor web
- Introducción a la falla
- Subir su proyecto p5js a una página web
- Aplique la comunicación según la interacción.
- Cambie la frecuencia de los cambios gráficos dependiendo de los valores de comunicación.
19. Crea una aplicación web con p5js
- Representando un botón
- Controles deslizantes de renderizado
- Interactuando con un proyecto p5js con un controlador
20. Controlar TouchDesigner usando p5js Mobile
- Conexión del operador socket.io a la obra de arte de TouchDesigner
- Aplique diferentes interacciones dependiendo de los parámetros.
- Ideas y ejemplos de interacción por control remoto
Entrevista con
Codificador creativo, Jeonghyo
Cuando se trabaja en gráficos interactivos o en movimiento, modularizo las reglas que crean gráficos y movimiento. Esos módulos se pueden modificar en tiempo real o combinar con otros módulos. Por lo tanto, creo que mi punto fuerte reside en la forma en que trabajo, ya que puedo representar varias aplicaciones con un conjunto de reglas y, por lo tanto, puedo producir muchos resultados dinámicos en un corto período de tiempo. .
En esta clase, los estudiantes combinarán varios módulos funcionales para representar la forma, el movimiento y la interacción a través de diferentes ejercicios del plan de estudios. También aprenderá a armar muchos módulos y controlar sus configuraciones para representar gráficos y movimiento en varios estilos. En el ejercicio de partículas, por ejemplo, ajustando la dirección del valor gravitacional y la magnitud del valor de turbulencia se podrán obtener texturas contrastantes como llamas ascendentes y grava que se derrama.
Existe una demanda creciente de gráficos no convencionales de alta dimensión que no se pueden lograr con las herramientas de diseño tradicionales. El público se ha acostumbrado a los medios interactivos debido al acceso frecuente desde los museos de arte y la publicidad. Así que no pienses en el diseño interactivo como un lenguaje de programación difícil y se dé por vencido. Espero que experimentes fácilmente varias obras de arte interactivas a través de esta clase.
Programas requeridos
Esta clase utiliza TouchDesigner (2021.16410 NO COMERCIAL) y p5js (1.4.0). Para una experiencia de aprendizaje óptima, instale la misma versión del programa.
*También puedes tomar la clase usando versiones lanzadas después de TouchDesigner (2021.10330 NO COMERCIAL).
*También puedes tomar la clase usando versiones posteriores a p5js (0.9.0).
*TouchDesigner requiere una compra adicional para funcionar con una resolución de 1280x1280px o superior.
*Estos programas y/o materiales no se proporcionarán con la conferencia.
Clase recomendada
¿Te gusta esta clase?
¡Entonces mira esto!
