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 multi-part coding challenge, I attempt an implementation of the A* Pathfinding Algorithm to find the optimal path between two points in a 2D grid. Code: https://thecodingtrain.com/challenges/51-a-pathfinding-algorithm

💻 Github Repo: https://github.com/CodingTrain/AStar
🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/ehLjdFpat

Other Parts of this Challenge:
📺 A* Algorithm - Part 2: https://youtu.be/EaZxUCWAjb0
📺 A* Algorithm - Part 3: https://youtu.be/jwRT4PCT6RU

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

References:
📘 Artificial Intelligence: A Modern Approach: http://aima.cs.berkeley.edu/
🗄 A* Search Algorithm on Wikipedia: https://en.wikipedia.org/wiki/A*_search_algorithm
💻 Online demo: https://codingtrain.github.io/AStar/

Live Stream Archive:
🔴 Live Stream #72: https://www.youtube.com/watch?v=S4yQYiAECnM&t=34m50s

Related Coding Challenges:
🚂 #10 Maze Generator: https://youtu.be/HyK_Q5rrcr4
🚂 #162 Self Avoiding Walk: https://youtu.be/m6-cm6GZ1iw

Timestamps:
0:00:00 Introduction
0:01:26 A* Pathfinder
0:09:39 Coding a Grid
0:13:09 A* Pathfinder Algorithm
0:22:07 Choosing Best Available Path
0:27:05 Finding New Nodes
0:38:30 Adding Heuristic
0:41:50 Tracing Back
0:46:49 Using Better Heuristics

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

#aalgorithm #pathfinding #heuristic #p5js #javascript

Coding Challenge 51.1: A* Pathfinding Algorithm - Part 1

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

XState core member Matt Pocock speedruns the XState docs to teach you everything you need to know to get started with XState.

Chapters:
0:00 Introduction
1:00 Getting started
1:35 States & Transitions
3:42 Initial states
4:00 Final states
5:26 Compound states
7:34 Parallel states
9:46 Self transitions
11:00 Actions
14:20 Entry & Exit actions
16:17 Machine ids
16:42 Machine options
17:59 .withConfig
18:35 machine.transition
20:45 state.matches
21:34 state.nextEvents
22:38 state.can
23:41 Other state properties
27:17 Context & assign
32:29 Always transitions & Guards
36:03 Infinite always error - explanation and fix
39:30 If/else transitions
42:36 interpret
44:47 Transitions in FSM's
45:30 Wildcard events
48:10 Multiple targets
49:06 Parent/child inheritance of transitions
51:35 Effects
51:54 Invoking promise-based services
55:38 Services type safety
58:40 Invoked callbacks
1:00:20 Cancelling promise-based services
1:01:32 After transitions
1:04:05 Stuff we won't cover
1:05:06 TypeScript & Event values
1:08:35 Finish

XState Docs Speedrun - 2022

Nim is a general-purpose programming language known for its python-like syntax and ability to compile to multiple languages like C, C++, and JavaScript. Learn the fundamentals of Nim in this quick tutorial. 

#programming #code #100SecondsOfCode

💬 Chat with Me on Discord

https://discord.gg/fireship

🔗 Resources

Nim Docs https://nim-lang.org/
C in 100 Seconds https://youtu.be/U3aXWizDbQ4
Python in 100 Seconds https://youtu.be/x7X9w_GIm1s
Lisp in 100 Seconds https://youtu.be/INUHCQST7CU

🔥 Get More Content - Upgrade to PRO

Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access 

🎨 My Editor Settings

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

🔖 Topics Covered

- What is the Nim language?
- Who created Nim?
- What is Nim used for?
- Nim basics tutorial
- Nim vs Rust
- Nim vs C

Nim in 100 Seconds

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