Experimental Javascript

1 Welcome to the Experimental Javascript course
2 Introduction to Hyperhi
3 What is the SuperHi Editor?
4 Setting up a custom cursor
5 Adding our first Javascript file
6 Adding functions to Javascript
7 Growing and shrinking the cursor
8 Making the cursor follow the mouse
9 Variation: adding text to our custom cursor
10 Setting up our canvas
11 What is context in HTML canvas?
12 Drawing rectangles with HTML canvas
13 Drawing a line with HTML canvas
14 Pen up and down
15 Adding independent paths
16 Variation 1: hidden text
17 Variation 2: making the canvas size full page
18 What are blend modes
19 Adding in mix-blend-mode
20 Variation: adding in background animation
21 Scratch out, not in
22 Combining scratch outs and ins using Figma
23 Joining blend modes together
24 Fixing the design on window resize
25 Adding in shadow blur to HTML canvas
26 Introduction to the project
27 Setting up Matter.js
28 What is deconstruction and adding options?
29 Adding shapes to Matter.js
30 Rendering a body shape
31 Adding a static ball
32 Adding a ground floor
33 Adding walls
34 How to add mouse control to Matter.js
35 Variation: adding more options from Matter.js
36 Adding a stack of shapes on load
37 Adding an image sprite to a shape
38 Putting a mix-blend-mode
39 Variation: adding hover changes to shapes
40 Variation: adding a gravity change in a loop
41 Variation: adding device orientation to gravity
42 Variation: Adding a wrapping plugin to Matter.js
43 Variation: adding randomness to our shapes
44 Introduction to Bookwave
45 Setting up the HTML and CSS
46 Initial Javascript setup
47 Adding Pixi.js applications
48 Importing an image into Pixi
49 Variation: Adding rotation to the sprite
50 Adding a blur filter
51 Adding a displacement filter: part 1
52 Adding a displacement filter: part 2
53 Adding a RGB split filter
54 Interacting with our filters using mousemove
55 Tweening our interactions
56 Changing our RGB split filter
57 Automatic movement
58 Introduction to Line Drawer
59 Setting up Three.js
60 Adding a shape to Three.js
61 Adding lights to Three.js
62 Animating rotation on a shape
63 Changing position of shapes
64 Adding shapes on click
65 Drawing shapes on mouse interaction
66 Changing the shape’s hue
67 Selecting a random geometry
68 Moving the camera and the shapes
69 Fixing inertia scrolling on mobile
70 Changing our camera settings
71 Intro to Planet Wilson
72 Setting up Three.js on our page
73 Adding Planet Wilson as a sphere geometry
74 Adding a texture to a material
75 Variation: turn globe on scroll events
76 Adding rings to our scene
77 Variation: adding a moon
78 Camera movement with mouse
79 Tweening the camera movement
80 Adding a points field to Three.js
81 Making our star field spherical
82 Adding a texture to our stars
83 Adding fog to a scene
84 Variation: adding a random texture
85 Variation: adding a trail line
86 Variation: draw to move
87 Variation: spherical camera movement
88 Adding real randomness
89 Introduction to Poly Cat
90 Setting up Three.js
91 Adding a Google Poly earth model
92 Refactoring our code with Promises
93 Adding a Google Poly cat
94 Changing the model’s material
95 Adding a floor for our cat
96 Camera movement with tweening
97 Adding a camera zoom on mouse wheel
98 Casting shadows
99 Adding eyes to our cat
100 Making the eyes follow the camera and cursor
101 Changing the cat color on click
102 Using TweenMax to tween colors
103 Variation: how to click on objects within Three.js
104 Back to Twotwentytwo