Let’s Practice What You Learned!
🔗 Code Example: Text Distortion
🔗 References:
🔗 Timestamps:
0:10 Create a ring of circles
3:10 Create multiple rings of circles with varying radii
6:30 Create a linear distortion effect
8:50 Create an oscillated distortion effect
13:46 Add image onto sketch
14:57 Map pixel data from the image onto the rings
20:42 Repeat pixel data horizontally and vertically
25:48 Make it pretty
🔗 Code Example: Bloom Kinetic Clock
🔗 Inspiration:
🔗 References:
🔗 Timestamps:
0:29 Two Methods
0:59 Method 1: Crank-slider system
08:30 Method 2: Oscillation
14:13 Create a flower pattern
21:51 Integrate flower patterns with clock
24:09 Add time using built-in functions
32:56 Make it pretty (cherry blossoms inspired!)
🔗 Code Example:
🔗 References:
🔗 Timestamps:
0:32 Explain how scale() works
7:19 Upload and resize image
9:51 Slice image into regions and store inside a 2d array
13:27 Use scale() to create the distorted effect
17:30 Create an option to toggle between modes
19:13 Surprised mode! (Make it interactive)
🔗 Code Example: Sleep Tracker (Data Visualization)
🔗 References:
🔗 Timestamps:
0:10 Prep data
0:42 Upload data onto sketch
1:54 Extract data using p5.Table class
7:58 Convert sleep and wake times into corresponding column indices
15:27 Visualize data inside a ring of ellipses
21:27 Create a Ring class
29:09 Add new colors
30:53 Make it interactive
35:58 Add data labels
🔗 Code Example: Interactive Clock Cursor Effect
🔗 Inspiration:
🔗 References:
🔗 Timestamps:
0:30 Draw a ring of text string
6:08 Add movement to the ring using lerp()
12:04 Add date and time information as the text strings
24:09 Add the clock hands
37:58: Add colors
🔗 Code Example: Interactive Truchet Tiles
🔗 Inspiration:
Coding Tutorial:
🔗 References:
🔗 Timestamps:
0:53 Create a Truchet tile
8:27 Create a Tile class
11:31 Create a grid of tile objects
14:56 Add easing functions
20:07 Make it interact to mouse's location
22:56 Make it pretty
🔗 Code Example: Reaction Diffusion
🔗 References:
The Chemical Basis of Morphogenesis paper (PDF) by Alan Turing (1952)
The Coding Train’s video: Coding Challenge #13: Reaction Diffusion Algorithm in p5.js
🔗 Footage Credits:
🔗 Timestamps:
1:21 Approach
3:56 Create two 3D arrays to store A and B values
7:42 Draw grid and color it based on values from arrays
10:42 Implement the Gray-Scott model
14:14 Write laplace function
19:52 Fix out-of-bound error with modulo expression (%)
24:24 Make it interactive (adding chemical by pressing mouse)
🔗 Code Example: Pixel Sorting
🔗 Inspiration:
Kim Asendorf
🔗 References:
🔗 Timestamps:
0:46 Explain pixel sorting logic
1:48 Preload and resize image
4:50 loadPixels() vs p5.Image.loadPixels()
8:41 Explain how to change pixel values using updatePixels()
11:09 Write a function to sort pixels by column
22:50 Change to dark mode (brightness is less than threshold)
23:24 Write a function to sort pixels by row
26:30 Animate the sorting action
Start with our Creative Coding Math toolkit! Check your email for a link to download.
🔗 Code Example: Collisions Without a Physics Library!
🔗 References:
p5.js 2.0
matter.js playlist
Quadtree Tutorial
The Coding Train’s Collision Without a Physics Library Tutorial
🔗 Resources:
3Blue1Brown’s video on Dot Products
🔗 Timestamps:
01:23 Approach
04:07 Use p5.js 2.0 and create a bouncing ball
08:08 Create a Ball class
17:17 Collide function - Step 1: Check if balls collide & Step 2: Correct their positions
24:08 Collide function - Step 3: Calculate new velocities
31:24 Create multiple Ball objects
34:39 Write a sleep method when ball is at rest (pushing effect)
38:27 Draw eyes and mouth and add colors!
46:18 Remove objects that are off the screen
50:50 Add some typography
57:22 Vary text weights for animation