SuperHi FM

50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
50% off all courses and workshops during our Black Friday + Cyber Monday sale!
CatalogCart -AboutSign in
INTERMEDIATECOURSE

Experimental Javascript

Learn Three.js, Matter.js and PIXI.js to make interactive websites using collision engines, displacement maps and interactive 3D in the browser.

Rik Lomas

Taught by

Rik Lomas

If you're a creative person who wants to make experimental, art-driven websites, this is the perfect course to make websites that stand out from the crowd.

In this short online course you'll dive deep into the world of experimental Javascript. Discover the world of collision engines, displacement maps and interactive 3D in the browser with libraries like PIXI.js and Three.js.

This is a great next step for students who already have some knowledge of HTML, CSS and Javascript, or have completed our Foundation HTML, CSS + Javascript and Javascript for Designers courses.

What you’ll learn

  • Learn how to interact with HTML canvases with Javascript
  • Add touch, mouse, dragging and device orientation effects
  • Make collision detection engines with Matter.js
  • Work with displacement and color splitting effects using PIXI.js
  • Dive into the world of 3D in the browser with Three.js
  • Make interactive 3D websites that react to mouse and touch events

Requirements

A computer with Mac OS X 10.9 or above, Windows XP or above, or a recent Linux version installed and a broadband internet connection. Nothing more!

Target Audience

Anyone who is looking to take their creative Javascript skills to the next level, or anyone who is looking to get started with complex Javascript libraries like Three.js, PIXI.js or Matter.js.

We would recommend some knowledge of HTML, CSS and Javascript before this course starts. If you have done either our Foundation HTML, CSS + JS or Javascript for Designers course, this will be suitable for you.

Most of our students work in the creative industries – designers, strategists and copywriters are the most common jobs – but you can work in any industry to join the course.

Hyperhi
Chapter 01

Hyperhi

We start the course by drawing with HTML canvas, exploring different events and adding in blend modes.

Lesson 01

Welcome to the Experimental Javascript course

Lesson 02

Introduction to Hyperhi

Lesson 03

What is the SuperHi Editor?

Go to chapter
Hi vs Hi
Chapter 02

Hi vs Hi

Using Matter.js, we add a physics collision engine to our site to make our shapes collide, be dragged and have gravity.

Lesson 01

Introduction to the project

Lesson 02

Setting up Matter.js

Lesson 03

What is deconstruction and adding options?

Go to chapter
Bookwave
Chapter 03

Bookwave

With Pixi.js, we use 2D WebGL to add displacement and RGB split filters to our images on both with and without mouse movement.

Lesson 01

Introduction to Bookwave

Lesson 02

Setting up the HTML and CSS

Lesson 03

Initial Javascript setup

Go to chapter
Line Drawer
Chapter 04

Line Drawer

We dive into 3D in the browser and use Three.js to add cameras, scenes, geometries, materials and meshes to our project.

Lesson 01

Introduction to Line Drawer

Lesson 02

Setting up Three.js

Lesson 03

Adding a shape to Three.js

Go to chapter
Planet Wilson
Chapter 05

Planet Wilson

On the second of three Three.js projects, we add particles, textures and tweening to our solar system.

Lesson 01

Intro to Planet Wilson

Lesson 02

Setting up Three.js on our page

Lesson 03

Adding Planet Wilson as a sphere geometry

Go to chapter
Poly Cat
Chapter 06

Poly Cat

We tie together all of our Three.js learnings by adding a dynamic object to our scene that we can alter and interact with

Lesson 01

Introduction to Poly Cat

Lesson 02

Setting up Three.js

Lesson 03

Adding a Google Poly earth model

Go to chapter

Get access to Experimental Javascript

  • 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

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.

With support from...
Lawrence Gosset

Lawrence Gosset

Teacher

Course structure

  1. Welcome to the Experimental Javascript course

    Lesson 01

    Welcome to the Experimental Javascript course

  2. Introduction to Hyperhi

    Lesson 02

    Introduction to Hyperhi

  3. What is the SuperHi Editor?

    Lesson 03

    What is the SuperHi Editor?

  4. Setting up a custom cursor

    Lesson 04

    Setting up a custom cursor

  5. Adding our first Javascript file

    Lesson 05

    Adding our first Javascript file

  6. Adding functions to Javascript

    Lesson 06

    Adding functions to Javascript

  7. Growing and shrinking the cursor

    Lesson 07

    Growing and shrinking the cursor

  8. Making the cursor follow the mouse

    Lesson 08

    Making the cursor follow the mouse

  9. Variation: adding text to our custom cursor

    Lesson 09

    Variation: adding text to our custom cursor

  10. Setting up our canvas

    Lesson 10

    Setting up our canvas

  11. What is context in HTML canvas?

    Lesson 11

    What is context in HTML canvas?

  12. Drawing rectangles with HTML canvas

    Lesson 12

    Drawing rectangles with HTML canvas

  13. Drawing a line with HTML canvas

    Lesson 13

    Drawing a line with HTML canvas

  14. Pen up and down

    Lesson 14

    Pen up and down

  15. Adding independent paths

    Lesson 15

    Adding independent paths

  16. Variation 1: hidden text

    Lesson 16

    Variation 1: hidden text

  17. Variation 2: making the canvas size full page

    Lesson 17

    Variation 2: making the canvas size full page

  18. What are blend modes

    Lesson 18

    What are blend modes

  19. Adding in mix-blend-mode

    Lesson 19

    Adding in mix-blend-mode

  20. Variation: adding in background animation

    Lesson 20

    Variation: adding in background animation

  21. Scratch out, not in

    Lesson 21

    Scratch out, not in

  22. Combining scratch outs and ins using Figma

    Lesson 22

    Combining scratch outs and ins using Figma

  23. Joining blend modes together

    Lesson 23

    Joining blend modes together

  24. Fixing the design on window resize

    Lesson 24

    Fixing the design on window resize

  25. Adding in shadow blur to HTML canvas

    Lesson 25

    Adding in shadow blur to HTML canvas

  1. Introduction to the project

    Lesson 01

    Introduction to the project

  2. Setting up Matter.js

    Lesson 02

    Setting up Matter.js

  3. What is deconstruction and adding options?

    Lesson 03

    What is deconstruction and adding options?

  4. Adding shapes to Matter.js

    Lesson 04

    Adding shapes to Matter.js

  5. Rendering a body shape

    Lesson 05

    Rendering a body shape

  6. Adding a static ball

    Lesson 06

    Adding a static ball

  7. Adding a ground floor

    Lesson 07

    Adding a ground floor

  8. Adding walls

    Lesson 08

    Adding walls

  9. How to add mouse control to Matter.js

    Lesson 09

    How to add mouse control to Matter.js

  10. Variation: adding more options from Matter.js

    Lesson 10

    Variation: adding more options from Matter.js

  11. Adding a stack of shapes on load

    Lesson 11

    Adding a stack of shapes on load

  12. Adding an image sprite to a shape

    Lesson 12

    Adding an image sprite to a shape

  13. Putting a mix-blend-mode

    Lesson 13

    Putting a mix-blend-mode

  14. Variation: adding hover changes to shapes

    Lesson 14

    Variation: adding hover changes to shapes

  15. Variation: adding a gravity change in a loop

    Lesson 15

    Variation: adding a gravity change in a loop

  16. Variation: adding device orientation to gravity

    Lesson 16

    Variation: adding device orientation to gravity

  17. Variation: Adding a wrapping plugin to Matter.js

    Lesson 17

    Variation: Adding a wrapping plugin to Matter.js

  18. Variation: adding randomness to our shapes

    Lesson 18

    Variation: adding randomness to our shapes

  1. Introduction to Bookwave

    Lesson 01

    Introduction to Bookwave

  2. Setting up the HTML and CSS

    Lesson 02

    Setting up the HTML and CSS

  3. Initial Javascript setup

    Lesson 03

    Initial Javascript setup

  4. Adding Pixi.js applications

    Lesson 04

    Adding Pixi.js applications

  5. Importing an image into Pixi

    Lesson 05

    Importing an image into Pixi

  6. Variation: Adding rotation to the sprite

    Lesson 06

    Variation: Adding rotation to the sprite

  7. Adding a blur filter

    Lesson 07

    Adding a blur filter

  8. Adding a displacement filter: part 1

    Lesson 08

    Adding a displacement filter: part 1

  9. Adding a displacement filter: part 2

    Lesson 09

    Adding a displacement filter: part 2

  10. Adding a RGB split filter

    Lesson 10

    Adding a RGB split filter

  11. Interacting with our filters using mousemove

    Lesson 11

    Interacting with our filters using mousemove

  12. Tweening our interactions

    Lesson 12

    Tweening our interactions

  13. Changing our RGB split filter

    Lesson 13

    Changing our RGB split filter

  14. Automatic movement

    Lesson 14

    Automatic movement

  1. Introduction to Line Drawer

    Lesson 01

    Introduction to Line Drawer

  2. Setting up Three.js

    Lesson 02

    Setting up Three.js

  3. Adding a shape to Three.js

    Lesson 03

    Adding a shape to Three.js

  4. Adding lights to Three.js

    Lesson 04

    Adding lights to Three.js

  5. Animating rotation on a shape

    Lesson 05

    Animating rotation on a shape

  6. Changing position of shapes

    Lesson 06

    Changing position of shapes

  7. Adding shapes on click

    Lesson 07

    Adding shapes on click

  8. Drawing shapes on mouse interaction

    Lesson 08

    Drawing shapes on mouse interaction

  9. Changing the shape's hue

    Lesson 09

    Changing the shape's hue

  10. Selecting a random geometry

    Lesson 10

    Selecting a random geometry

  11. Moving the camera and the shapes

    Lesson 11

    Moving the camera and the shapes

  12. Fixing inertia scrolling on mobile

    Lesson 12

    Fixing inertia scrolling on mobile

  13. Changing our camera settings

    Lesson 13

    Changing our camera settings

  1. Intro to Planet Wilson

    Lesson 01

    Intro to Planet Wilson

  2. Setting up Three.js on our page

    Lesson 02

    Setting up Three.js on our page

  3. Adding Planet Wilson as a sphere geometry

    Lesson 03

    Adding Planet Wilson as a sphere geometry

  4. Adding a texture to a material

    Lesson 04

    Adding a texture to a material

  5. Variation: turn globe on scroll events

    Lesson 05

    Variation: turn globe on scroll events

  6. Adding rings to our scene

    Lesson 06

    Adding rings to our scene

  7. Variation: adding a moon

    Lesson 07

    Variation: adding a moon

  8. Camera movement with mouse

    Lesson 08

    Camera movement with mouse

  9. Tweening the camera movement

    Lesson 09

    Tweening the camera movement

  10. Adding a points field to Three.js

    Lesson 10

    Adding a points field to Three.js

  11. Making our star field spherical

    Lesson 11

    Making our star field spherical

  12. Adding a texture to our stars

    Lesson 12

    Adding a texture to our stars

  13. Adding fog to a scene

    Lesson 13

    Adding fog to a scene

  14. Variation: adding a random texture

    Lesson 14

    Variation: adding a random texture

  15. Variation: adding a trail line

    Lesson 15

    Variation: adding a trail line

  16. Variation: draw to move

    Lesson 16

    Variation: draw to move

  17. Variation: spherical camera movement

    Lesson 17

    Variation: spherical camera movement

  18. Adding real randomness

    Lesson 18

    Adding real randomness

  1. Introduction to Poly Cat

    Lesson 01

    Introduction to Poly Cat

  2. Setting up Three.js

    Lesson 02

    Setting up Three.js

  3. Adding a Google Poly earth model

    Lesson 03

    Adding a Google Poly earth model

  4. Refactoring our code with Promises

    Lesson 04

    Refactoring our code with Promises

  5. Adding a Google Poly cat

    Lesson 05

    Adding a Google Poly cat

  6. Changing the model's material

    Lesson 06

    Changing the model's material

  7. Adding a floor for our cat

    Lesson 07

    Adding a floor for our cat

  8. Camera movement with tweening

    Lesson 08

    Camera movement with tweening

  9. Adding a camera zoom on mouse wheel

    Lesson 09

    Adding a camera zoom on mouse wheel

  10. Casting shadows

    Lesson 10

    Casting shadows

  11. Adding eyes to our cat

    Lesson 11

    Adding eyes to our cat

  12. Making the eyes follow the camera and cursor

    Lesson 12

    Making the eyes follow the camera and cursor

  13. Changing the cat color on click

    Lesson 13

    Changing the cat color on click

  14. Using TweenMax to tween colors

    Lesson 14

    Using TweenMax to tween colors

  15. Variation: how to click on objects within Three.js

    Lesson 15

    Variation: how to click on objects within Three.js

  16. Back to Twotwentytwo

    Lesson 16

    Back to Twotwentytwo

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!

EmailDiscord