Coding Challenge

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024

Комментарии • 174

  • @DaveBriccetti
    @DaveBriccetti 6 лет назад +151

    Go modulo! Hurray!

  • @Sidthu96321
    @Sidthu96321 6 лет назад +3

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

  • @kenchen3902
    @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.

  • @umarhasnain7369
    @umarhasnain7369 3 года назад

    0:14 you're welcome and thanks too sir

  • @keithschaub7863
    @keithschaub7863 2 года назад

    Sprite. Better than 7 up!

  • @LittyXavier
    @LittyXavier 4 года назад

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

  • @taylorjordan4023
    @taylorjordan4023 5 лет назад

    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
      @TheCodingTrain  5 лет назад +1

      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
      @taylorjordan4023 5 лет назад

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

  • @hansmaas1644
    @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
      @Riccowed Год назад

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

  • @stevenbusch70
    @stevenbusch70 3 года назад

    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
      @stevenbusch70 3 года назад

      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

  • @deepakmurali5863
    @deepakmurali5863 3 года назад

    how do i do this without json file ?

  • @HoangNguyen-qk5fz
    @HoangNguyen-qk5fz 4 года назад +3

    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.

  • @chrisferrett8910
    @chrisferrett8910 6 лет назад +45

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

    • @keff_cb
      @keff_cb 6 лет назад

      Fish Carret jajajaj nice comparison! Quite acurate xD

  • @junuhunuproductions
    @junuhunuproductions 6 лет назад +42

    I enjoyed this so simple yet incredibly fun tutorial :)

    • @burningblood7529
      @burningblood7529 4 года назад

      Same

    • @zevdraven1658
      @zevdraven1658 3 года назад

      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
      @kodaotis9891 3 года назад

      @Zev Draven Instablaster :)

    • @zevdraven1658
      @zevdraven1658 3 года назад

      @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
      @zevdraven1658 3 года назад

      @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!

  • @pandabutter1266
    @pandabutter1266 6 лет назад +21

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

    • @TheCodingTrain
      @TheCodingTrain  6 лет назад +9

      Try either of these playlists to start from scratch!
      ruclips.net/user/shiffmanplaylists?view=50&shelf_id=14&sort=dd
      ruclips.net/user/shiffmanplaylists?view=50&shelf_id=2&sort=dd

    • @395leandro
      @395leandro 6 лет назад +13

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

    • @onarandomnote25
      @onarandomnote25 2 года назад

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

  • @samuelc.7867
    @samuelc.7867 5 лет назад +26

    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
      @shanewalsch 3 года назад

      Really dont know why, wiki mostly uses info from books

  • @WhytePantherLF
    @WhytePantherLF 6 лет назад +20

    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
      @Amr-Ibrahim-AI 5 лет назад

      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! 🙂)

  • @disdis6127
    @disdis6127 3 года назад +1

    Make video on coding RPG game in p5.js

  • @keff_cb
    @keff_cb 6 лет назад +4

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

  • @beaverjoe9171
    @beaverjoe9171 6 лет назад +1

    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

  • @Jridah12
    @Jridah12 Год назад

    Could somebody help me out? I want to add multiple spritesheets with each of them containing their own .json file to give my game characters different animations. Been trying for days now and I can't get multiple spritesheets to work.

  • @randomaccount6146
    @randomaccount6146 4 года назад +1

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

  • @DLReach
    @DLReach 3 года назад

    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.

  • @tyulik
    @tyulik 3 года назад +1

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

  • @percyjacks8170
    @percyjacks8170 5 лет назад +3

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

  • @ManOnHorizon
    @ManOnHorizon Год назад

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

  • @boratsagdiyev1586
    @boratsagdiyev1586 4 года назад

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

  • @alexhermanmusic9113
    @alexhermanmusic9113 5 лет назад +1

    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!!!

  • @KuraIthys
    @KuraIthys 6 лет назад +16

    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.

  • @meleecraft
    @meleecraft 6 лет назад +1

    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

  • @evanhood9059
    @evanhood9059 2 года назад

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

  • @Adam-gp3ij
    @Adam-gp3ij 4 года назад

    The code is not working sir, getting issues in the HTML file, we can not find the link inside the HTML file

  • @Popviz
    @Popviz 5 лет назад +1

    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. :-)

  • @roshanpawara8717
    @roshanpawara8717 6 лет назад +2

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

    • @roshanpawara8717
      @roshanpawara8717 6 лет назад

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

  • @natalyherrera8627
    @natalyherrera8627 3 года назад

    The processing file doesnt work when my speed is 0.1

  • @maxxsteele9396
    @maxxsteele9396 3 года назад

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

  • @njnishu7
    @njnishu7 2 года назад

    you don't explain how it happened, you just code it and done explain

  • @SaintPepsiSanCoca
    @SaintPepsiSanCoca 6 лет назад +1

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

  • @codemage123
    @codemage123 6 лет назад

    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

  • @anmolsingh4969
    @anmolsingh4969 6 лет назад +4

    super vdeio

  • @RupertBruce
    @RupertBruce Год назад

    Threw yourself in a loop there with 'puffins' 🙂

  • @s000sdas
    @s000sdas 6 лет назад +4

    You're the most comic coder in the world

  • @PandoraMakesGames
    @PandoraMakesGames 6 лет назад +2

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

  • @TaroshG
    @TaroshG 6 лет назад +4

    My favorite programmer tutor

  • @anuraghazra4772
    @anuraghazra4772 6 лет назад +1

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

  • @aobcd.8663
    @aobcd.8663 2 года назад

    what next...walking zombies?

  • @espinosajuanma
    @espinosajuanma 6 лет назад +2

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

  • @LittyXavier
    @LittyXavier 4 года назад

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

  • @inknightmarionne9259
    @inknightmarionne9259 3 года назад

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

  • @christianjt7018
    @christianjt7018 5 лет назад +1

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

  • @TechHeadHD2
    @TechHeadHD2 6 лет назад

    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.

  • @groundknowledge5989
    @groundknowledge5989 5 лет назад +1

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

  • @Hojayganaa
    @Hojayganaa 3 года назад

    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.

  • @francomiranda706
    @francomiranda706 6 лет назад

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

  • @fckyo333ujhjjkrrrr
    @fckyo333ujhjjkrrrr 6 лет назад +1

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

  • @justwolfyalright
    @justwolfyalright 3 года назад

    Where can i get the JSON horse file image thingy

  • @beaverjoe9171
    @beaverjoe9171 6 лет назад

    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.

  • @andresmoge3227
    @andresmoge3227 5 лет назад

    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!

  • @kevnar
    @kevnar 6 лет назад

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

  • @DaveBriccetti
    @DaveBriccetti 6 лет назад

    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

  • @CompilerZ
    @CompilerZ 6 лет назад +1

    best coder in this planet , Thump up mate :)

  • @alterego4767
    @alterego4767 6 лет назад

    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: github.com/CodingTrain/Rainbow-Topics/issues/944
    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!

  • @tinimunson1242
    @tinimunson1242 3 года назад

    Can you tell me where is the json file?

  • @joaomelo7306
    @joaomelo7306 6 лет назад +2

    You are the best

  • @missb2052
    @missb2052 3 года назад

    how would you do this without the spritedata?

  • @morphex6221
    @morphex6221 4 года назад

    Very helpful! But a little rushed.

  • @waelandelder9698
    @waelandelder9698 6 лет назад +1

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

  • @antoinevernet6707
    @antoinevernet6707 6 лет назад +1

    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
      @TheCodingTrain  6 лет назад

      This workflow video might help:
      ruclips.net/video/HZ4D3wDRaec/видео.html
      Also:
      sublime text: ruclips.net/video/UCHzlUiDD10/видео.html
      atom editor: ruclips.net/video/d3OcFexe9Ik/видео.html
      brackets: ruclips.net/video/nmZbhManVcY/видео.html
      codepen: ruclips.net/video/5gfUgNpS6kY/видео.html

    • @warangel580
      @warangel580 6 лет назад

      quelle est ta question ? je n'ai pas compris

  • @gennukes2453
    @gennukes2453 6 лет назад

    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

  • @Lazyat
    @Lazyat 6 лет назад

    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

  • @avangersAht
    @avangersAht 6 лет назад

    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 ???

  • @worldofstrings
    @worldofstrings 3 года назад

    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?

  • @bennybrouwer
    @bennybrouwer 6 лет назад

    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 :)

  • @Stonebyte
    @Stonebyte 6 лет назад

    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.

  • @nycoshouse
    @nycoshouse 6 лет назад

    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

  • @liamonica7768
    @liamonica7768 3 года назад

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

  • @vitormelo22
    @vitormelo22 4 года назад

    Thanks, I love you!!!

  • @noneofmynameswork1
    @noneofmynameswork1 4 года назад

    Is modular the other side of the % ?

  • @gabrielnobel6778
    @gabrielnobel6778 6 лет назад

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

  • @veer9423
    @veer9423 4 года назад

    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? :)

  • @Jugurtha88
    @Jugurtha88 6 лет назад

    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

  • @girlypop1234
    @girlypop1234 4 года назад

    how do I do this without a json file tho

  • @ShranjaniShukla
    @ShranjaniShukla 6 лет назад

    why don't you try to implement this on one of the games like flappy bird or the snake game that you made? btw HUUUUUUUUUUUUUUUUUUUUUUUUGE fan of yours.

  • @scottborland1447
    @scottborland1447 6 лет назад

    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

  • @ocianogalad7020
    @ocianogalad7020 5 лет назад

    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..

  • @nishant7ng
    @nishant7ng 6 лет назад

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

  • @kosmic000
    @kosmic000 6 лет назад +1

    amazing informative and entertaining !!!

  • @CuongNguyen-le5ic
    @CuongNguyen-le5ic 6 лет назад

    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.

  • @mahendrapipalia74
    @mahendrapipalia74 5 лет назад

    Is this some high level of animation.....?
    Cause I understand nothing!!
    What language is he using?

    • @TheCodingTrain
      @TheCodingTrain  5 лет назад +1

      This video uses Processing (which is built on top of the Java programming language). To learn from the beginning:
      ruclips.net/user/shiffmanplaylists?view=50&shelf_id=2&sort=dd

    • @mahendrapipalia74
      @mahendrapipalia74 5 лет назад

      @@TheCodingTrain Thank you Very Much for replying 😊

  • @EmilyHeartWuzHere
    @EmilyHeartWuzHere 4 года назад

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

  • @sksahil4374
    @sksahil4374 4 года назад

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

  • @staticvoidsolutions4998
    @staticvoidsolutions4998 5 лет назад

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

  • @Crisisdarkness
    @Crisisdarkness 6 лет назад

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

  • @devworkstation5073
    @devworkstation5073 6 лет назад

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

  • @anonymoose2304
    @anonymoose2304 4 года назад

    What IDE does he use?

  • @hudsonshapiro3901
    @hudsonshapiro3901 4 года назад

    wher is the json file

  • @pietrocau4099
    @pietrocau4099 6 лет назад +1

    18:26 INHERITANCE

  • @xRuneGunx
    @xRuneGunx 6 лет назад

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

  • @tusharmaurya1668
    @tusharmaurya1668 6 лет назад

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

  • @anuraghazra4772
    @anuraghazra4772 6 лет назад

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

  • @gustavoandre8866
    @gustavoandre8866 4 года назад

    Ever youtube :)