Coding Challenge #46.1: Asteroids with p5.js – Part 1

[ad_1]
This video is Part 1 of a new Coding Challenge: the classic Atari video game Asteroids! In this video, I use JavaScript and HTML5 canvas with the p5.js library to program the ship and the asteroids.

This video is also part of a collaboration with YouTuber Siraj from Sirajology ( He will program a machine learning bot to play the Asteroids game.

Asteroids Part 2:
Link to Sirajology’s video: COMING SOON

Support this channel on Patreon:

Send me your questions and coding challenges!:

Contact:

Asteroids original code:
Asteroids Code with community submitted features:

Play the game!

Links discussed in this video:
Asteroids on Wikipedia:
My Trigonometry and Polar Coordinates video:
Sirajology’s channel:

Source Code for the all Video Lessons:

For More Coding Challenges:
For an Introduction to Programming and p5.js:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

26 responses to “Coding Challenge #46.1: Asteroids with p5.js – Part 1”

  1. The_Matrix Avatar

    Knows Python, for some reason watches Java Script videos

  2. Agus Fikal Avatar

    Hello,you are awesome..
    I want to ask, after downloading the file on your "Asteroids original code; https://github.com/CodingTrain/Rainbow-Code/tree/master/CodingChallenges/CC_46_Asteroids"
    I do not know how to run it. in processing version
    please .Thankyou

  3. Dany Eudes Romeira Avatar

    I built a virtual machine in Java to emulate the Space Invaders arcade and run their game original code. The VM runs in a old motorola mobile phone. That was so fun! Watch it on my channel.

  4. Joshua Hatfield Avatar

    I skimmed through the comments and not seeing anyone who fleshed this out with lives and score. If you're still looking for one, I put mine up on my website http://www.flobi.com/ but I'm not sure it's suitable for an AI with the extra weapons I added. But you might like some of the more subtle changes I made, like having the asteroids break up in varying sizes with the bigger part retaining much of the shape of the original.

  5. Akashdeep S Avatar

    you could always use if(keyIsDown())

  6. Mike_ the_maker Avatar

    TheCodingTrain I am having an issue with the code. everytime I run it, it has an error that says it cant find style.css. I looked in the index.html file and saw that if I deleted a link trying to connect a css page, the error wont pop up but my code still wont work. If you or anyone will be able to help that would be great. Keep up the good work and thanks!

  7. Garrett Smith Avatar

    7:09 why not just use keyIsDown()?

  8. Lucas Lopes Avatar

    "link to Sirajology's video: COMING SOON" – Dec 15 2016

  9. Julian Not a Name Avatar

    I think something went wrong with the shader: http://prntscr.com/edko63
    But I'm not sure what! THe only thing I can say is that it lags!

  10. Isaac Alexander Avatar

    for some reason put in every piece of code he does into my program but it won't work.

  11. oooBASTIooo Avatar

    Can anyone explain why there is no ; after createVector in the Asteroid constructor function? Somehow this doesn't work for me and I have no clue why, because it is really simple code and I cannot find any error in my version.

  12. Gurkensohn Avatar

    Could you also make some videos coding in plain Java, with Canvas, BufferStrategy, Graphics, game loop and all that stuff?

  13. stupidchannel1000 Avatar

    this is a dumb question but you seem very very good at programming, and I'm wondering if you do it for a job and if so what do you do ?

  14. Fulgentius Willy Avatar

    How does the 'rotation' works? can somebody explain? Isn't keyPressed() function is just a one-time event and if I want to be able to rotate it as long as I'm holding it, I'll use keyIsDown()? I'm just confused by how it can be called over and over again.

  15. Hey man can you pass the beans? Avatar

    ok i keep getting this problem with the rotate() function and i need help
    this is my code:
    function Character(){
    this.pos = createVector(width / 2,height / 2);
    this.vel = createVector(2,0);
    this.col = random(0,255);
    this.r = 0;
    this.display = function(){
    translate(this.pos.x / 3,this.pos.y / 2);
    rotate(this.r);
    colorMode(HSB,255);
    fill(this.col,255,255);
    rect(this.pos.x,this.pos.y,20,20);
    };

    this.move = function(){
    this.pos.x = constrain(this.pos.x,0,width – 20);
    this.pos.y = constrain(this.pos.y,0,height – 20);

    this.pos.x += this.vel.x;
    this.pos.y += this.vel.y;
    };

    this.turn = function(){
    if(keyIsDown(RIGHT_ARROW)){
    this.vel.rotate(0.1);
    this.r += 0.1;
    }
    if(keyIsDown(LEFT_ARROW)){
    this.vel.rotate(-0.1);
    this.r -= 0.1;
    }
    };

    }

  16. Total_DK Avatar

    My Programming window looks very different from this. I am using Windows, is it supposed to be white and not dark?

  17. Darren Mew Avatar

    can you please give source code for Androids in processing

  18. 1166miki Avatar

    can someone tell me why my asteroids keep apearing outside the canvas, i have the random just like him, maybe u for the length function, sometimes says his vakue is 0, but in this code works fine

  19. Axel Rousselot Avatar

    Hi, first of all, thank you for your job, you gage me the passion of programming !
    I saw both of your videos and Siraj ones, I both understood (sorry for my english grammar, i'm doing my best :p), I gave a look to your final project on github and every line of code appears as a mystery to me !
    Could you do a video, or explain me here the code ? Understanding the "final blend", and how to mix those two codes would be more instresting than evertyhing I think ! I would let us (or at least me) to better understand the whole thing and to do our own bot games.
    Keep it up, your awesome dude, thanks for your job 😀 (and again sorry for my unforgivable grammar and spelling mistakes)

  20. Sora Akemi Avatar

    Can someone explain to me the difference between this. and var?

  21. Oskar Firlej Avatar

    p5 js has a built in funtion keyIsPressed(RIGHT_ARROW) which returns true or false. this case just asks for use of this function 😀 Great vid and keep your positive energy 😀

  22. ceoleo Avatar

    Thx for making these vids

  23. JoolsParker Avatar

    Hey Daniel – loving your challenges, but I was wondering what the main difference between Processing and P5.js was? Are they both capable of doing the same things?

  24. Tarek Mustafa Avatar

    Your videos are awesome, I learn so much from it! Thank you.

Leave a Reply

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