The Coding Train

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

Take a trip back in time and watch me attempt to build a 3D graphics engine in AppleSoft BASIC on a restored Apple II+ computer! Can I render a spinning cube? Code: https://thecodingtrain.com/challenges/175-3D-cube-applesoft-basic

🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-apple-challenge-3d-cube

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

References:
💾 Big Mess o' Wires: http://www.bigmessowires.com/floppy-emu/
✨ Nebula: https://nebula.tv/videos/codingtrain-apple-challenge-3d-cube
🧠 What is Code?: https://nebula.tv/what-is-code
🎶 Coding Together: https://soundcloud.com/user-207981744-979066415/coding-together

Related Videos:
🎥 Coding Together Track: https://thecodingtrain.com/tracks/coding-together-apple-ii
🎥 Polar Coordinates: https://youtu.be/O5wjXoFrau4
🎥 3D Rendering with Rotation and Projection: https://youtu.be/p4Iz0XJY-Qk

AppleSoft BASIC:
🐶 Beagle Basic: http://www.apple-iigs.info/doc/fichiers/BeagleBasic.pdf
🍎 The AppleSoft Tutorial: http://cini.classiccmp.org/pdf/Apple/The%20Applesoft%20Tutorial.pdf
🍎 Basic Programming Reference Manual: https://mirrors.apple2.org.za/Apple%20II%20Documentation%20Project/Software/Languages/Applesoft%20BASIC/Manuals/Applesoft%20II%20BASIC%20Programming%20Reference%20Manual.pdf
🪧 Peeks, Pokes and Pointers: https://archive.org/details/peeks-pokes-pointers

Apple II Emulators:
☕ Applesoft BASIC in JavaScript: https://www.calormen.com/jsbasic/
🍎 Apple IIjs: https://www.scullinsteel.com/apple2/
🍎 MicroM8: https://paleotronic.com/software/microm8/

Unedited Raw Footage:
⭐️ Session 1: https://youtu.be/4yByzgGSfzQ?t=8125s
⭐️ Session 2: https://youtu.be/lzAPLYApVTU?t=2854s
⭐️ Session 3: https://youtu.be/g7NAQyBCkZw?t=1438s

Related Coding Challenges:
🚂 112 3D Rendering with Rotation and Projection: https://youtu.be/p4Iz0XJY-Qk
🚂 173 AppleSoft Basic Snake Game: https://youtu.be/7r83N3c2kPw
🚂 174 AppleSoft Basic Fractal Tree: https://youtu.be/UNkHditYGls

Timestamps:
0:00 The future of computer graphics!
0:39 Viewer comments
1:58 Editing code in BASIC
3:28 Floppy Emu disk emulator
5:09 Double buffered animation
6:55 Initialize high resolution graphics for 2 pages
7:42 Animating a line
8:50 CALL to clear the screen
9:22 Switching screens
13:18 The "draw loop"
14:55 Rotate a line
15:45 Add points
16:36 Add a subroutine that draws a line between two points
17:55 Scaling the line
20:55 Matrix Multiplication for Rotation
29:26 Animate rotation
32:00 Clear background
33:17 Subroutine to add the points of a cube
35:40 Subroutine to draw the lines
36:46 Incorporating matrix math.
40:24 Edit code to add more points
41:46 Connect the points to draw a cube
43:03 Beautiful, 3D rotating cube!!
43:17 x-axis rotation
43:52 Ways to optimize the code
44:42 Can you add perspective projection?
45:08 See you next time on Coding Together!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Coding Together Theme by Will from America (https://twitter.com/willfromamerica)
Eye of the Tiger cover by Leon from @neo 
Additional music from 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

#3dgraphics #1980s #appleii #matrixmath #basic

Coding Challenge: 3D on Apple II

In this video, I talk about p5.js.  What is it? What can you do with it? Where did it come from? What is its relationship with Processing? p5.js is both a library for JavaScript and a beginner-friendly editor where you can build creative computational projects in the browser. It can be used for art, data visualization, and websites alongside other tools like HTML5, CSS and JavaScript.

Next video:https://youtu.be/D1ELEeIs0j8?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Support this channel on Patreon: https://patreon.com/codingtrain

Contact: https://twitter.com/shiffman

Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics

Link to code on Github: https://github.com/CodingTrain/Rainbow-Code

p5.js: http://p5js.org
Processing: http://processing.org
Processing Foundation: https://processingfoundation.org/

For More p5.js Basics Videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

Help us caption & translate this video!

http://amara.org/v/HCxe/

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

1.1: Introduction - p5.js Tutorial

In this coding challenge, I create a double pendulum simulation in Processing. Code: https://thecodingtrain.com/challenges/93-double-pendulum

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

🎥 Previous video: https://youtu.be/188B6k_F9jU?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: https://youtu.be/JSn-DJU8qf0?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🔴 Physics Lab Double Pendulum: https://www.myphysicslab.com/pendulum/double-pendulum-en.html

Videos:
🚂 Pendulum Simulation: https://www.youtube.com/watch?v=9iaEqGOh5WM
🔴 Coding Train Live 120: https://youtu.be/KhogNPC24eI?t=10979s

Related Coding Challenges:
🚂 #86 Cube Wave by Bees and Bombs: https://youtu.be/H81Tdrmz2LA
🚂 #159 Simple Pendulum Simulation: https://youtu.be/NBWMtlbbOag

Timestamps:
0:00:00 Double Pendulum Simulation
0:03:45 Creating The Double Pendulum
0:08:35 Adding The Tracing of The Path
0:12:51 Implementing The Double Pendulum Formulas
0:24:45 Visualizing It
0:28:21 Adding Damping
0:29:16 Conclusions And Suggestions

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

#doublependulum #pendulumharmonicmotion #processing