Coding Challenge #46.1: Asteroids with p5.js - Part 1

Subscribers:
1,750,000
Published on ● Video Link: https://www.youtube.com/watch?v=hacZU523FyM



Duration: 31:55
102,702 views
1,631


In this two part coding challenge, I use the p5.js library to create my own version of the classic Atari video game Asteroids! Code: https://thecodingtrain.com/challenges/46-asteroids

đŸ•šī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/VtYr6E4_M

đŸŽĨ Next video: https://youtu.be/JUDYkxU6J0o?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đŸŽĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
🔗 Asteroids on Wikipedia: https://en.wikipedia.org/wiki/Asteroids_(video_game)

Videos:
đŸŽĨ Asteroids Part 2: https://youtu.be/xTTuih7P0c0
đŸŽĨ Polar Coordinates: https://youtu.be/O5wjXoFrau4
đŸŽĨ Livestream Archive: https://youtu.be/VFnF87-JNtY

Related Coding Challenges:
🚂 #81 Circle Morphing: https://youtu.be/u2D4sxh3MTs

Timestamps:
0:00 Introducing today's topic: coding the classic Atari game Asteroids
1:54 Create a Ship object
5:56 Write a function to turn the ship
9:54 Move the ship by adding velocity and acceleration vectors
16:51 Deal with the edges of the screen
19:32 Create an array of asteroids
22:12 Add push and pop to save the ship's heading
24:41 Use polar to cartesian coordinates to get the vertices on the asteroids
27:52 Offset the vertices by a random value to create jagged asteroids
30:05 Move the asteroids

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

#atariasteroids #polartocartesiancoordinates #p5js #javascript




Other Videos By The Coding Train


2017-01-10Coding Challenge #50.2: Animated Circle Packing - Part 2 (Kitten Addendum)
2017-01-09Coding Challenge #50.1: Animated Circle Packing - Part 1
2017-01-06Coding Challenge #49: Photo Mosaic with White House Social Media Images
2017-01-06Coding Challenge #48: White House Social Media Data Visualization
2017-01-05Coding Train Live 71: Coding Challenges: Circle Packing and White House Data Visualization
2016-12-23ITP Winter Show 2016
2016-12-21Coding Challenge #47: Pixel Sorting in Processing
2016-12-20Guest Tutorial #3: Spring Animations and p5.js with Val Head
2016-12-19Guest Tutorial #2: Web Animations and Mo.js with Sarah Drasner
2016-12-16Coding Challenge #46.2: Asteroids with p5.js - Part 2
2016-12-15Coding Challenge #46.1: Asteroids with p5.js - Part 1
2016-12-14Live Stream #70: Coding Challenges: Asteroids and Pixel Sorting
2016-12-11Coding Challenge #45: Saving p5.js Drawings to Firebase
2016-12-109.3: Firebase: Retrieving Data - Programming with Text
2016-12-099.2: Firebase: Saving Data - Programming with Text
2016-12-089.1: What is Firebase? (Database as a Service) - Programming with Text
2016-12-08Live Stream #69.2: Session 9 - Programming from A to Z - Part 2
2016-12-08Live Stream #69.1: Session 9 - Programming from A to Z - Part 1
2016-12-038.7: "Build Your Own API" Conclusion with HTTP POST - Programming with Text
2016-12-02Coding Challenge #44: AFINN-111 Sentiment Analysis - Part 2
2016-12-01Coding Challenge #44: AFINN-111 Sentiment Analysis - Part 1



Tags:
JavaScript (Programming Language)
live
programming
daniel shiffman
creative coding
p5.js
coding challenge
p5.js tutorial
p5js
javascript (programming language)
tutorial
javascript
algorithms
asteroids
atari asteroids
asteroids p5js
asteroids javascript
asteroids game js
asteroids game javascript
asteroids game atari js
coding
challenges
games done quick
html5 canvas game
game javascript
asteroids game bot
asteroids machine learning