Arrayed object method not working...

    var x = 0; // x position always starts at 0
    var y; // y postion

    var yoko; // horizontal length
    var tate; // vertical length

    var color_r; // r value of rgb
    var color_g; // g value of rgb
    var color_b; // b value of rgb

    var speed; // speed. value of increment

    var blocks = []; // Array of Block objects


    function setup() {
        createCanvas(windowWidth, windowHeight);
        noStroke();

        // create Block objects
        for (var i = 0; i < 2; i ++) {
            blocks[i] = new Block();
        }

    }

    function draw() {

        // move blocks
        for (var i = 0; i < blocks.length; i ++) {
            blocks[i].moveBlock;
        }
    }


    function Block() {

        // Set the ratio of horizontal-vertical length
        this.yoko = random(60, 300);
        this.tate = random(30, 120);

        // y is given at any given height of the screen
        this.y = random(windowHeight - this.tate);
        this.x = x;

        // set the color from 0 to 255
        this.color_r = random(255);
        this.color_g = random(255);
        this.color_b = random(255);

        // set the speed from 1 to 5
        this.speed = random(1, 5);


        this.moveBlock = function() {
            // set the color
            fill(this.color_r, this.color_g, this.color_b);
            // draw rectangle at random position and ratio
            rect(this.x, this.y, this.width, this.height);
            // move the rectangle from left->right
            this.x += this.speed;
            background(255); // reset the background
        };

    }

Hi,
This code tries to move 2 random rectangles from left to right on the canvas.

I've tried to find a bug over chrome debugger, but can't figure it out. It looks like something is wrong inside the object method though. It is my first trial to use objects in p5.js.

I will appreciate for any help, suggestions.

Thanks

Tagged:

Answers

  • Some bugs I've found after a quick glance:

    1. Line #59: rect(this.x, this.y, this.width, this.height); -> Your class Block doesn't have the property members this.width & this.height.
    2. Line #62: background(255); -> This is gonna erase what rect() has already drawn to the canvas!

    https://p5js.org/reference/#/p5/background

  • I have fixed the properties, relocated background(255);, still nothing shows up on the screen. Although replacing arrays of objects to a single object did work!(the code below) Can't figure out what is causing a problem.

       var x = 0; // x position always starts at 0
        var y; // y postion
    
        var yoko; // horizontal length
        var tate; // vertical length
    
        var color_r; // r value of rgb
        var color_g; // g value of rgb
        var color_b; // b value of rgb
    
        var speed; // speed. value of increment
    
        var blocks = []; // Array of Block objects
    
    
        function setup() {
            createCanvas(windowWidth, windowHeight);
            noStroke();
    
            // // create Block objects
            // for (var i = 0; i < 2; i++) {
            //  blocks[i] = new Block();
            // }
    
            block = new Block();
    
        }
    
        function draw() {
    
            // // move blocks
            // for (var i = 0; i < blocks.length; i++) {
            //  blocks[i].moveBlock;
            // }
    
            block.moveBlock();
    
        }
    
    
        function Block() {
    
            // Set the ratio of horizontal-vertical length
            this.yoko = random(60, 300);
            this.tate = random(30, 120);
    
            // y is given at any given height of the screen
            this.y = random(windowHeight - this.tate);
            this.x = x;
    
            // set the color from 0 to 255
            this.color_r = random(255);
            this.color_g = random(255);
            this.color_b = random(255);
    
            // set the speed from 1 to 5
            this.speed = random(1, 5);
    
    
            this.moveBlock = function() {
                background(255); // reset the background
                // set the color
                fill(this.color_r, this.color_g, this.color_b);
                // draw rectangle at random position and ratio
                rect(this.x, this.y, this.yoko, this.tate);
                // move the rectangle from left->right
                this.x += this.speed;
            };
    
        }
    
  • Thank you very much for posting a reference on how to use class in p5.js. Very inspiring, quite a bit of learning required for some new grammars shown.

  • I've already stated the bug is due to background()!
    It clears everything that was drawn to canvas! 8-X

  • I've relocated the background(); from the bottom to the top of the moveBlock(); code block. And the code posted above finely draws the rect with a single object but it doesn't with arrays of the objects.

    I've also tried getting rid of the background(); and still nothing appears.

    Any ideas will be appreciated.

    Thanks

  • edited July 2017

    The reason I've posted links for 2 of my sample sketches was for you to see how to do OOP in JS w/ p5.js. In "Bouncing Colorful Balls", its draw() callback is just this:

    function draw() {
      background(bg);
      for (const b of balls)  b.display(), b.update();
    }
    

    Of course, balls is an array of instances of class Ball.

    const NUM = 15, balls = Array(NUM);
    
    function setup() {
      for (let i = 0; i < NUM; balls[i++] = new Ball);
    }
    

    Please, post your attempt at https://OpenProcessing.org/sketch/create for example.
    So others can test & see your progress about it. *-:)

  • I've upload my sketch; https://openprocessing.org/sketch/438387

    Thanks for showing a path of how-to do this kind of try-n-error, ask on forum, p5.js development.

    I really appreciate of showing how to do stuff as OOP in JS w/ p5.js. I will definitely try make a progress/refinement later as the code simply get working.

    I now kind of try to follow the way through on https://p5js.org/books/. try to keep things as simple as they can be.

    I'll keep working on this...

Sign In or Register to comment.