Learn the basics of Three.js - a tool for building amazing 3D graphics with JavaScript. In this tutorial, we create an animated 3D scrolling animation for a portfolio website https://github.com/fireship-io/threejs-scroll-animation-demo

#3D #webdev #js

🔗 Resources

Three.js Docs https://threejs.org/
WebGL Overview https://youtu.be/f-9LEoYYvE4
Inspiration https://atelier.net/virtual-economy/
Scrolling Animation with Three.js

📚 Chapters

00:00 Mindblowing 3D Websites
00:42 What we’re building
01:19 What is Three.js
02:12 Project Setup
03:35 Scene
03:52 Camera
04:28 Renderer
05:07 Geometry
05:28 Material
06:02 Mesh
06:16 Animation Loop
07:13 Lighting
08:45 Three.js Helpers
09:17 Orbit Controls
09:56 Random Generation
11:05 Scene Background
11:37 Texture Mapping
12:57 Scroll Animation
14:36 CSS Grid 

 🤓 Install the quiz app

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

🔥 Watch more with Fireship PRO

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

🎨 My Editor Settings

- Atom One Dark 
- vscode-icons
- Fira Code Font

Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial

In this coding challenge, I code a p5.js version of the Snake Game. Code: https://thecodingtrain.com/challenges/3-snake-game

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/avh_VGx69

🎥 Previous video: https://youtu.be/LG8ZK-rRkXo?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/KkyIDI6rQJI?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🌐 Snake Game on Wikipedia: https://en.wikipedia.org/wiki/Snake_(video_game)

Live Stream Archive:
🔴 Coding Train Live 32: https://youtu.be/yUO2bWfBgN8?t=578

Related Coding Challenges:
🚂 #32 Agar.io: https://youtu.be/JXuxYMGe4KI
🚂 #72 Frogger: https://youtu.be/giXV6xErw0Y
🚂 #173 AppleSoft Basic Snake Game: https://youtu.be/7r83N3c2kPw
🚂 #115 Snake Game Redux: https://youtu.be/OMoVcohRgZA

Timestamps:
0:00 Creating a Snake object
3:00 Adding keyboard control
5:20 Grid and World Constraints
8:00 Adding Food!
11:00 Eating The Food!
13:05 Getting Longer When Eating
17:40 Fixing Mistakes
21:48 Game Over State
25:55 Coding Challenge Complete Choo Choo!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#snake #game #vectors #arrays #p5js #javascript

Coding Challenge #3: The Snake Game

In this viewer submitted coding challenge, I attempt to code a Purple Rain Simulator in Processing. Code: https://thecodingtrain.com/challenges/4-purple-rain

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/5C07OcK6A

🎥 Previous video: https://youtu.be/AaGK-fj-BAM?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/biN3v3ef-Y0?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

🔴 Coding Train Live 34: https://youtu.be/r8QMcI5qxQM?t=3919s

Related Coding Challenges:
🚂 #1 Starfield in Processing: https://youtu.be/17WoOqgXsRM
🚂 #27 Fireworks: https://youtu.be/CKeyIbT3vXI
🚂 #169 Pi in the Sky Game: https://youtu.be/_H9JIwWP7HQ

Timestamps:
00:00 Introduction to the challenge
00:37 Setup the sketch
01:08 Create a Drop class
02:45 Set initial values and create a Drop object
03:23 Create an array of drops
04:27 Randomize initial values
05:30 Reset raindrop location when offscreen
06:11 Few more improvements
06:56 Add gravity
08:26 Add z value for 3d illusion
11:29 Final Version!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#purplerain #processing

Coding Challenge #4: Purple Rain in Processing

This is the first in a new series of videos. In this video I attempt to program a "star field" or "warp speed" visualization in Processing. Code: https://thecodingtrain.com/challenges/1-starfield

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/1wLHIck3T

🎥 Next video: https://youtu.be/LG8ZK-rRkXo?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🔴 Coding Train Live 30: https://youtu.be/JljMBn69fZM?t=760s

References:
🌟 Inspiration: https://cs.brynmawr.edu/gxk2013/examples/transformations/starfield/

Related Coding Challenges:
🚂 #27 Fireworks: https://youtu.be/CKeyIbT3vXI
🚂 #46 Asteroids: https://youtu.be/hacZU523FyM

Timestamps:
0:00 Welcome to a 10 minute coding challenge
0:59 Let's create a star class
2:10 Make an array of stars
3:17 Write the update() and show() functions
3:43 Make the stars move!
5:37 Translate to the middle of the canvas
6:17 Add more stars
7:40 Start to tweak size and speed of stars
9:02 Add trails to stars
10:31 Bonus two minutes!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#space #processing

Coding Challenge #1: Starfield in Processing

This is a beginner-friendly challenge where I attempt to code a basic version of the game Tic-Tac-Toe using JavaScript and the p5.js library. Code: https://thecodingtrain.com/challenges/149-tic-tac-toe

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/5JngATm3c

🎥 Previous video: https://youtu.be/YNyULRrydVI?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/vEetoBuHj8g?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Videos:
🔴 Livestream Archive: https://youtu.be/Y6cMTh2BODY

Related Coding Challenges:
🚂 #77 Recursion: https://youtu.be/jPsZwrV9ld0
🚂 #154 Tic Tac Toe AI with Minimax Algorithm: https://youtu.be/trKjYdBASyQ
🚂 #163 Bézier Curves: https://youtu.be/enNfb6p3j_g

Timestamps:
0:00 Welcome!
0:54 Start coding
3:50 Drawing X and O
5:00 Let's diagram this!
8:46 Randomly choose the first player at the start of round
10:18 Drawing the grid
10:58 Each player places their symbol on a random spot
15:00 Check for a winner
18:44 Checking for equality of three elements
19:50 More bugs
21:01 Final Working Version! Show the winner
22:34 Thanks for watching!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#beginners #tictactoe #games #p5js

Coding Challenge #149: Tic Tac Toe

It's time to attempt to build a Flappy Bird clone in JavaScript with the p5.js! Code: https://thecodingtrain.com/challenges/31-flappy-bird

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/FtBc2BhHM

🎥 Previous video: https://youtu.be/KWoJgHFYWxY?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🗄 Flappy Bird on Wikipedia: https://en.wikipedia.org/wiki/Flappy_Bird

Related Coding Challenges:
🚂 #41 Clappy Bird: https://youtu.be/aKiyCeIuwn4
🚂 #100 Neuroevolution Flappy Bird: https://youtu.be/c6y21FkaUqw
🚂 #147 Chrome Dinosaur Game: https://youtu.be/l0HoJHc-63Q

Timestamps:
0:00:00 Flappy Bird
0:00:51 Creating a Bird Object
0:02:38 Adding Simple Physics
0:06:25 Moving Up
0:08:13 Adding Obstacles
0:16:02 Collision Detection
0:19:45 Finishing The Game

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#flappybird #javascript #p5js

Coding Challenge #31: Flappy Bird

In this coding challenge, I create a 3D procedural terrain using Perlin Noise and the beginShape() function in Processing. Code: https://thecodingtrain.com/challenges/11-3d-terrain-generation-with-perlin-noise

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/OPYPc4ueq

🎥 Previous video: https://youtu.be/HyK_Q5rrcr4?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/f0lkz2gSsIk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
💾 beginShape() reference: https://processing.org/reference/beginShape_.html
💾 noise() reference: https://processing.org/reference/noise_.html

Videos:
🚂 What is Perlin Noise?: https://thecodingtrain.com/tracks/the-nature-of-code-2/noc/perlin/perlin-noise-and-p5js-tutorial-intro
🔴 Coding Train Live 37: https://youtu.be/ELpZW62HGVs?t=1735s

Related Coding Challenges:
🚂 #18 3D Fractal Trees: https://youtu.be/JcopTKXt8L8
🚂 #24 Perlin Noise Flow Field: https://youtu.be/BjoM9oKOAKY
🚂 #112 3D Rendering with Rotation and Projection: https://youtu.be/p4Iz0XJY-Qk

Timestamps:
00:00 Introduction to the Challenge
00:46 What do we need to do?
02:14 Draw a rectangular grid!
04:13 Create a flat triangle strip mesh!
06:51 Rotate the surface in 3D!
08:47 Set the z-values of the vertices randomly!
11:04 Create a 2D array to store the z values!
13:31 How do we make the terrain infinite? What is Perlin Noise?
17:03 How do we make the terrain smooth?
17:43 Reduce offsets to get smoother z values
19:17 How do we make it appear as if we are moving over the terrain?
20:30 Change y-offset per frame to create the illusion of flying!
22:05 Thanks for watching!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#perlinnoise #terraingeneration #procedural #processing

Coding Challenge 11: 3D Terrain Generation with Perlin Noise in Processing

In this coding challenge, I'm implement fractal trees with recursion in p5.js. This is the first part of a series on algorithmic botany. Code: https://thecodingtrain.com/challenges/14-fractal-trees-recursive

🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/xTjmYXU3q

🎥 Previous video: https://youtu.be/BV9ny785UNc?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/fcdNSZ9IzJM?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🌿 Algorithmic Botany: http://algorithmicbotany.org/
📕 My NOC class on Kadenze: https://www.kadenze.com/courses/the-nature-of-code/info

Videos:
🎥 Algorithmic Botany Track: https://thecodingtrain.com/tracks/algorithmic-botany
🔴 Coding Train Live 40: https://youtu.be/MwLyeEWnMCY?t=1838s

Related Coding Challenges:
🚂 #15 Object-Oriented Fractal Trees: https://youtu.be/fcdNSZ9IzJM
🚂 #174 AppleSoft Basic Fractal Tree: https://youtu.be/UNkHditYGls

Timestamps:
0:00 Introducing today's topic
0:39 Recursion
2:51 Exit condition
3:53 Let's Code!
5:03 Branch function
10:06 Add slider
13:25 Push and pop functions
14:42 Conclusion and next steps

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#fractals #generativeart #p5js #javascript