Skip to content


CreativeCoder,Jeonghyo_정효 Class Intro

Complete Beginner's Guide to Interactive Design

Creative Coder, Jeonghyo
  • CodingForBeginners
  • TouchDesigner
  • InteractiveDesign
  • AudioKOR
  • SubENG
  • Total 20 videos
    Get exclusive tips and insights from Jeonghyo throughout 20 online classes.
  • Beginner Level
    Requires a basic understanding of Touch Designer
    • Beginner Level
    • Mar 31 (PST) Special offer ends soon.
    • USD 153.00 USD 350.00 56% off

CreativeCoder,Jeonghyo_정효 Class Description

클래스 소개
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.

Coloso Jeonghyo Complete Beginner's Guide to Interactive Design

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.


Coloso Class Breakdown Details 1

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

Coloso Class Breakdown Details 2
Video Details

Audio: Korean
Subtitles: English

Coloso Class Breakdown Details 3
Software Required

*Free for resolutions up to 1280x1280px

*p5js: Free

Coloso Class Breakdown Details 4

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

Expert Coder
Jeonghyo's Profile & Portfolio

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.

Background images
Coloso Jeonghyo
Creative Coder,

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

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

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

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


30+ Class Exercises

Part 01. Practice Exercises

Jeonghyo Class exercises

Using Operators

Jeonghyo Class exercises

Applying Luma Blur

Jeonghyo Class exercises

Applying Time Machine

Jeonghyo Class exercises

Applying the Mirror Effect

Jeonghyo Class exercises

Creating Motions That
React to Sounds

Jeonghyo Class exercises

Generating Particles from
3D Models

Jeonghyo Class exercises

Rendering Stamps

Jeonghyo Class exercises

Creating Graphics That Follow Your Cursor

Jeonghyo Class exercises

Creating Motions That
React to Sounds

Jeonghyo Class exercises

Generating Particles from
3D Models

Jeonghyo Class exercises

Rendering Stamps

Jeonghyo Class exercises

Creating Graphics That Follow Your Cursor

Part 02. Artwork Exercises

Jeonghyo Class exercises

Creating a Swaying Mirror Effect

Jeonghyo Class exercises

Creating a Foamy Particle Effect

Jeonghyo Class exercises

Creating a Spray Paint Effect

Jeonghyo Class exercises

Creating a Character That
Looks at Your Cursor

Jeonghyo Class exercises

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.

Coloso Jeonghyo Introduction

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.

Coloso Jeonghyo Introduction

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.

Coloso Jeonghyo Introduction

Class Details
You'll Learn

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

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


In-depth Look

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

01. Orientation: Various Expressions and Media of Interactive Work

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

02. TouchDesigner: Interface and Node Coding

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

03. TouchDesigner: Using the TOP Operator

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

04. TouchDesigner: Interactions with a Webcam

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

05. TouchDesigner: Create Your Artwork Using the TOP Operator

  1. 3 Components for rendering 3D scenes
  2. Making a Swaying Sphere
  3. Applying Luma Blur / Displace to create effects
  4. Creating different effects by changing parameter values
SECTION 02. Using TouchDesigner: 3D Graphics and Interaction

06. TouchDesigner: Using the SOP Operator

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

07. TouchDesigner: Using the CHOP Operator & Sound Input

  1. Creating changing values with the Speed Operator
  2. Creating recurring values with the LFO Operator
  3. Using sound input to change graphics

08. TouchDesigner: Creating Artwork Using the SOP Operator

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

09. TouchDesigner: Communication With the DAT Operator

  1. Communicating by using the Touch In-Out Operator
  2. Communicating with different computers connected to the same Wifi
  3. 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

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

11. p5js: Drawing Basic Shapes

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

12. p5js: Function Calls and Interaction

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

13. p5js: Creating Interactive Artwork

  1. Creating a graphic that constantly changes with frameCount
  2. Creating a graphic that follows your cursor
  3. Interactive ideas and how to make a good interaction
SECTION 04. Intermediate p5js: Changing Values and Interactions

14. p5js: Variables and Conditional Statements

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

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

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

16. p5js: Complex Interactions Using Vector

  1. Interaction using dist function
  2. The concept of vector and createVector function
  3. Simple calculations with Vector
  4. Limiting movement using the limit method

17. p5js: Creating Interactive Artwork

  1. Designing the face of a character
  2. Creating motion that follows the cursor
  3. Creating a three-dimensional look by adjusting the range of parts
  4. Make additional changes for each interaction
SECTION 05. Interactive Artwork Using Remote Control

18. Rendering a Web Server

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

19. Create a Web App with p5js

  1. Rendering a button
  2. Rendering sliders
  3. Interacting with a p5js project with a controller

20. TouchDesigner Control Using p5js Mobile

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

Interview with
Creative Coder, Jeonghyo

Background images
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.

TouchDesigner p5js

Recommended Classes
Like this class?
Then check these out!

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 ( 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
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:

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