CreativeCoder,Jeonghyo_정효 Details
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?

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
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/outputLearn 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 spaceLearn 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 artLearn 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 shapesEnter 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 valuesRender 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 usageLearn the methods of rendering remote communication in each tool and the appropriate interface and interaction forms required to use them.
- Unlimited Access
- Best Price
Buy now, get unlimited access.
(자동 구성) 가격이 인상됩니다.
This special offer ends soon.
Buy now and save!
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

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