English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 86 Lessons (7h 17m) | 1.51 GB
Break down concepts such as trigonometry, algebra, randomness and noise in a visual way to add layers of interactivity into your projects.
Math… for creatives? Isn’t that like mixing cheese and chocolate? Maybe in the past but as part of a modern creative’s workflow, mathematics can be an invaluable tool to add layers of interactivity into your work.
This isn’t your traditional math class. This is targeted towards people who think visually and want to understand how to mould math to their advantage.
If you work in design, motion or animation you will learn how to break down concepts such as trigonometry, algebra, randomness and noise in a visual, easy-to-understand way that you can add to your own projects.
What you’ll learn
- What tools are available to creatives and how we would pick the right tool for the right job
- Using trigonometry to draw shapes and waves, calculate distances and point at things
- The math behind color and how we can use randomess to create constantly changing sites
- What is organic noise and how can we use it to create natural randomness
- How to think about easings, timings and speeds
- How to use physics within math to create gravity and accelerations
Table of Contents
1 Welcome to Math for Creatives!
2 Welcome to Wall Ball
3 Setting up our project
4 Drawing on a page with P5
5 Styling our canvas
6 Resizing the canvas on window resize
7 Making our own state
8 Adding automated movement
9 Adding boundaries to the page
10 Fixing our boundaries
11 Adding sound
12 Introducing vectors
13 Clicking to add randomness
14 P5.js vs Processing
15 Welcome to Flower Brush
16 Setting up our project
17 Making a class for our brush items
18 Setting up a list of flowers
19 Adding a random hue
20 Controlling our hue
21 Variation: fading and resizing
22 Adding a reset on mouse release
23 The geometry of circles
24 Adding a for loop
25 Adding petals to each flower
26 Using P5 vectors to do our heavy lifting
27 Adding rotation and rotation speed
28 Final tweaks
29 Saving an image on key press
30 Welcome to Blobbo
31 Setting up our project
32 Adding a for loop
33 Making a sine wave
34 Adding movement to our sine wave
35 Additive waves
36 Making a custom shape
37 Making a circle from a list of points
38 Adding waves to each points radius
39 Adding a wave speed
40 Welcome to Nice Colors
41 Setting up our project
42 Setting up our app.js file
43 Adding changes to our code
44 Adding randomness on page load
45 Adding randomness on button click
46 Welcome to Pink Noise
47 Project Setup
48 Setting up randomness
49 Adding noise and noise levels
50 Noise space
51 Hue change
52 Drawing per pixel
53 Increasing our hue density
54 Applying our density in code
55 Using lerpColor with our density
56 Adding in fade in and out colors
57 P5.js vs Processing
58 Welcome to Flying Letters
59 Project setup
60 Making a list of objects
61 Adding speed and randomness
62 Gravity and acceleration
63 Adding friction and elasticity
64 Adding text to our page
65 Typing on key press
66 Adding a choices list to pick from
67 Adding a timeline and alpha channel
68 Adding easing
69 Varation: images instead of text
70 Welcome to Snake!
71 Setting up our project
72 03-adding-a-snake
73 Holding points of our shape
74 Limiting the number of points
75 Threshold additions by distance
76 Setting up a letter class
77 Adding multiple letters
78 Selecting letters from a list
79 Adding rotation to our letters
80 Variation: curve vertex
81 Variation: randomness on points
82 Variation: noise on points
83 Variation: noise in three dimensions; x, y and time
84 Variation: line over text
85 Variation: images instead of text
86 Thanks for taking our course
Resolve the captcha to access the links!