6.4: The Constructor Function in JavaScript – p5.js Tutorial

What is a constructor function in JavaScript? How does it work? How does it make objects? When should you use it? How can you duplicate objects into an array using the constructor function?

Next video:

Support this channel on Patreon:


Send me your questions and coding challenges!:

Link to code on Github:


For More p5.js Videos:

Help us caption & translate this video!






40 responses to “6.4: The Constructor Function in JavaScript – p5.js Tutorial”

  1. Adrian Horning Avatar

    Dude these videos are great. Anytime I need to look up something about js, I always go to your videos. Thanks for making these.

  2. Gl!gaByte Avatar

    Thanks Dan a lot for this p5.js videos. You are Best teacher I ever seen. Im from your The Constructor Function made Star Wars ships flying;

    var ships = [];
    var timer = 0;
    var x = 0;

    function setup() {
    createCanvas(400, 400);
    for (var i = 0; i < 100; i++) {
    ships[i] = new Ship();
    function draw() {
    timer += 1;
    if(timer > 200) {
    timer = 0;
    x += 5;
    for (var i = 0; i < 5 + x; i++) {
    function Ship() {
    this.x = random(0, width);
    this.y = 450;
    this.s = random(0, 15);
    this.speed = random(0, 3);

    this.display = function() {
    rect(this.x, this.y, 50 + this.s, 25 – this.s);
    rect(this.x, this.y, 25 – this.s, 100 – this.s);
    rect(this.x – 30, this.y, 20 – this.s, 50 – this.s);
    rect(this.x + 30, this.y, 20 – this.s, 50 – this.s);
    this.move = function() {
    this.y -= 1 + this.speed;

    btw. im 12 years old, sorry for grammar.

  3. Mario Rodríguez Delgado Avatar

    I'm really confused right now, i have exactly the same code written but it doesn't show anything, i only get a black canvas, can anyone help me?

  4. Trxter Avatar

    I'm only 13 and want to program when i'm older and out of any tutorials this one is the best. Dan Shiffman is so awesome and can't wait to see more videos in the future!

  5. said koçak Avatar

    arguments and parameters should also work with this constructor, right ? like in the processing creating class?

  6. Don Bedwell Avatar

    Great energy, very straight forward teaching style. I like how you move back and forth between the white board and the real code. Could use a bit of editing though. ThumbsUp!

  7. Madridista santos Avatar

    what does fill mean?? explain line 23 to 31?

  8. Appel Avatar

    I can't get it to work… Can someone help me?

    var bubbles = [];

    function setup() {
    createCanvas(600, 400);
    for (var i = 0; i < 5; i++)
    bubbles[i] = new Bubble();

    function draw() {
    for (var i = 0; i < bubbles.length; i++)


    function Bubble() {
    this.show = function() {
    fill(255, 0, 0);
    ellipse(100, 100, 100, 100);

    What is wrong? Thx in advance!

  9. ShaGa MeLTeR Avatar

    I decided to use the idea from the purple rain video to make a rain program with objects and arrays. Right now, it's a really basic program, but it works and I'm making it more complex and better organized the more I watch these videos. The videos help a ton, I hope I have a professor like this next year lol

  10. Uchiha Madara Avatar

    I got a question if anyone cares to answer it, after you make the Bubbles function, I noticed you still have bubbles[i].move and bubbles[i].display in your draw function. my question is how do these two functions still exist and how does the editor still recognize them after you've converted the bubbles object into a function? should it not be Bubbles.move and Bubbles.display?

  11. Mark Stockdale Avatar

    Love your videos! You are a fantastic teacher! Thank you for all you do!

  12. LUI LA Avatar

    This guy is just amazing!!! an Amazing developper!

  13. lars gortemaker Avatar

    he doesnt even use +=

  14. Enrique Tecayehuatl Avatar

    So, can we say that " var vm = {};" and "vm.Summary = function( ) { } " Summary is a function constructor? what I want to do is to create within a object more reusable objects (contrsuctors), I am not sure if I am right, what do you think?

  15. maxime Septimus Avatar

    "so you can see" Boum black screen XD

  16. Emiliano Carrillo Avatar

    AWESOME TEACHER, AWESOME "COURSE". I watch it in 2x and you look too funny, like a crazy code wizard haha. Keep it up!

  17. Aditya Arya Avatar

    You are an amazing teacher. Your gestures and way teaching is very similar to one of my fav. teacher, Gaurang Sir, he is a physics teacher.

  18. Robert B Johnson Avatar

    You should have mentioned the fact that when you go from an object syntax to a constructor syntax the ":" (colon) needs to be changed to an "=" sign and the "commas" ending all information in the object needs to be changed to a ";" semicolon

  19. Ansh Shah Avatar

    are you using brackets or p5 editor or processing

  20. William Bille Meyling Avatar

    Awesome so good!!! I watched all the tutorials for p5.js since I am working on a game and every time I needed something you had the answer in the next video! Thanks so much. Very inspiring and keep up! 🙂

  21. shubham pandey Avatar

    what happen if we call constructer function without new operator

  22. SuperLeap Avatar

    omg! 3 minutos into the video and I already knew how good teacher you're. Subscribed and liked as well. Thanks for your explanations.

  23. Nodgelol1 Avatar

    best, and funniest way to learn programming, I found until now!! 😀
    done a few cpp and javascript crashcourses via "sololearn" apps..
    but your videos are an amazing next step! help my mind growing with p5js/processing 🙂

  24. Angad Singh Avatar

    Did you upload the code for this video somewhere?

  25. Zap Z  YT Avatar

    when i use the "this.display":

    this.display = function(){

    nothing happens.
    I am very confused, help.

  26. Kingling Avatar

    When I create a function "move" in my object bubbles and then try to use it in draw it says move is not a function, any help?

  27. Daniel Orlando Peña Avatar

    Cool videos!! I have been learning a lot, Greetings from Colombia

  28. Diksha Chauhan Avatar

    Great Explaination. But when bubbles[i] = new Bubble() is replaced with bubbles[i] = Bubble(), the function comes undefined. Isn't it a basic assignment of function definition to a variable?
    fiddle: https://jsfiddle.net/2dmgx1nr/2/

  29. 3D Davis Avatar

    sorry Daniel Shiffman… but i must say… you teach damn good. love your videos!

  30. adri adi Avatar

    the program that i used to write the code? what is its name? can anyone tell me more about it?

  31. CrescentFresh Avatar

    Thank you for this video! I understood the constructor's purpose but didn't fully understand a constructor and its use. I appreciate it! Sub'd!

  32. Roger Camps Avatar

    Thanks for this vid!!

  33. fake farm Avatar

    Great video! Thank you for making it. I found you by searching for techniques how to test Constructors using Jasmine. I haven't been able to find any posts/videos that effectively teach TDD dealing with DOM Manipulation or AJAX using Constructors. Anyone have a suggestion? Thanks!

  34. Curtis Slone Avatar

    Awesome video Daniel. Love the editing and examples!

  35. Untamed Avatar

    Man you have got to get a better set up. All the objects (no pun intended) poking you, the technical difficulties with the light, and the cramped undersized white board, are taking away from my concentration and learning. Almost hit the dislike button, but I will give you the benefit of the doubt, since you genuinely look like you want to teach this stuff.

  36. Jose Julio Pl Avatar

    So a constructor function in P5 it's like a class in java, isn't it?

  37. Wai Yip Avatar

    Big thanks ! You explained it so good , liked and subscribed!
    Btw, will you make videos about php programming in the future? Because it is so confusing to me XD

  38. spekx Avatar

    Omg I love you

  39. Mabeh Al-Zuq Yadeek Avatar

    Wow, you are an amazing teacher. Very fun, high energy and mastery of the subject.

Leave a Reply

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