SuperHi FM

Search:

Catalog Cart About Sign in

INTERMEDIATECOURSE

Math for Creatives

Break down concepts such as trigonometry, algebra, randomness and noise in a visual way to add layers of interactivity into your projects.

Rik Lomas

Taught by

Rik Lomas

Wall Ball

Wall Ball

Lesson 01

Welcome to Math for Creatives!

Lesson 02

Welcome to Wall Ball

Lesson 03

Setting up our project

Flower Brush

Flower Brush

Lesson 01

Welcome to Flower Brush

Lesson 02

Setting up our project

Lesson 03

Making a class for our brush items

Blobbo

Blobbo

Lesson 01

Welcome to Blobbo

Lesson 02

Setting up our project

Lesson 03

Adding a for loop

Nice Colors

Nice Colors

Lesson 01

Welcome to Nice Colors

Lesson 02

Setting up our project

Lesson 03

Setting up our app.js file

Pink Noise

Pink Noise

Lesson 01

Welcome to Pink Noise

Lesson 02

Project Setup

Lesson 03

Setting up randomness

Flying Letters

Flying Letters

Lesson 01

Welcome to Flying Letters

Lesson 02

Project setup

Lesson 03

Making a list of objects

Snake

Snake

Lesson 01

Welcome to Snake!

Lesson 02

Setting up our project

Lesson 03

03-adding-a-snake

Get access to Math for Creatives

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Rik Lomas

Rik Lomas

Founder + CEO

With support from...

Jake Brussel Faria

Jake Brussel Faria

Teacher

Course structure

Chapter 01

Wall Ball

Lesson 01
Welcome to Math for Creatives!
Lesson 02
Welcome to Wall Ball
Lesson 03
Setting up our project
Lesson 04
Drawing on a page with P5
Lesson 05
Styling our canvas
Lesson 06
Resizing the canvas on window resize
Lesson 07
Making our own state
Lesson 08
Adding automated movement
Lesson 09
Adding boundaries to the page
Lesson 10
Fixing our boundaries
Lesson 11
Adding sound
Lesson 12
Introducing vectors
Lesson 13
Clicking to add randomness
Lesson 14
P5.js vs Processing

Chapter 02

Flower Brush

Lesson 01
Welcome to Flower Brush
Lesson 02
Setting up our project
Lesson 03
Making a class for our brush items
Lesson 04
Setting up a list of flowers
Lesson 05
Adding a random hue
Lesson 06
Controlling our hue
Lesson 07
Variation: fading and resizing
Lesson 08
Adding a reset on mouse release
Lesson 09
The geometry of circles
Lesson 10
Adding a for loop
Lesson 11
Adding petals to each flower
Lesson 12
Using P5 vectors to do our heavy lifting
Lesson 13
Adding rotation and rotation speed
Lesson 14
Final tweaks
Lesson 15
Saving an image on key press

Chapter 03

Blobbo

Lesson 01
Welcome to Blobbo
Lesson 02
Setting up our project
Lesson 03
Adding a for loop
Lesson 04
Making a sine wave
Lesson 05
Adding movement to our sine wave
Lesson 06
Additive waves
Lesson 07
Making a custom shape
Lesson 08
Making a circle from a list of points
Lesson 09
Adding waves to each points radius
Lesson 10
Adding a wave speed

Chapter 04

Nice Colors

Lesson 01
Welcome to Nice Colors
Lesson 02
Setting up our project
Lesson 03
Setting up our app.js file
Lesson 04
Adding changes to our code
Lesson 05
Adding randomness on page load
Lesson 06
Adding randomness on button click

Chapter 05

Pink Noise

Lesson 01
Welcome to Pink Noise
Lesson 02
Project Setup
Lesson 03
Setting up randomness
Lesson 04
Adding noise and noise levels
Lesson 05
Noise space
Lesson 06
Hue change
Lesson 07
Drawing per pixel
Lesson 08
Increasing our hue density
Lesson 09
Applying our density in code
Lesson 10
Using lerpColor with our density
Lesson 11
Adding in fade in and out colors
Lesson 12
P5.js vs Processing

Chapter 06

Flying Letters

Lesson 01
Welcome to Flying Letters
Lesson 02
Project setup
Lesson 03
Making a list of objects
Lesson 04
Adding speed and randomness
Lesson 05
Gravity and acceleration
Lesson 06
Adding friction and elasticity
Lesson 07
Adding text to our page
Lesson 08
Typing on key press
Lesson 09
Adding a choices list to pick from
Lesson 10
Adding a timeline and alpha channel
Lesson 11
Adding easing
Lesson 12
Varation: images instead of text

Chapter 07

Snake

Lesson 01
Welcome to Snake!
Lesson 02
Setting up our project
Lesson 03
03-adding-a-snake
Lesson 04
Holding points of our shape
Lesson 05
Limiting the number of points
Lesson 06
Threshold additions by distance
Lesson 07
Setting up a letter class
Lesson 08
Adding multiple letters
Lesson 09
Selecting letters from a list
Lesson 10
Adding rotation to our letters
Lesson 11
Variation: curve vertex
Lesson 12
Variation: randomness on points
Lesson 13
Variation: noise on points
Lesson 14
Variation: noise in three dimensions; x, y and time
Lesson 15
Variation: line over text
Lesson 16
Variation: images instead of text
Lesson 17
Thanks for taking our course

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

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

Requirements

A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. That’s it!

Target Audience

Anyone who wants to learn how to get comfortable with math in a visual-thinking way.

This is a beginner course with no requirements apart from being comfortable using a computer. If you use programs like Microsoft Word or Photoshop without trouble, you're good to go.

While this course covers Javascript, you don't need any prior knowledge of Javascript at all to start.

In our very first project, we talk about how to draw on web pages using P5.js and how to use vectors to control movement of a ball with boundaries

We extend our drawing tools to make our own custom brushes that use trigonometry to move 'petals' around our brush

We extend our sine wave knowledge to build up additive sines waves to create a generative blob with natural movement

With any kind of randomness we add to a project, we want to make sure that we're making beautiful things. In this project we talk about randomness with boundaries using pure Javascript.

When is random too random? In this project, we talk about an alternative to randomness, Perlin noise, a way to make an interconnected but randomly generated pattern

We jump back to physics in a project all about simulating real world gravity, acceleration and friction to make a site where our words literally jump out of the page

In our final project, we'll use vectors to work out rotations and distance thresholds to make a snake-style page that draws text and lines on mouse movement

Rik (he/him) is a Mancunian coder, teacher and CEO of SuperHi. He was the co-founder of Steer (a code school in London) and has taught several thousand people to code. He is a bit too old to be posting memes on our social media and recently featured as a Sour Patch Kid in the Macy's Thanksgiving Parade.