Arrayed object method not working...

tkwanjp

    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

GoToLoop

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

GoToLoop

Below 2 p5.js sketches which rely onclass for OOP in JS: :bz

1. http://CodePen.io/GoSubRoutine/pen/KaerGb/right/?editors=101
2. http://p5js.SketchPad.cc/sp/pad/view/ro.CwHWpJ$SP1EN8i/latest

tkwanjp

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;
        };

    }

tkwanjp

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.

GoToLoop

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

tkwanjp

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

GoToLoop

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

tkwanjp

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