Coding Challenge

[@DaveBriccetti]

Go modulo! Hurray!

[@chrisferrett8910]

I can’t stop watching your vids. You’re legitimately the Vsauce of computer science

[@keff_cb]

Fish Carret jajajaj nice comparison! Quite acurate xD

[@pandabutter1266]

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

[@TheCodingTrain]

Try either of these playlists to start from scratch! kzbin.infoplaylists?view=50&shelf_id=14&sort=dd kzbin.infoplaylists?view=50&shelf_id=2&sort=dd

[@395leandro]

Panda Butter He's like the Bob Ross of coding.

[@onarandomnote25]

@@395leandro best description ever, just discovered these videos and it has been a life saver in understanding code.

[@percyjacks8170]

This is just fantastic. I love seeing your thought process as you code!

[@HoangNguyen-qk5fz]

For those who want to create their own sprites, you can use this page to upload your images to create a sprite sheet, it's the exact same json object format: www.codeandweb.com/free-sprite-sheet-packer Happy Training! Get it? Training, coding train, happy coding, nvm.

[@Sidthu96321]

Your teaching makes to fell for what ever you teach .👌👌👌 A best teacher.

[@anwitmondal6417]

Thanks man!!!! It is rare to see people who share their knowledge as freely as you do.

[@WhytePantherLF]

Daniel I have to admit that I stumbled across your videos quite by accident... I couldn't even tell you the search I was doing at the time, but have enjoyed (believe it or not) MOST of your video series... (yes, I've been watching for a while) I got started WAY,WAY back in 1980 with my first computer and BASIC... soon transitioned to assembler because of memory and performance restrictions writing and replicating the THEN hottest video games. I would say I have a solid and unique perspective on a LOT of what has to happen behind the scenes to make all of what is demonstrated in your series look so easy. (... standing on the shoulders of giants ...) Your enthusiasm and joking self deprecation make the series entertaining and fun to watch, not to mention informative... and reminds me that it _IS_ ok to stand on the shoulders of giants and NOT have to do all of the grunt work yourself... you reminded me that programming can and should still be fun... even after almost 40 years... and that sometimes "good enough" is MORE THAN good enough. Are there areas where less than ideal programming practices are demonstrated... sure... but more often than not you call yourself out... but those instances are dwarfed but the fun you bring back to something I've loved for decades that had, as of late, become sadly tedious. Thanks again for the fun... and DO NOT STOP HAVING FUN (as you obviously do) while making the series Rock on good sir!

[@Amr-Ibrahim-AI]

WhytePantherLF This comment is inspirational. I started a bit later then you, Sir. I started programming in 1985 and it has been a long journey. My impressions are almost identical to yours. I'm enjoying these videos and learning new ideas (which is a good sign at my age! 🙂)

[@kenchen3902]

I am currently working on a simple game development practice and I stuck at animating my characters! Your video suggested a very nice approach to do this. Fantastic!!! Thank you very much.

[@junuhunuproductions]

I enjoyed this so simple yet incredibly fun tutorial :)

[@burningblood7529]

Same

[@zevdraven1658]

You all prolly dont give a damn but does someone know of a method to get back into an instagram account?? I stupidly lost the login password. I would love any tips you can offer me.

[@kodaotis9891]

@Zev Draven Instablaster :)

[@zevdraven1658]

@Koda Otis Thanks so much for your reply. I got to the site on google and I'm waiting for the hacking stuff now. Looks like it's gonna take a while so I will get back to you later with my results.

[@zevdraven1658]

@Koda Otis it did the trick and I finally got access to my account again. Im so happy! Thanks so much you saved my account!

[@MirkoCrafter]

What's so nice about Dan's videos is, that all of them are like mini-lectures, so you learn all of the beginner and intermediate programming without it even feeling like lessons. It's just a really effective way of learning, at least for me ^^

[@TheCodingTrain]

I'm so glad to hear this feedback.

[@espinosajuanma]

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

[@tyulik]

amazing, I was doing animation with frameCount, didn't think about modulousueses + floor + speed , index

[@keff_cb]

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

[@tusharmaurya1668]

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

[@CuongNguyen-le5ic]

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.

[@waelandelder9698]

You are a great coding teacher, keep up the good work!

[@KuraIthys]

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.

[@CompilerZ]

best coder in this planet , Thump up mate :)

[@Crisisdarkness]

I did not know his channel, he's one of the best youtube teachers, it's fun to learn with him, thanks

[@SaintPepsiSanCoca]

wow, you're at 531k subscribers, you need more, spread you coding train to the edges of the world!

[@beaverjoe9171]

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

[@fckyo333ujhjjkrrrr]

Cool, I’ve started learning sfml and this is really helpful in terms of graphics

[@TaroshG]

My favorite programmer tutor

[@christianjt7018]

Awesome project, it is exactly what I was looking for. thanks

[@bennybrouwer]

Hi Daniel, since these are free pictures, you might want to publish them with a few changes: a horn between the ears makes it a unicorn; few changes give the skin rainbow colours. I use more boring pictures from this site: a set of raven in every stage of flight and with your info on running horses . . . - can change speed - give it a Z-value without mathematical meaning but higher Z-value decreases size and gives the illusion of depth - Use random x,y (with x always increasing to get a flock-idea) and the y-value pushes them to the top of the screen so that the major part remains in the sky. Perlin Noise would be beautiful for the y-value. Unfortunately, most interesting picture(sequence)s are made with Blender, on this site anyway, and not to be used in a JavaScript app. P.S. Watched your live vid yesterday - can not wait to see the compiled lessons :)

[@samuelc.7867]

School: "You can't use Wikipedia as a source for information" Literally everyone who is not in school: "Let me just use Wikipedia to learn something new"

[@shanewalsch]

Really dont know why, wiki mostly uses info from books

[@BloodyScythe666]

this was great. easy to follow, nice to look at

[@PandoraMakesGames]

That's awesome man, I have to do this too when I build AI for games.

[@staticvoidsolutions4998]

your videos are like salted peanuts with beer... can't stop eating them!

[@jacobonsrud6938]

Damn that atom theme is nice

[@s000sdas]

You're the most comic coder in the world

[@guiltazaour2871]

the only maybe very nice

[@Hojayganaa]

Your videos are fantastic. I loved watching your video. Please make a video on how we can create parallax (infinite scrolling backgrounds) and use tilemap in p5js.

[@alexhermanmusic9113]

Nice and fun video to watch (as always!). Now we have got the sprites moving, could we perhaps animate a sprite in a cool way, like turning around slowly before beginning to walking from point A to another point OR maybe even some realistic AI ish movement going randomly from one place to another - something like a real person does: we stop, turn around and then comtinue walking to another point, rather than violently spin around the axis and start moving immediately. All it "an advanced sprite animation". And how about combining two sprites? Say, a helicopter and its rotor/? Thank youuu!!!

[@randomaccount6146]

I think it would be better if the class was named Animation and the array was named sprites

[@nishuz]

Your coding skills are great. ;-D

[@Popfictn]

Dan, could you do a tutorial on how to port an animation like this into a Squarespace landing page? Thanks, your videos have proved invaluable. :-)

[@anuraghazra4772]

I hope you reach 1M very soon.. Like a boss!!!!!!!

[@roshanpawara8717]

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

[@roshanpawara8717]

I also tweeted it to you yesterday but I guess you didn't see it yet.😅😅

[@nycoshouse]

good job ! love your videos ! you are a wonderful teacher ! hope you will continue and keep your flame ! love how you describe the path of mind to obtain what you want to realize

[@Stonebyte]

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.

[@francomiranda706]

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

[@anuraghazra4772]

OMG, thank you very much is constructor is really handy. Now I can make progress in my 2d game

[@HD-Shadowcloak]

I was looking for that THANK YOU

[@LittyXavier]

The only thing that makes me want to code are your videos

[@DaveBriccetti]

I didn’t write this, but take a look at how Phaser 3 uses animation and sprite sheets in this very cool example: labs.phaser.io/view.html?src=src\animation\cubes.js&v=dev Here’s the spritesheet: github.com/photonstorm/phaser3-examples/blob/master/public/assets/animations/cube.png

[@jaydenwyatt5798]

Amazing as always!

[@adhoom]

Awesome work, Dan!

[@luismiguelgallegogomez8000]

Awesome and fun as always! :)

[@vitormelo22]

Thanks, I love you!!!

[@ManOnHorizon]

What's the point of having width & height in every frame in json file? Isn't it the same in any case?

[@andresmoge3227]

Daniel! you picked the wrong horse. The horse he was showing you is a fantastic piece of sprite art. I really think it is considered to be one of the best pieces out there!. I bet that he was thinking: He wanted to see a great programmer like you, work with a great piece of art like that. How fatastic would that be??. the horse you picked was completely ok, medium avrigge random ok. It's by the way, very typicol programmers to be atrakted to medium random avrige completely ok art.. But nice video! Thanx, Im gona use that FANTASTIC HORSE my self :) If I ever succeed in making a program with no error LOL!

[@TechHeadHD2]

NEXT CHALLENGE: Html5 screensaver that works like the usual ones. ie: activates while afk,de-activates on mouse move or keydown,and make it work with html,js and CSS combined. good luck.

[@RupertBruce]

Threw yourself in a loop there with 'puffins' 🙂

[@inknightmarionne9259]

I have noticed he hasn't started sprite collision, yet

[@groundknowledge5989]

Please, try to show whole code at the end it will be great help, thanks

[@gennukes2453]

I currently don't have a computer but I want to get some code time in. Is there a specific android application that you would suggest to code? I have majorly enjoyed your code for awhile and would like to test some things on mobile

[@morphex6221]

Very helpful! But a little rushed.

[@evanhood9059]

Is there a video of this where you leave it in the spritesheet and don't load it from a JSON?

[@kosmic000]

amazing informative and entertaining !!!

[@worldofstrings]

Hi Daniel, Alway's great to watch your show, I'm somewhat confused with rows and columns. Do rows go on the x-axis and columns on the y-axis?

[@disdis6127]

Make video on coding RPG game in p5.js

[@codemage123]

hi Dan so iv been watching your html tutorials lately and thare is one thing no one in all the videos iv serched has covered, that is how do i make a link like a text object i click on to take me somwhere else is that posable plz help i wouldnt ask this unless thare is no one that knows

[@natalyherrera8627]

The processing file doesnt work when my speed is 0.1

[@umarhasnain7369]

0:14 you're welcome and thanks too sir

[@LittyXavier]

Can I make this without a JSON file, and just the sprite sheet?

[@kevnar]

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

[@xRuneGunx]

how come certain videos we declare variables with 'var' and some are declared with 'let'?

[@liamonica7768]

excuse me Sir, where can I find the full version of the index.html? Thank you

[@justwolfyalright]

Where can i get the JSON horse file image thingy

[@maxxsteele9396]

I downloaded the example but the horses don't move their legs

[@scottborland1447]

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

[@taylorjordan4023]

THIS IS AMAZING! now let say i would then like to add a mouse pressed function*? so that when i click on a horse it ceases its animation and changes into a seated horse lets say. How would i go about that? Im new to the coding world. (sorry if its a simple question) :D

[@TheCodingTrain]

Would you mind asking at discourse.processing.org/! It's a better platform for Processing and p5.js related code questions. You can share code there easily! Feel free to link from here to your post.

[@taylorjordan4023]

@@TheCodingTrain discourse.processing.org/t/p5-simple-game-question/8415?u=helpmeimnew :D i did it i think

[@hansmaas1644]

I need to play 4 images in a row after each other in repeat, I succeed but the previous image shown stays visable, how can i remove it (I use an array to play the images in a row, so I think removing the previous image of the current image, but I don't know how)

[@Riccowed]

Make sure to call the background() function in draw()

[@ocianogalad7020]

Ive program a simple airplane shooting game but I dont know how to put the effect of explosion when the bullet hit the the enemies and etc..

[@benstoffels5108]

What About making it a p5 function/class?

[@joaomelo7306]

You are the best

[@sksahil4374]

how did you find co-ordinate & height with of each frame from sprite sheet?

[@devworkstation5073]

Honestly you could make this animation and reverse it just by using pure css 😋

[@Jugurtha88]

Hi, how can i add images to the Javascript on CodePen, i knew that you need to put it on a cloud server but what do i have to do after that using the link on the loadImage fonction doesnt seems to work, help plz

[@veer9423]

Whats a good site for free png sequences? I didn't find many on opengameart.org. oh and how do you put a sequence in one single image easily? :)

[@gabrielnobel6778]

Can someone tell me why he isn't using the Sprite Class which already exists in p5? Is it bad written?

[@DLReach]

Has anyone looked at the Processing version of this on the Github? I am looking at it but it doesn't actually animate the sprites, just floats one image across the screen.

[@boratsagdiyev1586]

Came here to pauze an AnimatedSprite on collisions, guess i'm at the wrong video...

[@keithschaub7863]

Sprite. Better than 7 up!

[@noneofmynameswork1]

Is modular the other side of the % ?

[@antoinevernet6707]

How did you use browser console ? I guest p5js came in the process. I'm french, my english isn't perfect, please show me my mistake ;).

[@TheCodingTrain]

This workflow video might help: kzbin.info/www/bejne/fouXdWatebeUm8U Also: sublime text: kzbin.info/www/bejne/i3Srq5-Lnql3Z5I atom editor: kzbin.info/www/bejne/mmSylHmbrcpsf80 brackets: kzbin.info/www/bejne/pJ69k5uDltOJmbs codepen: kzbin.info/www/bejne/a5jJhpqEpbhpobs

[@warangel580]

quelle est ta question ? je n'ai pas compris

[@sweethomes674]

Excellent 😊

[@EmilyHeartWuzHere]

what if you wanted to do his but didn't have a JSON

[@EmilyHeartWuzHere]

*this

[@beaverjoe9171]

Second time follow because I almost forget how to do it.......But i should understand how it work in javascript way instead of only make this result.

[@alfeds6571]

Thank you!

[@filipemecenas]

Thanks alot

[@Lazyat]

Hi ! I love what you do and your videos, i want to try myself buti got 1001 errors on processing 3.4 and p5.js like SyntaxError:Expected an operand but found class at the class Sprite of this video, and also got a syntaxError for the let so i use var

[@michelleb6994]

Confused. When I click the Horse sprite link and download the zip file, I can't find the file with all the images in one and I don't see a .json file. (Also I agree with folks below, would be fun to see you incorporate this into one of your games)

[@TheCodingTrain]

Apologies, you can find the files here: github.com/CodingTrain/website/tree/master/CodingChallenges/CC_111_animated_sprite/horse

[@michelleb6994]

Thanks!

[@LittyXavier]

@@TheCodingTrain I cant find it?????????

[@avangersAht]

Your very advanced in java script but what i think can u not try this in other langs like C++ C# or you not knowing them ???

[@missb2052]

how would you do this without the spritedata?

[@Pooja_master]

Nice code

[@stevenbusch70]

Hi, I have been trying to figure something out for hours now with no luck. Does anyone have a simple idea on how to flip an image so that you can control a sprite running left or right with the keyboard arrows? I have tried using scale(-1,1) but it messes up the position of the sprite as the position is also inverted. I also tried using p5.play, but I would like to learn the basics without additional libraries. Many thanks. Steve

[@stevenbusch70]

I think I finally figured it out. Here is a still image flipped. Can anyone tell me if this is the best way? editor.p5js.org/MrBusch/sketches/1tz-9lk_A

[@주종헌-p8g]

What coding programs do you use?

[@meleecraft]

Oh no, something went wrong on my end! I followed the tutorial but my horse midway animation turned into koala and demanded cuddles. No me gusta