Coding Challenge #111: Animated Sprites

In this coding challenge, I load a sprite sheet and create multiple animated sprites with the p5.js library. #animation #spritesheet #p5js #codingchallenge


🔗 Horse Sprite Sheet:
🔗 Sprite (computer graphics):

🎥 Guest Tutorial 6: The Modulo Operator with Golan Levin:

🚂 Website:
💖 Patreon:
📚 Books:

🎥 Beginners:
🎥 Coding Challenges:







24 responses to “Coding Challenge #111: Animated Sprites”

  1. kevnar Avatar

    Gimmie 2 to 1 on the four horse, "Pinky's Brain"!

  2. Panda Butter Avatar

    I have no idea about coding or what youre talking about but I watch your videos because youre so entertaining

  3. Juan Manuel Espinosa Avatar

    I was hoping for this topic for a few weeks, thanks Dan!

  4. __ __ Avatar

    Nice one, I hope I saw this 3 years ago! Really informative and clear as always man.

  5. Nishchay Bhutoria Avatar

    Your coding skills are great. ;-D

  6. Bruuuce Ted Avatar

    I study the Game engine Unity 2017.3.0 I also use the sprite animation like you instructor. Although the code is c sharp / js(small part) but I like to learn your logic and I also study JS on my course. Thanks so much

  7. nio Avatar

    Someone please make animation sprite of Daniels Dance from coding challenge Racamans Sequence pt2.

  8. KuraIthys Avatar

    Very good.
    I learnt to do this 20 years ago using DirectX (6.21 – when it still had 2d support that wasn't an afterthought), and raw c++…
    Maybe a bit of the windows SDK mixed in to make it marginally easier to load a bitmap…

    But of course, there wasn't all that stuff to help out, and I had to do a whole heap of manual memory copying code…
    Fun times. XD

    I've still got Bresenham's line drawing algorithm burnt into my mind, since line drawing is THE most basic thing (after drawing individual points) of most graphics routines.

    Wanna draw a box? 4 lines. Wanna draw a filled box? Many lines.
    Wanna draw a circle? Line drawing algorithm with a more complex error function.

    Triangles? Draw diagonal lines down the screen then connect those lines with more lines.
    Polygons? See triangles.
    3d polygons? Draw triangles but with some extra steps to convert the coordinates of your triangle's points.

    There are complications all along the way, but when you get right down to it, pretty much anything you can think of starts with being able to draw lines.

    Drawing textured polygons? Draw a triangle, but when drawing the connecting lines change the pixel colour constantly. (according to a function that takes some texture mapping parameters and determines where each pixel in the texture space belongs on your polygon – these functions get increasingly complex as you add more details, like perspective correction, bilinear filtering, mipmapping anisotropy, etc.)
    Want to draw lit polygons? Learn how to draw gradient patterns – again, vary the colour of your line's pixels, but this time according to more maths, rather than texture mapping. (though that's also maths.)

    That one algorithm is the basis of so much.
    And what is that algorithm about?
    How to approximate a line when all you've got to work with is a regular grid of something.
    Obviously it's usually used with pixels on raster displays nowadays, but it was developed for plotters, and it works with other stuff that has similar properties – minecraft blocks, lego, stacks of DVD's, lights in an office tower, beads (the artistic kind, or something like a game of 'go' or 'reversi') and so on.

  9. Tynocerus Avatar

    Stop being so helpful, Daniel. It's seriously inconsiderate.

  10. Franco Miranda Avatar

    You should make a video about! It's a wonderful library that makes all of this stuff very simple!

  11. Yousef Avatar

    best coder in this planet , Thump up mate 🙂

  12. Cuong Nguyen Avatar

    Thanks, this and snowfall one show me how to do lots of 2D games from my childhood, good old time with so many good RPG from SNES era.

  13. Jayden Wyatt Avatar

    Amazing as always!

  14. Stoane Avatar

    The problem with using a horse is that it uses different techniques at different speeds. Like a human or any other being. So it will always look kindof stupid when altering its speed.

  15. Joao Melo Avatar

    You are the best

  16. Tushar Maurya Avatar

    I just wanna say THANKS for everything that you've done for us!

  17. Scott Borland Avatar

    Awesome video and could you do a part 2 where you had multiple animations that you could switch between for example, running and jumping?
    Edit: Also I just realised that the link on your website to the code (because I was trying to get the json file and image with all of the horse sprites on) doesn't work as the folder which you download is empty

  18. Dave Briccetti Avatar

    Go modulo! Hurray!

  19. AlterEgo Avatar

    Hi Dan, do you think you will be covering the Separating Axis Theorem at some point? I made an issue on it in your Rainbow Topics:

    I hope you do eventually as it's a great algorithm for collision handling in games and your style of teaching is both fun and informative and really helps to make difficult topics clear and easy to understand. Thanks!

  20. ROSHAN PAWARA Avatar

    @The Coding Train _ This channel completed 5 years yesterday!

  21. Tarosh G Avatar

    My favorite programmer tutor

  22. HD Avatar

    I was looking for that

  23. Sound Advice Avatar

    Is the any library which I can import in python and use the canvas and draw() in python just like how it works in p5? Ive been learning and using p5 for a while and now python. I would like to know which one is easier to use for canvas paint and graphics. Tho Im very comfortable with draw() functionalities in p5, my question is, is the createcanvas() in tkinter library as easy to implemend as draw() in p5?

Leave a Reply

Your email address will not be published. Required fields are marked *