SuperHi FM

Search:

Catalog Cart About Sign 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

Hyperhi

Hyperhi

Lesson 01

Welcome to the Experimental Javascript course

Lesson 02

Introduction to Hyperhi

Lesson 03

What is the SuperHi Editor?

Hi vs Hi

Hi vs Hi

Lesson 01

Introduction to the project

Lesson 02

Setting up Matter.js

Lesson 03

What is deconstruction and adding options?

Bookwave

Bookwave

Lesson 01

Introduction to Bookwave

Lesson 02

Setting up the HTML and CSS

Lesson 03

Initial Javascript setup

Line Drawer

Line Drawer

Lesson 01

Introduction to Line Drawer

Lesson 02

Setting up Three.js

Lesson 03

Adding a shape to Three.js

Planet Wilson

Planet Wilson

Lesson 01

Intro to Planet Wilson

Lesson 02

Setting up Three.js on our page

Lesson 03

Adding Planet Wilson as a sphere geometry

Poly Cat

Poly Cat

Lesson 01

Introduction to Poly Cat

Lesson 02

Setting up Three.js

Lesson 03

Adding a Google Poly earth model

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

With support from...

Lawrence Gosset

Lawrence Gosset

Teacher

Course structure

Chapter 01

Hyperhi

Lesson 01
Welcome to the Experimental Javascript course
Lesson 02
Introduction to Hyperhi
Lesson 03
What is the SuperHi Editor?
Lesson 04
Setting up a custom cursor
Lesson 05
Adding our first Javascript file
Lesson 06
Adding functions to Javascript
Lesson 07
Growing and shrinking the cursor
Lesson 08
Making the cursor follow the mouse
Lesson 09
Variation: adding text to our custom cursor
Lesson 10
Setting up our canvas
Lesson 11
What is context in HTML canvas?
Lesson 12
Drawing rectangles with HTML canvas
Lesson 13
Drawing a line with HTML canvas
Lesson 14
Pen up and down
Lesson 15
Adding independent paths
Lesson 16
Variation 1: hidden text
Lesson 17
Variation 2: making the canvas size full page
Lesson 18
What are blend modes
Lesson 19
Adding in mix-blend-mode
Lesson 20
Variation: adding in background animation
Lesson 21
Scratch out, not in
Lesson 22
Combining scratch outs and ins using Figma
Lesson 23
Joining blend modes together
Lesson 24
Fixing the design on window resize
Lesson 25
Adding in shadow blur to HTML canvas

Chapter 02

Hi vs Hi

Lesson 01
Introduction to the project
Lesson 02
Setting up Matter.js
Lesson 03
What is deconstruction and adding options?
Lesson 04
Adding shapes to Matter.js
Lesson 05
Rendering a body shape
Lesson 06
Adding a static ball
Lesson 07
Adding a ground floor
Lesson 08
Adding walls
Lesson 09
How to add mouse control to Matter.js
Lesson 10
Variation: adding more options from Matter.js
Lesson 11
Adding a stack of shapes on load
Lesson 12
Adding an image sprite to a shape
Lesson 13
Putting a mix-blend-mode
Lesson 14
Variation: adding hover changes to shapes
Lesson 15
Variation: adding a gravity change in a loop
Lesson 16
Variation: adding device orientation to gravity
Lesson 17
Variation: Adding a wrapping plugin to Matter.js
Lesson 18
Variation: adding randomness to our shapes

Chapter 03

Bookwave

Lesson 01
Introduction to Bookwave
Lesson 02
Setting up the HTML and CSS
Lesson 03
Initial Javascript setup
Lesson 04
Adding Pixi.js applications
Lesson 05
Importing an image into Pixi
Lesson 06
Variation: Adding rotation to the sprite
Lesson 07
Adding a blur filter
Lesson 08
Adding a displacement filter: part 1
Lesson 09
Adding a displacement filter: part 2
Lesson 10
Adding a RGB split filter
Lesson 11
Interacting with our filters using mousemove
Lesson 12
Tweening our interactions
Lesson 13
Changing our RGB split filter
Lesson 14
Automatic movement

Chapter 04

Line Drawer

Lesson 01
Introduction to Line Drawer
Lesson 02
Setting up Three.js
Lesson 03
Adding a shape to Three.js
Lesson 04
Adding lights to Three.js
Lesson 05
Animating rotation on a shape
Lesson 06
Changing position of shapes
Lesson 07
Adding shapes on click
Lesson 08
Drawing shapes on mouse interaction
Lesson 09
Changing the shape's hue
Lesson 10
Selecting a random geometry
Lesson 11
Moving the camera and the shapes
Lesson 12
Fixing inertia scrolling on mobile
Lesson 13
Changing our camera settings

Chapter 05

Planet Wilson

Lesson 01
Intro to Planet Wilson
Lesson 02
Setting up Three.js on our page
Lesson 03
Adding Planet Wilson as a sphere geometry
Lesson 04
Adding a texture to a material
Lesson 05
Variation: turn globe on scroll events
Lesson 06
Adding rings to our scene
Lesson 07
Variation: adding a moon
Lesson 08
Camera movement with mouse
Lesson 09
Tweening the camera movement
Lesson 10
Adding a points field to Three.js
Lesson 11
Making our star field spherical
Lesson 12
Adding a texture to our stars
Lesson 13
Adding fog to a scene
Lesson 14
Variation: adding a random texture
Lesson 15
Variation: adding a trail line
Lesson 16
Variation: draw to move
Lesson 17
Variation: spherical camera movement
Lesson 18
Adding real randomness

Chapter 06

Poly Cat

Lesson 01
Introduction to Poly Cat
Lesson 02
Setting up Three.js
Lesson 03
Adding a Google Poly earth model
Lesson 04
Refactoring our code with Promises
Lesson 05
Adding a Google Poly cat
Lesson 06
Changing the model's material
Lesson 07
Adding a floor for our cat
Lesson 08
Camera movement with tweening
Lesson 09
Adding a camera zoom on mouse wheel
Lesson 10
Casting shadows
Lesson 11
Adding eyes to our cat
Lesson 12
Making the eyes follow the camera and cursor
Lesson 13
Changing the cat color on click
Lesson 14
Using TweenMax to tween colors
Lesson 15
Variation: how to click on objects within Three.js
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!

© 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

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.

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

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

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

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

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

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

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.