Coding Challenge
In this coding challenge, I load a sprite sheet and create multiple animated sprites with the p5.js library. Code: https://thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge #110: Recamán's Sequ...
🎥 Next video: • Coding Challenge #112: 3D Rendering w...
🎥 All videos: • Coding Challenges
References:
🔗 Horse Sprite Sheet: https://opengameart.org/content/2d-pl...
🗄 Sprite (computer graphics): https://en.wikipedia.org/wiki/Sprite_...)
Videos:
🚂 Guest Tutorial #6: The Modulo Operator with Golan Levin: • Guest Tutorial #6: The Modulo Operato...
🔴 Coding Train Live 147: • Coding Train Live #147: A Beginners G...
Related Coding Challenges:
🚂 #88 Snowfall: • Coding Challenge #88: Snowfall
Timestamps:
0:00 Introduction
0:58 Cite resource from opengameart.org
1:45 Show sprite sheet
2:57 Show sprites' coordinates
3:15 Let's code
3:18 Draw entire sprite sheet
5:18 Draw individual sprites
7:46 Draw different sprites with the modulo operator
9:02 Create a Sprite class
10:54 Define the show function
11:45 Define the animate function
12:07 Debug Sprite class
13:00 Create a sprite object
13:31 Add multiple sprites
14:30 Animate sprites at different speed
16:25 Move sprites horizontally
16:40 Refine animation
17:45 Conclusion and creative possibilities
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 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-o...
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod...
#spriteanimation #oop #p5js #javascript
Watch video Coding Challenge online without registration, duration hours minute second in high quality. This video was added by user The Coding Train 30 July 2018, don't forget to share it with your friends and acquaintances, it has been viewed on our site 121,346 once and liked it 3.1 thousand people.