Brand: Coloso.
Availability: InStock

Class Intro
Creative Coder, Jeonghyo

Want to create an interactive design
that boasts an endless range of applications from
websites to exhibitions, videos, and graphic designs?

Coloso Jeonghyo Complete Beginner's Guide to Interactive Design

Use TouchDesigner which allows you to
bring your imagination to life with no bounds.

This class will teach you the fundamentals of
creating interactive content using TouchDesigner.

TouchDesigner can be interpreted intuitively,
even by beginners and is highly compatible with
various tools, such as Unreal Engine and the Web,
making it an emerging powerhouse in the industry.

Experience how to make your portfolio stand out
with experimental and dynamic designs!

What is 'TouchDesigner' and 'p5js'?

Node-based TouchDesigner

TouchDesigner is a node-based visual programming language for creating real-time interactive multimedia contents. It is a tool that has recently been in the limelight in the design industry because of its good compatibility with other tools in practice.

p5js command input method

p5js is a type of command-input type JavaScript library for implementing interactive content on the web/app, and can be easily operated without complicated HTML and css processes through the web editor.

Class
Breakdown

Content

Length: 20 videos
(Duration 10h 30m)
Difficulty: Beginner Level

Video Details

Audio: Korean
Subtitles: English

Software Required

Touchdesigner
*Free for resolutions up to 1280x1280px

JavaScript
*p5js: Free

Perks

Practice example 15 toe, 15 url
Artwork example 3 toe, 3 url
*toe-TouchDesigner
project file
*url- p5js project address

Expert Coder
Jeonghyo's Profile & Portfolio

Jeonghyo
Creative Coder

Hello, I'm Jeonghyo, a freelance Creative Coder.

I'm currently running a cultural space called "Nest"
and working on a new interactive style
that deviates from classic media artworks.

I usually work on Web-based,
remote performances that respond in real-time
or reinterpret existing interfaces to enable interactions
with characters and illustrations. I participated in projects,
from contemporary art performances to media art exhibitions.

Many people give up on their dreams of creating media art
or interactive artwork because of the looming threat
of professional programming languages.

So, in this class, I tried my best to
lower the barrier of coding for designers.
I hope you'll fall into the charm of interactive art,
which is not only innovative but also efficient
with its endless possibilities.

Creative Coder,
Jeonghyo

[Current]
Freelance Programmer
Representative of Nest,
a cultural space dedicated to creative coding

Recognizable
Projects & Awards

[Projects Involved]
Sulwhasoo Culture Project Campaign Video 2022
DMZ Adventure Web Game <De-named Land> 2021
Converse All-Star Promotion Website 2021
World Script Symposia 2017 Website 2017

[Exhibition]
Kimchungup Architecture Museum Special Feature
[Media Architecture: Kim Chung Up's Path to Architectural Art]
Kote Group Exhibition <Continuous Flow>

[Performance]
JSCONF KOREA 2020 Closing Performance
<TRACERS 2.5> Contemporary Art Performance
Bucheon Art Bunker B39

Instagram

30+ Class Exercises

Part 01. Practice Exercises

Using Operators

Applying Luma Blur

Applying Time Machine

Applying the Mirror Effect

Creating Motions That
React to Sounds

Generating Particles from
3D Models

Rendering Stamps

Creating Graphics That Follow Your Cursor

Creating Motions That
React to Sounds

Generating Particles from
3D Models

Rendering Stamps

Creating Graphics That Follow Your Cursor

Part 02. Artwork Exercises

Creating a Swaying Mirror Effect

Creating a Foamy Particle Effect

Creating a Spray Paint Effect

Creating a Character That
Looks at Your Cursor

Remote-controlled Artwork

*These are sample images for better understanding.

Class Highlights

Comparing and Analyzing
Creative Coding Tools

Learn both node-based and command input-based coding for creating real-time moving artwork. You will compare and analyze the characteristics of each method and develop an eye to choose the one that suits the media of your choice.

Fundamentals of
Interaction and Ideas

Learn multiple examples of processing input data, such as a mouse, keyboards, sounds, webcam videos, and function values, to improve your understanding of interaction fundamentals. Afterward, we will practice flexible thinking to switch data into content.

Create 5 Interactive Artworks
With 30+ Mini Exercises

You will be able to strengthen your ability to create content based on your ideas with more than 30 mini-exercises that even beginners will be able to follow easily. During this process, you can complete five interactive artworks of your own.

Class Details
You'll Learn

TD - Understanding the process of node programming through the concept of input/output

Learn the basic process of node programming with the concept of input and output, and learn the characteristics that connect to each data type.
TD - Learning the methods of expression in a 2D space

Learn to control the desired amount of effect in the range between 0 and 1 and even express it in a two-dimensional area through Luma Map.
TD - Rendering your 3D art

Learn the three components for 3D rendering: the object, the camera, and the light source, and understand their relationship with 3D graphics to reflect the feeling you want in your rendered 2D results.

p5js - Understanding numeric data through basic shapes

Enter numerical data to render basic shapes with pixels in 2D and learn the numerical senses required for interactive artwork.
p5js - Creating an animation by specifying values

Render a visual representation of the changes that occur with time or the data value of the input device and understand how they relate to interactions and animation.
p5js - From remote communication content rendering to its usage

Learn the methods of rendering remote communication in each tool and the appropriate interface and interaction forms required to use them.

Curriculum
In-depth Look

SECTION 01. Getting Started with Touchdesigner: 2D Graphics and Interaction

01. Orientation: Various Expressions and Media of Interactive Work

Instructor introduction and portfolio introduction
Types and examples of interactions depending on various media
How to choose the right tool for your situation

02. TouchDesigner: Interface and Node Coding

Explanation of TouchDesigner UI
How to operate your mouse and shortcut keys
Node - Explanation of Operators and Components
Connecting Movie File In / Level / Transform Operators

03. TouchDesigner: Using the TOP Operator

Creating a video with the Composite Operator
Basics of the Rectangle / Circle Operator and the Composite Operation options
Masking videos with Luma Map

04. TouchDesigner: Interactions with a Webcam

Using Luma Blur Operator and Luma Map
Using Displace Operator and Luma Map
Using Time machine / Texture 3D Operator and Luma Map

05. TouchDesigner: Create Your Artwork Using the TOP Operator

3 Components for rendering 3D scenes
Making a Swaying Sphere
Applying Luma Blur / Displace to create effects
Creating different effects by changing parameter values

SECTION 02. Using TouchDesigner: 3D Graphics and Interaction

06. TouchDesigner: Using the SOP Operator

Basics of various 3D shape operators and vertices
Applying Geometry
Using Camera / Light
Mat Operator and rendering texture

07. TouchDesigner: Using the CHOP Operator & Sound Input

Creating changing values with the Speed Operator
Creating recurring values with the LFO Operator
Using sound input to change graphics

08. TouchDesigner: Creating Artwork Using the SOP Operator

Using the Particle Operator
Duplicating an object with Instancing
Creating particle effects in the shape of a 3D model
Creating different effects by changing parameter values

09. TouchDesigner: Communication With the DAT Operator

Communicating by using the Touch In-Out Operator
Communicating with different computers connected to the same Wifi
The advantages and disadvantages of different communication methods

SECTION 03. p5js Fundamentals: Create Interactive Artwork with Basic Shapes

10. P5js: Getting Started With the Web Editor Interface and Coding

Introduction to p5js
Explanation of Web Editor interface
How to create a canvas, paint the background color with the background function, and enter color values

11. p5js: Drawing Basic Shapes

Drawing a rectangle and a circle with the rect/circle function
Adding style to shapes with the fill/stroke function
Fixing vertices and drawing a point/line/triangle
Layering shapes using push/pop/translate

12. p5js: Function Calls and Interaction

Function call related to the mouse and interacting
Function call related to the keyboard and interacting
Understanding draw function calls and creating animations
Using frameCount / mouseX / mouseY system variables

13. p5js: Creating Interactive Artwork

Creating a graphic that constantly changes with frameCount
Creating a graphic that follows your cursor
Interactive ideas and how to make a good interaction

SECTION 04. Intermediate p5js: Changing Values and Interactions

14. p5js: Variables and Conditional Statements

Storing values that change with the interaction
Creating a visual representation of changing values with graphics
Making dynamic changes with conditional statements

15. p5js: Creating graphics that change according to the state

Designing graphics that gradually change with conditions
Setting a limit on the maximum value
Repeating the interaction through value initialization

16. p5js: Complex Interactions Using Vector

Interaction using dist function
The concept of vector and createVector function
Simple calculations with Vector
Limiting movement using the limit method

17. p5js: Creating Interactive Artwork

Designing the face of a character
Creating motion that follows the cursor
Creating a three-dimensional look by adjusting the range of parts
Make additional changes for each interaction

SECTION 05. Interactive Artwork Using Remote Control

18. Rendering a Web Server

Introduction to Glitch
Uploading your p5js project onto a web page
Applying communication according to interaction
Changing the frequency of the graphic changes depending on the communication values

19. Create a Web App with p5js

Rendering a button
Rendering sliders
Interacting with a p5js project with a controller

20. TouchDesigner Control Using p5js Mobile

Connecting the socket.io operator to the TouchDesigner artwork
Applying different interactions depending on parameters
Remote-controlled interaction ideas and examples

Interview with
Creative Coder, Jeonghyo

Question. 01
What are your strengths when working as a Creative Coder?

When I work on interactive or motion graphics, I modularize the rules that create graphics and motion. Those modules can be modified in real-time or combined with other modules. Therefore, I think my strength lies in the way I work, as I can render various applications with one set of rules and am thus able to produce many dynamic results in a short amount of time. .

Question. 02
How will your strengths be incorporated into this class?

In this class, students will combine various functional modules for rendering form, movement, and interaction through different exercises in the curriculum. You will also learn to put together many modules and control their settings to render graphics and motion in various styles. In the particle exercise, for example, adjusting the direction of the gravitational value and the magnitude of the turbulence value will make both contrasting textures like rising flames and pouring gravel possible.

Question. 03
What do you think about the prospect of interactive design?

There is a growing demand for high-dimensional, unconventional graphics that cannot be achieved with traditional design tools. The public has become accustomed to interactive media due to frequent access from art museums and advertising. So don't think of interactive design as a difficult programming language and give up. I hope you will easily experience various interactive artworks through this class.

Required Programs

This class uses TouchDesigner (2021.16410 NON-COMMERCIAL) and p5js (1.4.0). For an optimal learning experience, please install the same version of the program.

*You can also take the class using versions released after TouchDesigner (2021.10330 NON-COMMERCIAL).
*You can also take the class using versions released after p5js (0.9.0).
*TouchDesigner requires an additional purchase to work with a resolution of 1280x1280px or higher.
*These programs and/or materials will not be provided with the lecture.

Recommended Classes
Like this class?
Then check these out!

[IMPORTANT NOTICE]

*Please note that the information on this page is subject to change without prior notice.
*Would you like to learn more about our refund policy? Please check here.
*Please check our FAQ for Copyright and Proprietary Rights, User-Generated Content, Security, and Violation information.

Class Details

[TIMEATTACK]CreativeCoder,Jeonghyo_정효 Details