SuperHi FM

Search:

Catalog Cart About Sign in

BEGINNERCOURSE

Creative Coding

Motion, timings and easings: you'll learn these techniques to create animation toys using Two.js, a Javascript tool for creating and manipulating shapes.

Guy Moorhouse

Rik Lomas

Taught by

Guy Moorhouse and Rik Lomas

Spinning square

Spinning square

Lesson 01

Welcome to Creative Coding!

Lesson 02

Setting up our HTML and CSS

Lesson 03

Asset folders + adding comments

Grouped rotations

Grouped rotations

Lesson 01

Introduction

Lesson 02

Working out geometry

Lesson 03

Setting up our HTML and CSS

Looping squares

Looping squares

Lesson 01

Easing fun time!

Lesson 02

Project setup + utils.js

Lesson 03

Adding our squares

Zipper

Zipper

Lesson 01

Welcome to Zipper

Lesson 02

Project setup

Lesson 03

Adding a linear animation

Random Placements

Random Placements

Lesson 01

Intro to random positions!

Lesson 02

Setting up a line of squares

Lesson 03

Setting up a general timeline

The Moiré Effect

The Moiré Effect

Lesson 01

Welcome to the Moiré effect

Lesson 02

Setting up our rectangles

Lesson 03

Animating our shapes

Get access to Creative Coding

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 instructors

Guy Moorhouse

Guy Moorhouse

Teacher

Rik Lomas

Rik Lomas

Founder + CEO

Course structure

Chapter 01

Spinning square

Lesson 01
Welcome to Creative Coding!
Lesson 02
Setting up our HTML and CSS
Lesson 03
Asset folders + adding comments
Lesson 04
Adding Two.js to our project
Lesson 05
Setting up Two.js on our page
Lesson 06
Adding a square
Lesson 07
Rotating on page load
Lesson 08
Adding an animation loop

Chapter 02

Grouped rotations

Lesson 01
Introduction
Lesson 02
Working out geometry
Lesson 03
Setting up our HTML and CSS
Lesson 04
Setting up Two.js
Lesson 05
Adding a for loop to add multiple shapes
Lesson 06
Making our squares into a circle
Lesson 07
Rotating our shapes
Lesson 08
Group our shapes together
Lesson 09
Variation 2: Stick version
Lesson 10
Variation 3: Grow and shrink scale

Chapter 03

Looping squares

Lesson 01
Easing fun time!
Lesson 02
Project setup + utils.js
Lesson 03
Adding our squares
Lesson 04
What is modulo?
Lesson 05
Applying different fills using modulo
Lesson 06
Making and looping a timeline
Lesson 07
Adding easing to our movements
Lesson 08
Making individual timelines
Lesson 09
Variation 2: switching ordering
Lesson 10
Variation 3: using modulo to change rotations

Chapter 04

Zipper

Lesson 01
Welcome to Zipper
Lesson 02
Project setup
Lesson 03
Adding a linear animation
Lesson 04
Non-linear easing
Lesson 05
Making individual timelines
Lesson 06
Splitting our timeline in two
Lesson 07
Variation B: Translation
Lesson 08
Variation C: Mouse control
Lesson 09
Variation D: Scroll control

Chapter 05

Random Placements

Lesson 01
Intro to random positions!
Lesson 02
Setting up a line of squares
Lesson 03
Setting up a general timeline
Lesson 04
Setting up shape data
Lesson 05
Adding rotation to our data
Lesson 06
Reversing the timeline
Lesson 07
Adding easing
Lesson 08
Adding delays to our timeline
Lesson 09
Variation B: scaling
Lesson 10
Variation C: into a circle
Lesson 11
Variation D: reset the randomness on loop
Lesson 12
Variation E: Change colors on click

Chapter 06

The Moiré Effect

Lesson 01
Welcome to the Moiré effect
Lesson 02
Setting up our rectangles
Lesson 03
Animating our shapes
Lesson 04
Setting up our four-part sequence
Lesson 05
Changing our width with our sequences
Lesson 06
Adding per-sequence rotation
Lesson 07
Altering our rotations
Lesson 08
Adding a per-sequence easing
Lesson 09
Adding delays to each sequence
Lesson 10
Thank you for watching this 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

In this exclusive course, SuperHi have partnered up with the incredibly talented Futurefabric to design and produce a course all about creative motion with coding.

This course, aimed at beginners, will teach you how to work with motion, timings, easings and shapes to create animation toys. We’ll dive into Two.js, a Javascript tool for creating and manipulating shapes to design your own fun animations.

You don’t need any prior knowledge of how to work with code or motion to take this. View a sneak peek of the course here!

What you’ll learn

How to think about animation toys from a non-code, motion-based standpoint
Working with Two.js within an in-browser canvas, even if you've never coded before
How to manage and manipulate multiple shapes using code
How to manage a timeline of events and loop over your animation toy
How to work with easings and delays to make our animations feel more natural
How to think about self-initiated projects from an animation and motion point of view

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 create animation toys and use motion in their projects.

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.

Welcome to Creative Coding! In the first project, we’ll talk about how to draw shapes in web projects using Two.js and animate them using simple rotations

In the second project, we'll build upon the first project by adding and controlling multiple shapes in a group and learn how to manipulate them on a group and individual level.

In Looping Squares, we dive into timelines and how we can loop animations, how to add different types of easing and different delays per shape to create mesmerizing animations

With Zipper, we talk about how to split our timelines into two so we can go forwards and backwards in time and control shapes in a per-shape and per-sequence way

One of the most fun parts of creative coding is randomness. We add in random patterns into our animations by holding randomness data per shape to move them into a new position

On our final project, we create an animation with a four-part sequence that lets us control our shapes, easings and delays on a granular level

Guy is the designer + developer behind [Futurefabric](https://www.futurefabric.co/) — a London-based digital design studio who work with many businesses, from fledgling startups to established, large organisations.

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.