Creative Coder, Jeonghyo

Coloso Jeonghyo Complete Beginner's Guide to Interactive Design

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

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
Unlimited views

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.

Buy now, get unlimited access.
The special offer ends this Friday

This special offer ends soon.
Buy now and save more!

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]
This course will open on March 27, 2023 (PST)
*The duration of the class discount may change without prior notice.
*Please ensure to fill in your email address correctly, as the payment and class information will be sent to the registered email address.

[How do refunds work?]
If you would like to request a refund because a Class did not meet your expectations, please contact us for the refund (refund@coloso.us) Also, for more detailed information, please review our Refund Policy.

1. Earlybird Class
If you purchase an Earlybird Class and request a refund before the class videos are available, you are eligible to receive a complete refund or the amount paid by you through the Coloso Platform.

2. Purchasing a "Now Available" Class
Up to 14 days after purchase: If you purchase a "Now Available" class and request a refund, you may receive a complete or near-complete refund depending on refund eligibility. Please refer to the Refund Eligibility section below to see if you are eligible for a refund. Please refer to our Refund Policy for more information on the refundable amount.

3. Refund Eligibility
To submit a valid refund request and receive reimbursement for your purchase, you are required to meet each and every one of the following conditions:
   (a) you must be a registered User on the Coloso Platform;
   (b) you must be the User that enrolled in the Class;
   (c) you must request the refund in writing to our support center within 14 days of purchase, and you must provide us the requested information, including but not limited to the information about your Account, Class, and the circumstances of the refund request;
   (d) you must have consumed less than three clips of the Class
   (e) you must not have downloaded any of our class materials

4. Additional reasons for refund denial
You may not be eligible for any refund in cases where we believe there is refund abuse or fraudulent behavior, including but not limited to the following circumstances where:
   (a) a user has requested multiple refunds for a single course
   (b) a user has asked for excessive refunds
   (c) we detected fraudulent behavior(s) from a User
   (d) an account has been reported, banned, or deactivated due to a violation of our Terms.

5. We limit the number of devices that can access an account to 3 each.
Device registration occurs upon accessing a class video. If you wish to change the device you have registered to your account (i.e. you are using a new mobile device), please contact us at help@coloso.us.
Changes to device registration can happen only once a year. (Your device is registered to your account after you sign in to the account with your device)

Questions about refund?
Please email us here: help@coloso.us

Would like to request a refund?
Pleaes email us here: refund@coloso.us