Circles are the same color - Using Classes

p5.js Coding Questions
1

Hi All,

My homework this week is about Classes. I can’t figure out how to get each of the three circles to be a different color. I am trying to make one red circle, one green circle, and one blue circle. They are all blue. I’ve tried push() and pop() just about everywhere and I’ve even tried noLoop().

Thank you!

let ball1;
let ball2;
let ball3;

function setup() {
  createCanvas(500, 500);
  background(175);
  ball1 = new Ball(250, 275, 100, 255, 0, 0);
  ball2 = new Ball(225, 225, 100, 0, 255, 0);
  ball3 = new Ball(275, 225, 100, 0, 0, 255);
}

function draw() {
  ball1.position();
  ball2.position();
  ball3.position();

  ball1.looks();
  ball2.looks();
  ball3.looks();
}

class Ball {
  constructor(x, y, z, r, g, b) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.r = r;
    this.g = g;
    this.b = b;
  }

  position() {
    noStroke();
    ellipse(this.x, this.y, this.z);
  }

  looks() {
    fill(this.r, this.g, this.b);
  }
}
2

Hello @DavevaD,

The order of the calls to methods in draw() matters.

Read the reference:
https://p5js.org/reference/#/p5/fill

And voila!

image

:)

2 Likes
3

OMG! Thank you so much, I didn’t even think about that. I truly appreciate the help.

2 Likes
4

You could also rename looks to setColor

And position to display

Not in p5.js but in processing:
In right mouse menu (click on the word looks) is a command rename

2 Likes
5

This is very helpful as well. Thank you for your response!

1 Like
6

Hello @DavevaD,

Some context to the naming suggestions in previous post:

:)

2 Likes