Search Input

Complete Beginner's Guide to Interactive Design

Creative Coder, Jeonghyo‌
‌
‌
‌
‌

Class Details

‌
‌
‌

CreativeCoder,Jeonghyo_정효 Details

Intro

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.

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.

Class
Breakdown

Coloso Class Breakdown Details 1
Content

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

Touchdesigner
*Free for resolutions up to 1280x1280px

JavaScript
*p5js: Free

Coloso Class Breakdown Details 4
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

  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
  • Coloso Jeonghyo Complete Beginner's Guide to Interactive Design
Instructor

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.

Background images
Coloso Jeonghyo
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

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.

Highlights

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

  • Coloso Graphic Design Class Details
    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.
  • Coloso Graphic Design Class Details
    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.
  • Coloso Graphic Design Class Details
    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.
  • Coloso Graphic Design Class Details
    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.
  • Coloso Graphic Design Class Details
    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.
  • Coloso Graphic Design Class Details
    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.
  • Unlimited Access
  • Best Price

Buy now, get unlimited access.
(자동 구성) 가격이 인상됩니다.

This special offer ends soon.
Buy now and save!

지금이 최저가!
Curriculum

Curriculum
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 socket.io 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

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.