title
Coding Challenge #111: Animated Sprites
description
In this coding challenge, I load a sprite sheet and create multiple animated sprites with the p5.js library. Code: https://thecodingtrain.com/challenges/111-animated-sprites
đšī¸ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/vhnFx1mml
đĨ Previous video: https://youtu.be/DhFZfzOvNTU?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ Next video: https://youtu.be/p4Iz0XJY-Qk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
đĨ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
References:
đ Horse Sprite Sheet: https://opengameart.org/content/2d-platformer-art-assets-from-horse-of-spring
đ Sprite (computer graphics): https://en.wikipedia.org/wiki/Sprite_(computer_graphics)
Videos:
đ Guest Tutorial #6: The Modulo Operator with Golan Levin: https://youtu.be/r5Iy3v1co0A
đ´ Coding Train Live 147: https://youtu.be/Sz52VkVcW5o?t=9180s
Related Coding Challenges:
đ #88 Snowfall: https://youtu.be/cl-mHFCGzYk
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/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
#spriteanimation #oop #p5js #javascript
detail
{'title': 'Coding Challenge #111: Animated Sprites', 'heatmap': [{'end': 206.529, 'start': 165.826, 'weight': 0.905}, {'end': 314.1, 'start': 288.899, 'weight': 0.734}, {'end': 374.164, 'start': 334.175, 'weight': 0.717}, {'end': 482.935, 'start': 426.78, 'weight': 0.721}, {'end': 527.529, 'start': 501.973, 'weight': 0.706}], 'summary': 'Covers creating animated sprites in p5 using sprite sheets, chopping them into images, and playing sequences to make a running person animation, while also discussing sprite sheets, json data, and fixing animation issues for smoother game development.', 'chapters': [{'end': 88.616, 'segs': [{'end': 35.233, 'src': 'embed', 'start': 2.118, 'weight': 3, 'content': [{'end': 5.09, 'text': 'Hello Welcome to a coding challenge.', 'start': 2.118, 'duration': 2.972}, {'end': 9.336, 'text': 'In this coding challenge, I am going to make animated sprite.', 'start': 5.13, 'duration': 4.206}, {'end': 12.638, 'text': 'This is actually a page on my website.', 'start': 10.077, 'duration': 2.561}, {'end': 13.378, 'text': 'I have a website.', 'start': 12.678, 'duration': 0.7}, {'end': 14.198, 'text': 'Yes, thank you very much.', 'start': 13.398, 'duration': 0.8}, {'end': 18.42, 'text': 'With an example that I made apparently seven years ago.', 'start': 15.339, 'duration': 3.081}, {'end': 20.601, 'text': 'You can download the code for this.', 'start': 19.1, 'duration': 1.501}, {'end': 35.233, 'text': "It's made in processing and it is loading a sequence of images and playing those images in sequence in multiple places at different speeds to create this running person thing across the screen.", 'start': 21.081, 'duration': 14.152}], 'summary': 'Coding challenge: making an animated sprite on a website, loading and playing images in sequence at different speeds.', 'duration': 33.115, 'max_score': 2.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY2118.jpg'}, {'end': 88.616, 'src': 'embed', 'start': 44.14, 'weight': 0, 'content': [{'end': 53.187, 'text': 'To chop up that sprite sheet into lots of little images and then to play those images as a sequence and make an animated sprite class that you can use.', 'start': 44.14, 'duration': 9.047}, {'end': 56.89, 'text': 'And this is a very common technique used in games and all sorts of other stuff.', 'start': 53.227, 'duration': 3.663}, {'end': 58.732, 'text': "So let's get started.", 'start': 57.11, 'duration': 1.622}, {'end': 60.633, 'text': 'Now, thank you to Dragon Z.', 'start': 58.792, 'duration': 1.841}, {'end': 72.744, 'text': 'sorry, who suggested that I use this wonderful image sequence of a running horse, which comes from opengameart.org.', 'start': 63.979, 'duration': 8.765}, {'end': 80.409, 'text': 'This is under Creative Commons license, so I need to attribute it, which I am doing right now.', 'start': 73.265, 'duration': 7.144}, {'end': 81.309, 'text': "Hello, I'm using this.", 'start': 80.529, 'duration': 0.78}, {'end': 87.394, 'text': 'So you can find a lot of free and open art that you can use here.', 'start': 82.45, 'duration': 4.944}, {'end': 88.616, 'text': "So I'm going to use this.", 'start': 87.534, 'duration': 1.082}], 'summary': 'Creating an animated sprite class from an image sequence, suggested by dragon z, sourced from opengameart.org.', 'duration': 44.476, 'max_score': 44.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY44140.jpg'}], 'start': 2.118, 'title': 'Creating animated sprite in p5', 'summary': 'Discusses creating an animated sprite in p5 by loading a sprite sheet, chopping it into images, and playing those images as a sequence to create a running person animation, referencing an example made seven years ago and utilizing an image sequence of a running horse from opengameart.org.', 'chapters': [{'end': 88.616, 'start': 2.118, 'title': 'Creating animated sprite in p5', 'summary': 'Discusses creating an animated sprite in p5 by loading a sprite sheet, chopping it into images, and playing those images as a sequence to create a running person animation, referencing an example made seven years ago and utilizing an image sequence of a running horse from opengameart.org.', 'duration': 86.498, 'highlights': ['Creating an animated sprite by loading a sprite sheet, chopping it into images, and playing those images as a sequence. ', 'Referencing an example made apparently seven years ago. ', 'Using an image sequence of a running horse from opengameart.org. ', 'Mentioning the availability of free and open art on opengameart.org. ']}], 'duration': 86.498, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY2118.jpg', 'highlights': ['Creating an animated sprite by loading a sprite sheet, chopping it into images, and playing those images as a sequence.', 'Using an image sequence of a running horse from opengameart.org.', 'Mentioning the availability of free and open art on opengameart.org.', 'Referencing an example made apparently seven years ago.']}, {'end': 896.21, 'segs': [{'end': 115.773, 'src': 'embed', 'start': 90.398, 'weight': 0, 'content': [{'end': 97.506, 'text': 'If I were to click here and just download the assets, we would see that it would actually come as separate images, which I find to be very nice,', 'start': 90.398, 'duration': 7.108}, {'end': 99.168, 'text': 'because I like to load them one at a time.', 'start': 97.506, 'duration': 1.662}, {'end': 107.779, 'text': "But what it's actually often done and more efficient is to actually, and I have this right here, to load a single image.", 'start': 99.448, 'duration': 8.331}, {'end': 109.843, 'text': "So this is what's known as a sprite sheet.", 'start': 108.1, 'duration': 1.743}, {'end': 115.773, 'text': 'A sprite sheet is a single image that has each frame of an animation for that sprite.', 'start': 110.163, 'duration': 5.61}], 'summary': 'Loading sprite sheet is more efficient than separate images.', 'duration': 25.375, 'max_score': 90.398, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY90398.jpg'}, {'end': 211.352, 'src': 'heatmap', 'start': 165.826, 'weight': 1, 'content': [{'end': 175.551, 'text': 'So this is not necessary, but again, thank you to Dragon, who submitted this, also sent me a JSON file.', 'start': 165.826, 'duration': 9.725}, {'end': 177.031, 'text': 'So this is actually quite convenient.', 'start': 175.571, 'duration': 1.46}, {'end': 184.494, 'text': 'This is a JSON file that actually has the information about where each frame of the sprite is in that image.', 'start': 177.451, 'duration': 7.043}, {'end': 185.935, 'text': 'It has its x, y, and its width and height.', 'start': 184.514, 'duration': 1.421}, {'end': 191.699, 'text': 'Now it turns out this is really just a grid, so I could probably just do this mathematically very easily.', 'start': 186.255, 'duration': 5.444}, {'end': 193.72, 'text': 'but this is sort of nice that I can maybe load this in.', 'start': 191.699, 'duration': 2.021}, {'end': 196.002, 'text': "So let's get started with this right now.", 'start': 193.74, 'duration': 2.262}, {'end': 200.345, 'text': 'So first thing I want to do is I am going to write a preload function.', 'start': 196.702, 'duration': 3.643}, {'end': 206.529, 'text': "I'm using again the p5 library and preload allows me to load media assets before the program begins,", 'start': 200.365, 'duration': 6.164}, {'end': 211.352, 'text': "sort of saves me from callbacks and promises and that sort of stuff which is useful, but I don't need that right now.", 'start': 206.529, 'duration': 4.823}], 'summary': 'The json file contains sprite frame information with x, y, width, and height. preload function in p5 library is used to load media assets before the program starts.', 'duration': 33.901, 'max_score': 165.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY165826.jpg'}, {'end': 277.53, 'src': 'embed', 'start': 249.468, 'weight': 3, 'content': [{'end': 254.912, 'text': "to the canvas, and in setup, let's console.log the sprite data.", 'start': 249.468, 'duration': 5.444}, {'end': 256.373, 'text': 'So this is the first step.', 'start': 255.212, 'duration': 1.161}, {'end': 260.295, 'text': 'And again, this is a bit of over, this is a lot of extra stuff.', 'start': 256.933, 'duration': 3.362}, {'end': 266.239, 'text': "I could just load a bunch of images, or I don't necessarily need the JSON file, but this is nice, I like it, I like it.", 'start': 261.435, 'duration': 4.804}, {'end': 268.581, 'text': "Okay, so let's go back.", 'start': 267.26, 'duration': 1.321}, {'end': 273.225, 'text': "Whoops And of course, everything's gone wrong.", 'start': 269.381, 'duration': 3.844}, {'end': 277.53, 'text': "So it couldn't get horse.json, and it couldn't get horse.png.", 'start': 273.785, 'duration': 3.745}], 'summary': 'Troubles encountered while loading horse.json and horse.png for canvas setup.', 'duration': 28.062, 'max_score': 249.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY249468.jpg'}, {'end': 319.444, 'src': 'heatmap', 'start': 288.899, 'weight': 0.734, 'content': [{'end': 289.279, 'text': 'Here we go.', 'start': 288.899, 'duration': 0.38}, {'end': 291.801, 'text': 'So we can see this came in.', 'start': 290.32, 'duration': 1.481}, {'end': 293.722, 'text': 'So I definitely have the data there.', 'start': 292.241, 'duration': 1.481}, {'end': 298.465, 'text': 'I have the position and the name of each element.', 'start': 294.563, 'duration': 3.902}, {'end': 300.866, 'text': "And then why don't I see, ah.", 'start': 298.545, 'duration': 2.321}, {'end': 303.488, 'text': "So I'm trying to draw the image and I completely forgot.", 'start': 301.587, 'duration': 1.901}, {'end': 306.31, 'text': "If I'm going to draw the image, I've got to say where to draw the image.", 'start': 303.768, 'duration': 2.542}, {'end': 310.997, 'text': "And I'm going to draw it at 0, 0.", 'start': 306.67, 'duration': 4.327}, {'end': 311.418, 'text': 'There we go.', 'start': 310.998, 'duration': 0.42}, {'end': 314.1, 'text': 'OK, so next step.', 'start': 312.219, 'duration': 1.881}, {'end': 319.444, 'text': "What I want to do now is I don't want to just display the entire sprite sheet.", 'start': 314.701, 'duration': 4.743}], 'summary': 'Troubleshooting image drawing, position, and elements in sprite sheet.', 'duration': 30.545, 'max_score': 288.899, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY288899.jpg'}, {'end': 376.685, 'src': 'heatmap', 'start': 323.567, 'weight': 4, 'content': [{'end': 325.168, 'text': "And what I'm going to do is I'm going to create a variable.", 'start': 323.567, 'duration': 1.601}, {'end': 328.491, 'text': "And I'm going to say let animation equal an array.", 'start': 325.729, 'duration': 2.762}, {'end': 333.594, 'text': 'So the array is going to be each frame, an image for each frame of the animation.', 'start': 329.251, 'duration': 4.343}, {'end': 346.86, 'text': 'So assuming I have that data, I can see if I look at the JSON file, right? Once again, all of the data is in a JSON array called frames.', 'start': 334.175, 'duration': 12.685}, {'end': 349.382, 'text': "So I'm going to say, sorry, back into the code.", 'start': 347.32, 'duration': 2.062}, {'end': 358.199, 'text': "I'm going to say let frames equal sprite data dot frames.", 'start': 350.356, 'duration': 7.843}, {'end': 359.499, 'text': "I don't know if that's totally necessary.", 'start': 358.219, 'duration': 1.28}, {'end': 365.301, 'text': 'For let i equals 0, i is less than frames dot length, i plus plus.', 'start': 359.879, 'duration': 5.422}, {'end': 369.282, 'text': "And then I'm going to get, sorry, I'm going to look at the JSON again.", 'start': 365.981, 'duration': 3.301}, {'end': 371.943, 'text': 'And now for each one, I want to know about the position.', 'start': 369.302, 'duration': 2.641}, {'end': 374.164, 'text': "This x, y width and height is what's important to me.", 'start': 371.983, 'duration': 2.181}, {'end': 376.685, 'text': "I'm having trouble.", 'start': 375.764, 'duration': 0.921}], 'summary': 'Creating an array for animation frames, accessing data from a json array, and iterating through frames for position details.', 'duration': 53.118, 'max_score': 323.567, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY323567.jpg'}, {'end': 482.935, 'src': 'heatmap', 'start': 426.78, 'weight': 0.721, 'content': [{'end': 434.122, 'text': 'Now again, a convention might be, this is one way of doing it, which arguably might not be the quote unquote best or most efficient way.', 'start': 426.78, 'duration': 7.342}, {'end': 439.763, 'text': "You can actually just leave everything in a sprite sheet, and later I could just be like, when it's time to draw stuff, I could pull stuff out.", 'start': 434.402, 'duration': 5.361}, {'end': 443.223, 'text': "But I'm choosing to, in setup, just pull out the sections of the image.", 'start': 440.063, 'duration': 3.16}, {'end': 447.584, 'text': "And I'm going to console log that array now.", 'start': 444.604, 'duration': 2.98}, {'end': 450.825, 'text': 'And we can see I have an array with seven images in it.', 'start': 447.884, 'duration': 2.941}, {'end': 462.094, 'text': 'So now, if I were to say draw animation index zero, all I see is that one.', 'start': 451.781, 'duration': 10.313}, {'end': 466.379, 'text': 'If I were to say draw animation index two, I see that one.', 'start': 462.194, 'duration': 4.185}, {'end': 467.2, 'text': 'So this is working.', 'start': 466.419, 'duration': 0.781}, {'end': 475.294, 'text': "And guess what? Animation frame count Whoop, and then can't read property width of undefined.", 'start': 467.6, 'duration': 7.694}, {'end': 478.234, 'text': 'So you saw it for a second there, and then it went away.', 'start': 475.334, 'duration': 2.9}, {'end': 482.935, 'text': "Why did it go away? Well, it went away because there's only seven images there.", 'start': 478.475, 'duration': 4.46}], 'summary': 'Setting up image sections in an array with seven images for animation indexing.', 'duration': 56.155, 'max_score': 426.78, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY426780.jpg'}, {'end': 528.25, 'src': 'heatmap', 'start': 501.973, 'weight': 0.706, 'content': [{'end': 506.276, 'text': 'OK, and Golan Levin came on The Coding Train and did a guest video about that operation.', 'start': 501.973, 'duration': 4.303}, {'end': 508.959, 'text': 'But what this operation does for me in the code right now,', 'start': 506.517, 'duration': 2.442}, {'end': 515.864, 'text': "the modulo operation is it gives me a modulus value that's always between 0 and the end of the array.", 'start': 508.959, 'duration': 6.905}, {'end': 518.086, 'text': "So it's the remainder of division.", 'start': 516.365, 'duration': 1.721}, {'end': 524.071, 'text': 'So this frame count modulo animation.length, watch what this does.', 'start': 518.366, 'duration': 5.705}, {'end': 527.029, 'text': 'Now I see that animation repeating.', 'start': 525.208, 'duration': 1.821}, {'end': 527.529, 'text': 'And look at that.', 'start': 527.069, 'duration': 0.46}, {'end': 528.25, 'text': 'Look at it.', 'start': 527.91, 'duration': 0.34}], 'summary': "Golan levin's video on modulo operation provides a modulus value between 0 and end of array, enabling repeating animation.", 'duration': 26.277, 'max_score': 501.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY501973.jpg'}, {'end': 743.15, 'src': 'embed', 'start': 713.409, 'weight': 5, 'content': [{'end': 715.61, 'text': "So I've basically taken the idea.", 'start': 713.409, 'duration': 2.201}, {'end': 720.491, 'text': "I've created an object that has stored in it an array of images.", 'start': 715.61, 'duration': 4.881}, {'end': 721.471, 'text': "that's the animation.", 'start': 720.491, 'duration': 0.98}, {'end': 726.312, 'text': 'it has the length of that array, it has speed, how fast should it cycle through them and where is it currently?', 'start': 721.471, 'duration': 4.841}, {'end': 731.673, 'text': "So now if we run this, and I've got some error here.", 'start': 726.672, 'duration': 5.001}, {'end': 734.594, 'text': 'Sprite.js line 10.', 'start': 732.274, 'duration': 2.32}, {'end': 743.15, 'text': "This.animation, this.index, so let's just Let's just look at some stuff here to see what's going on.", 'start': 734.594, 'duration': 8.556}], 'summary': 'Object created with array of images for animation, with speed and length parameters.', 'duration': 29.741, 'max_score': 713.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY713409.jpg'}], 'start': 90.398, 'title': 'Sprite sheets and animations in javascript', 'summary': "Discusses the concept of sprite sheets and json data to efficiently load and display animation frames in web development, using p5 library's preload function and creating multiple instances with varying speeds and positions in javascript.", 'chapters': [{'end': 211.352, 'start': 90.398, 'title': 'Working with sprite sheets in web development', 'summary': "Discusses the concept of sprite sheets, a single image containing multiple frames of an animation, and the use of a json file to retrieve the position and dimensions of each frame, enabling efficient loading and display of the frames. it also highlights the use of the p5 library's preload function for loading media assets before program execution.", 'duration': 120.954, 'highlights': ['The concept of sprite sheets and their use in web development is explained, emphasizing the efficiency of loading a single image containing multiple animation frames. Sprite sheets contain multiple frames of an animation within a single image, enabling efficient loading and display of frames.', 'The use of a JSON file to store the position and dimensions of each frame within the sprite sheet is discussed, providing a convenient method for retrieving frame information. A JSON file is used to store the x, y, width, and height of each frame within the sprite sheet, enabling easy retrieval of frame information.', "The application of the p5 library's preload function for loading media assets before program execution is highlighted, offering a more streamlined approach compared to callbacks and promises. The p5 library's preload function allows for the loading of media assets before program execution, offering a streamlined approach without the need for callbacks or promises."]}, {'end': 896.21, 'start': 211.712, 'title': 'Creating animations with sprite sheets in javascript', 'summary': 'Focuses on using sprite sheets and json data to create animations in javascript using p5 library, demonstrating the process of loading images and data, extracting individual frames, and encapsulating the animation into an object to create multiple instances with varying speeds and positions.', 'duration': 684.498, 'highlights': ['Using p5 library to load sprite sheet image and JSON data, and drawing the sprite sheet to the canvas The process involves using loadImage and loadJson functions from the p5 library to load the sprite sheet image and JSON data, and then drawing the sprite sheet to the canvas.', 'Extracting individual frames from the sprite sheet using JSON data and creating an array of images for the animation The JSON data is used to extract individual frames from the sprite sheet, creating an array of images for the animation, enabling the display of each piece of the sprite sheet one at a time.', 'Encapsulating the animation into an object, allowing the creation of multiple instances with varying speeds and positions The process involves encapsulating the animation into an object, enabling the creation of multiple instances with varying speeds and positions, and demonstrating the use of a for loop to create and animate multiple instances.']}], 'duration': 805.812, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY90398.jpg', 'highlights': ['The concept of sprite sheets and their use in web development is explained, emphasizing the efficiency of loading a single image containing multiple animation frames.', 'The use of a JSON file to store the position and dimensions of each frame within the sprite sheet is discussed, providing a convenient method for retrieving frame information.', "The application of the p5 library's preload function for loading media assets before program execution is highlighted, offering a more streamlined approach compared to callbacks and promises.", 'Using p5 library to load sprite sheet image and JSON data, and drawing the sprite sheet to the canvas.', 'Extracting individual frames from the sprite sheet using JSON data and creating an array of images for the animation.', 'Encapsulating the animation into an object, allowing the creation of multiple instances with varying speeds and positions.']}, {'end': 1185.695, 'segs': [{'end': 977.251, 'src': 'embed', 'start': 947.999, 'weight': 0, 'content': [{'end': 953.963, 'text': 'So all I need to do is floor this dot index before I apply modulo.', 'start': 947.999, 'duration': 5.964}, {'end': 956.717, 'text': 'And then I can put that in here.', 'start': 955.236, 'duration': 1.481}, {'end': 961.26, 'text': 'So floor is an operation that just eliminates the decimal point.', 'start': 957.738, 'duration': 3.522}, {'end': 968.405, 'text': 'I want the index itself to go up slowly by a decimal point, but I only want to show I have fewer frames.', 'start': 961.701, 'duration': 6.704}, {'end': 970.607, 'text': 'I want to show the same frame a bunch of times.', 'start': 968.705, 'duration': 1.902}, {'end': 977.251, 'text': "So if it's 0.2, it's going to take five frames for it to get all the way up to the next whole number.", 'start': 971.047, 'duration': 6.204}], 'summary': 'Using floor function to increment index and reduce frames for smoother transition.', 'duration': 29.252, 'max_score': 947.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY947999.jpg'}, {'end': 1028.289, 'src': 'embed', 'start': 999.842, 'weight': 1, 'content': [{'end': 1003.664, 'text': "And maybe the speed that they're running doesn't really feel right.", 'start': 999.842, 'duration': 3.822}, {'end': 1010.959, 'text': "So even though it's the speed of going through the index, I probably should increase that by a scale of like, Five, let's try that.", 'start': 1003.704, 'duration': 7.255}, {'end': 1013.981, 'text': 'This looks a bit more realistic.', 'start': 1012.52, 'duration': 1.461}, {'end': 1017.223, 'text': "Now I have, it looks like they're sort of moving at speed.", 'start': 1014.081, 'duration': 3.142}, {'end': 1028.289, 'text': 'And then I could obviously do something like if this.x is greater than width, then I want to say is this.x equals negative?', 'start': 1017.963, 'duration': 10.326}], 'summary': 'Adjusting speed by a scale of 5 for a more realistic movement.', 'duration': 28.447, 'max_score': 999.842, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY999842.jpg'}, {'end': 1106.824, 'src': 'embed', 'start': 1076.045, 'weight': 3, 'content': [{'end': 1078.186, 'text': 'I could have different sprites have different image sequences.', 'start': 1076.045, 'duration': 2.141}, {'end': 1080.028, 'text': 'I could start designing the background.', 'start': 1078.407, 'duration': 1.621}, {'end': 1085.731, 'text': 'I could apply physics to the way that the xy position moves around the screen.', 'start': 1080.408, 'duration': 5.323}, {'end': 1086.772, 'text': 'I could start having collisions.', 'start': 1085.771, 'duration': 1.001}, {'end': 1099.34, 'text': "The point is that anything that I've made in all my nature of code or other coding challenges that have an object moving around the screen the simple games This would allow me to have an animated sprite.", 'start': 1087.052, 'duration': 12.288}, {'end': 1103.482, 'text': 'And I might even further want to encapsulate the idea of a sprite.', 'start': 1099.36, 'duration': 4.122}, {'end': 1106.824, 'text': 'Oh, this would be a great place for me to talk about inheritance.', 'start': 1103.582, 'duration': 3.242}], 'summary': 'Implementing diverse sprites, backgrounds, and physics for game development.', 'duration': 30.779, 'max_score': 1076.045, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY1076045.jpg'}, {'end': 1134.041, 'src': 'embed', 'start': 1107.784, 'weight': 4, 'content': [{'end': 1113.527, 'text': "So I could then make other objects that extend, that's an inheritance term, sprite.", 'start': 1107.784, 'duration': 5.743}, {'end': 1119.27, 'text': 'So I could make horses that are animated sprites, or frogs that are animated sprites, or puffins.', 'start': 1113.727, 'duration': 5.543}, {'end': 1120.531, 'text': "Puffin doesn't really do that.", 'start': 1119.851, 'duration': 0.68}, {'end': 1124.774, 'text': "So anyway, I'm a little bit off the rails here in my discussion.", 'start': 1120.771, 'duration': 4.003}, {'end': 1125.555, 'text': "Let's think about this.", 'start': 1124.914, 'duration': 0.641}, {'end': 1131.7, 'text': 'What could you do? Now one thing is, what would happen if I gave it a negative speed? I think mine would break.', 'start': 1125.795, 'duration': 5.905}, {'end': 1134.041, 'text': 'So this is a little challenge to you.', 'start': 1132.5, 'duration': 1.541}], 'summary': 'Discussion on extending objects, challenges with negative speed, and a call for action.', 'duration': 26.257, 'max_score': 1107.784, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY1107784.jpg'}, {'end': 1178.071, 'src': 'embed', 'start': 1148.913, 'weight': 2, 'content': [{'end': 1156.138, 'text': "Could you make something like this that has different animations for each op? So there's maybe five things, but they're different.", 'start': 1148.913, 'duration': 7.225}, {'end': 1158.579, 'text': 'Each one has its own animation sequence.', 'start': 1156.558, 'duration': 2.021}, {'end': 1162.842, 'text': "Could you do that? So could you design your own sprite sheet? So don't even do any code.", 'start': 1158.92, 'duration': 3.922}, {'end': 1165.584, 'text': 'Make your own sprite sheet and run it with this code exactly.', 'start': 1162.882, 'duration': 2.702}, {'end': 1167.085, 'text': "So there's so many things you could do.", 'start': 1165.784, 'duration': 1.301}, {'end': 1178.071, 'text': "Share with me in the comments, on Twitter, or at the link to the coding challenge URL in this video's description.", 'start': 1170.427, 'duration': 7.644}], 'summary': 'Request for different animations for each op, design own sprite sheet, and share results on twitter or coding challenge url.', 'duration': 29.158, 'max_score': 1148.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY1148913.jpg'}], 'start': 898.024, 'title': 'Sprite animation', 'summary': 'Discusses fixing sprite animation issue by applying floor operation to the index before modulo, resulting in smoother animation. it also demonstrates creating animated sprites for games, enabling different animation sequences and supporting physics and collisions for various game elements and interactions.', 'chapters': [{'end': 1017.223, 'start': 898.024, 'title': 'Fixing sprite animation issue', 'summary': 'Discusses fixing an error related to the sprite animation, by applying the floor operation to the index before applying modulo, resulting in a more realistic and smoother animation with frames being displayed at different speeds.', 'duration': 119.199, 'highlights': ['Applying floor operation to the index before applying modulo The chapter explains that by using the floor operation to eliminate the decimal point from the index before applying the modulo operation, the issue of invalid array indices for non-whole numbers is fixed, resulting in a more realistic and smoother animation.', 'Adjusting the speed of the animation by scaling the index It is mentioned that increasing the speed of the animation by scaling the index results in a more realistic movement, with the frames being displayed at a speed that feels more natural, achieved by increasing the speed by a scale of 5.', 'Observing the different speeds of the frames in the animation The chapter discusses the outcome of the modification, where the frames are displayed at different speeds, resulting in a more realistic animation with the sprites appearing to be running in place at varying speeds.']}, {'end': 1185.695, 'start': 1017.963, 'title': 'Creating animated sprites for games', 'summary': 'Demonstrates creating animated sprites for games, allowing for objects to have different animation sequences and supporting the addition of physics and collisions, thereby enabling the creation of various game elements and interactions.', 'duration': 167.732, 'highlights': ['Objects can have different animation sequences The chapter discusses how to design sprite sheets with different animations for each object, enabling diverse and unique visual elements in the game.', 'Support for physics and collisions The tutorial mentions the ability to apply physics to the xy position of objects and introduces support for collisions, facilitating the creation of interactive game elements.', 'Encapsulation of sprite concept and inheritance The chapter touches on encapsulating the idea of a sprite and extending it through inheritance, allowing the creation of various animated objects such as horses, frogs, and puffins.']}], 'duration': 287.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3noMeuufLZY/pics/3noMeuufLZY898024.jpg', 'highlights': ['Applying floor operation to the index before applying modulo fixes invalid array indices for non-whole numbers, resulting in smoother animation.', 'Adjusting the speed of the animation by scaling the index results in a more realistic movement, achieved by increasing the speed by a scale of 5.', 'Objects can have different animation sequences, enabling diverse and unique visual elements in the game.', 'Support for physics and collisions facilitates the creation of interactive game elements.', 'Encapsulation of sprite concept and inheritance allows the creation of various animated objects such as horses, frogs, and puffins.']}], 'highlights': ["The application of the p5 library's preload function for loading media assets before program execution is highlighted, offering a more streamlined approach compared to callbacks and promises.", 'Using p5 library to load sprite sheet image and JSON data, and drawing the sprite sheet to the canvas.', 'Encapsulating the animation into an object, allowing the creation of multiple instances with varying speeds and positions.', 'Objects can have different animation sequences, enabling diverse and unique visual elements in the game.', 'Support for physics and collisions facilitates the creation of interactive game elements.', 'Encapsulation of sprite concept and inheritance allows the creation of various animated objects such as horses, frogs, and puffins.', 'Creating an animated sprite by loading a sprite sheet, chopping it into images, and playing those images as a sequence.', 'The concept of sprite sheets and their use in web development is explained, emphasizing the efficiency of loading a single image containing multiple animation frames.', 'The use of a JSON file to store the position and dimensions of each frame within the sprite sheet is discussed, providing a convenient method for retrieving frame information.', 'Applying floor operation to the index before applying modulo fixes invalid array indices for non-whole numbers, resulting in smoother animation.', 'Adjusting the speed of the animation by scaling the index results in a more realistic movement, achieved by increasing the speed by a scale of 5.', 'Using an image sequence of a running horse from opengameart.org.', 'Mentioning the availability of free and open art on opengameart.org.', 'Referencing an example made apparently seven years ago.']}