# Circles are the same color - Using Classes

**URL:** https://discourse.processing.org/t/circles-are-the-same-color-using-classes/43122
**Category:** Coding Questions
**Tags:** homework
**Created:** [November 1, 2023, 10:51pm UTC](https://discourse.processing.org/t/circles-are-the-same-color-using-classes/43122 "2023-11-01T22:51:55Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![DavevaD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davevad/32/18975_2.png) [@DavevaD](https://discourse.processing.org/u/DavevaD)
#### Post date: [November 1, 2023, 10:51pm UTC](https://discourse.processing.org/t/circles-are-the-same-color-using-classes/43122/1 "2023-11-01T22:51:55Z")

</div>

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!

```auto
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);
  }
}

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 1, 2023, 11:10pm UTC](https://discourse.processing.org/t/circles-are-the-same-color-using-classes/43122/2 "2023-11-01T23:10:30Z")

</div>

Hello @DavevaD,

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

Read the reference:  
[https://p5js.org/reference/#/p5/fill](https://p5js.org/reference/#/p5/fill)

And voila!

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/6/16170a9f0e0334030f00a2eab3ea1a4587cbfac7.png)

`:)`

---

<div class="post-metadata">

### Author: ![DavevaD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davevad/32/18975_2.png) [@DavevaD](https://discourse.processing.org/u/DavevaD)
#### Post date: [November 2, 2023, 9:12am UTC](https://discourse.processing.org/t/circles-are-the-same-color-using-classes/43122/3 "2023-11-02T09:12:24Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 2, 2023, 11:23am UTC](https://discourse.processing.org/t/circles-are-the-same-color-using-classes/43122/4 "2023-11-02T11:23:39Z")

</div>

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

---

<div class="post-metadata">

### Author: ![DavevaD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davevad/32/18975_2.png) [@DavevaD](https://discourse.processing.org/u/DavevaD)
#### Post date: [November 9, 2023, 12:45pm UTC](https://discourse.processing.org/t/circles-are-the-same-color-using-classes/43122/5 "2023-11-09T12:45:38Z")

</div>

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

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 10, 2023, 1:07am UTC](https://discourse.processing.org/t/circles-are-the-same-color-using-classes/43122/6 "2023-11-10T01:07:04Z")

</div>

Hello @DavevaD,

Some context to the naming suggestions in previous post:

> **[Code Conventions for the Java Programming Language: 9. Naming Conventions](https://www.oracle.com/java/technologies/javase/codeconventions-namingconventions.html)**
>
> Code Conventions for the Java Programming Language: 9. Naming Conventions

`:)`
