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.
Taught by
Guy Moorhouse and Rik Lomas
Taught by
Guy Moorhouse and Rik Lomas
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!
A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. That’s it!
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.
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
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
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
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!
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 workDon’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
