Javascript canvas green ellipse left and red right side

Question

I want to make green ellipses on left side and red ellipses on right side. I use random function to fill the canvas. I use if statements for my purpose. Maybe switch case would be better for this task? This syntax only generate pink dots, whats wrong?

var spotPos = {
  x:300,
  y:200
}

var spotCol = {
  r:0,
  g:0,
  b:0
}

function setup() {
  createCanvas(600,400);
  background(0);
}

function draw() {
  spotPos.x = random(0,width);
  spotPos.y = random(0,height);
  //spotCol.r = random(60,255);
  noStroke()
  fill(spotCol.r, spotCol.g, spotCol.b)
  ellipse(spotPos.x, spotPos.y, 25, 25);
  if(spotPos.x < 300) {
    spotCol.b = 255;
  } else if(spotPos.x > 300) {
    spotCol.r = 255;
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.js"></script>

Previous commenters make valid points. I've already suggested an edit to the question to reflect that you are using `p5.js` and convert the code into a snippet. For future questions keep those comments in mind and maybe also take a look here: https://stackoverflow.com/help/mcve — luke-codewalker, Aug 19 '18 at 20:01

luke-codewalker · Answer 1 · 2018-08-19T20:09:35.203

There were a few things preventing you from achieving your desired result.

First you drew the ellipse and then afterwards selected a color. That meant that in the next round of the draw loop, the ellipse will be drawn somewhere else but the color will still be based on the previous position.

The second problem was the assignment of RGB values:

  if(spotPos.x < 300) {
    spotCol.b = 255;
  } else if(spotPos.x > 300) {
    spotCol.r = 255;
  }

You only ever assigned blue and red a value of 255 and never changed it backed. So after a few iterations you have fill(255, 0, 255) e.g. full red, no green, full blue which resulted in the pink color you were seeing.

Think of draw as a set of instructions that you repeat over and over again. You need to consider the order of your instructions and in what state you end/start each iteration of your loop. If you change some global variables how will they affect your program the next time draw is run?

I've included a working example below but feel free to experiment with your own ideas and solutions.

const spotPos = {
  x: 300,
  y: 200
}

const spotCol = {
  r: 0,
  g: 0,
  b: 0
}

function setup() {
  createCanvas(600, 400);
  background(0);
}

function draw() {
  spotPos.x = random(0, width);
  spotPos.y = random(0, height);

  if (spotPos.x < 300) {
    spotCol.r = 0;
    spotCol.g = 255;
  } else if (spotPos.x > 300) {
    spotCol.r = 255;
    spotCol.g = 0;
  }
  
  noStroke();
  fill(spotCol.r, spotCol.g, spotCol.b)
  ellipse(spotPos.x, spotPos.y, 25, 25);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.js"></script>

score 0 · Answer 2 · answered Aug 19 '18 at 20:07

0

If you draw the circle first before coloring it, it won't detect the new color.

answered Aug 19 '18 at 20:07

Javascript canvas green ellipse left and red right side

2 Answers2