Change color of circle after certain number of iterations

17 views
Skip to first unread message

Jack Adee

unread,
Apr 22, 2020, 1:57:25 PM4/22/20
to Processing.js
I'm using an if statement to track if a circle is red if it is red an integer is supposed to go up by one until it reaches a certain number(tbd) which then will set it to blue. however when I run the program a yellow circle is switching to blue right away when its recoverRate doesn't go up at all.

 if (dots[i].color === [255, 0, 0]); {
   dots[i].recoveryRate += 1; 
   if (dots[i].recoveryRate === 1000000000000000000000); {
    dots[i].color = [0, 0, 255]
    dots[i].recoveryRate = 0;
  }


Andor Saga

unread,
Apr 22, 2020, 2:52:05 PM4/22/20
to Processing.js
Remove the semi-colon on this line:
if (dots[i].color === [255, 0, 0]); {

Jack Adee

unread,
Apr 22, 2020, 3:03:56 PM4/22/20
to Processing.js
That didn't seem to work

Andor Saga

unread,
Apr 22, 2020, 4:27:19 PM4/22/20
to Processing.js
remove the semi-colon here, too:
  if (dots[i].recoveryRate === 1000000000000000000000); {

typically you should never have a semi-colon trailing after your conditional/if.

Jack Adee

unread,
Apr 22, 2020, 4:55:13 PM4/22/20
to Processing.js
I noticed that however the program never gets pass checking if its red even though it is, that sequence didnt get triggerd

Andor Saga

unread,
Apr 22, 2020, 10:29:51 PM4/22/20
to Processing.js
hmm, can you post the entire code?

Jack Adee

unread,
Apr 22, 2020, 11:13:23 PM4/22/20
to Processing.js
class Dot {
  constructor(x, y, color, speed) {
    this.x = x
    this.y = y
    this.color = color
    this.speed = speed
    this.recoveryRate = 0;
  }}


let frameCount ;
let x = 320;
let y = 180;
let xspeed = 5;
let yspeed = 2;
let speeds = [[5, 2], [2, 5]]
let array = [[320, 180], [450, 120]]
let colors = [[255, 0, 0], [0, 255, 255]]
let r = 10;
let dots = [new Dot(320, 180, [255, 0, 0], [5, 2]), new Dot(450, 120, [255, 255, 0], [2, 5])]
function setup() {
  createCanvas(640, 360);
}

function draw() {
  background(255);
  
  for (let i = 0; i <= 1; i++) {
    let c = color(dots[i].color[0], dots[i].color[1], dots[i].color[2]);
  noStroke();
  fill(c);
  let x = dots[i].x
  let y = dots[i].y
  ellipse(x, y, r*2, r*2);
  x += dots[i].speed[0];
  y += dots[i].speed[1];
  
  if (x > width - r || x < r) {
    dots[i].speed[0] = -dots[i].speed[0];
  }
  if (y > height - r || y < r) {
    dots[i].speed[1] = -dots[i].speed[1];
  }
  dots[i].x = x
  dots[i].y = y
  if (dots[i].color === [255, 0, 0]) {
    console.log("here")
    if (random(1, 5) < 5); {
      dots[i].color = [0, 0, 255];
  }}
  
  intersect(i)
  
  }
}

function intersect(i) {
   for (let x = 0; x < dots.length; x++) {
    if (i!==x); {
      if (dots[x].color === [255, 0, 0]); {
        if (dots[i].color === [255, 255, 0]); {
        var d = dist(dots[x].x, dots[x].y, dots[i].x, dots[i].y);
        if (d < r + r) {
          dots[i].color = [255, 0, 0]
        } else {
          return false;
        }  
    }}}
  }
}

Andor Saga

unread,
Apr 23, 2020, 8:27:49 AM4/23/20
to Processing.js
In your code, there is an array comparison.
dots[i].color  === [255,255,0]

This will always be false since the arrays aren't compared component-wise. Use an single number instead of that comparison, so check each component (rgb).
I was curious about this and just tried in Chrone dev tools in the console. [255,0,0] === [255,0,0] is false. When you compare arrays like this, you're asking to
see if the arrays are referencing the same variable, which they can't be.

Andor Saga

unread,
Apr 23, 2020, 8:29:40 AM4/23/20
to Processing.js
Sorry I meant:
Use a single number instead of that comparison, OR check each component (rgb).
red(dots[i].color) === 255 && green(dots[i].color) === 255 && blue(dots[i].color) === 0 

Jack Adee

unread,
Apr 23, 2020, 10:36:11 AM4/23/20
to Processing.js
Here is the full code now. It seems to work but when all of them are yellow or blue some switch to red which should be impossible:
class Dot {
  constructor(x, y, color, speed) {
    this.x = x
    this.y = y
    this.color = color
    this.speed = speed
    this.recoveryRate = 0;
  }}


let infected = 5;
let x = 320;
let y = 180;
let xspeed = 5;
let yspeed = 2;
let speeds = [[5, 2], [2, 5]]
let array = [[320, 180], [450, 120]]
let colors = [[255, 0, 0], [0, 255, 255]]
let r = 10;
let dots = [new Dot(320, 180, [255, 0, 0], [5, 2]), new Dot(450, 120, [255, 255, 0], [2, 5])]
function setup() {
  createCanvas(640, 360);
  for (let y = 0; y <=17-infected; y++) {
   append(dots, new Dot(random(100, 400), random(100, 400), [255, 255, 0], [random(-5, 5), random(-5, 5)])); 
  }
  for (let y = 0; y <=infected; y++) {
   append(dots, new Dot(random(100, 400), random(100, 400), [255, 0, 0], [random(-5, 5), random(-5, 5)])); 
  }
}

function draw() {
  background(255);
  
  for (let i = 0; i <= 19; i++) {
    let c = color(dots[i].color[0], dots[i].color[1], dots[i].color[2]);
  noStroke();
  fill(c);
  let x = dots[i].x
  let y = dots[i].y
  ellipse(x, y, r*2, r*2);
  x += dots[i].speed[0];
  y += dots[i].speed[1];
  
  if (x > width - r || x < r) {
    dots[i].speed[0] = -dots[i].speed[0];
  }
  if (y > height - r || y < r) {
    dots[i].speed[1] = -dots[i].speed[1];
  }
  dots[i].x = x
  dots[i].y = y
  if (dots[i].color[0] === 255) {
    if (dots[i].color[1] === 0) {
    if (random(1, 1000) < 0.005*1000) {
      dots[i].color = [0, 0, 255];
  }}}
  
  intersect(i)
  }
  
}

function intersect(i) {
   for (let x = 0; x < dots.length; x++) {
    if (i!==x); {
      if (dots[x].color[0] === 255) {
        if (dots[x].color[1] === 0) {
        if (dots[i].color[1] === 255) {

Andor Saga

unread,
Apr 23, 2020, 1:53:27 PM4/23/20
to Processing.js
Hi Jack, in the intersect function, there is a semi-colon trailing after your conditional. 
Reply all
Reply to author
Forward
0 new messages