Counter and if commands

p5.js Beginners
1

Hello, does anyone know why the color of the circle does not change when I reach 100?
I do not know if it is a problem with the meter or what is happening

var contador;
var r = 0;
var g = 0;
var b = 255;

function setup() {
createCanvas(500, 500);

contador = 0;
}

function draw() {
background(255);

contador =‘contador’ + 1
console.log (‘contador’)

noStroke();
fill(r, g, b);
ellipseMode(CENTER);
ellipse(width/2, height/2, 200,200); // Dibuixem l’el·lipse al draw()
// perquè es dibuixi constantment i detecti
// els canvis de color que apliquem als ifs

if(contador == 10)
fill(r, g, 0);

if(contador == 100)
fill(r, g, b);

}

2

Hello @xiquip,

What is the reason for the quote marks in these statements?:

contador =‘contador’ + 1
console.log (‘contador’)

Edit (March 26, 2021):

After you resolve the issue with the quote marks, consider the position of the first occurrence of this statement:

fill(r, g, b);

It is contained within the draw() function, where it executes every time that function executes. You may be better off having that statement execute only once. Where could you move it in order for that to happen? Another option would be to have it execute only when some particular condition occurs.

3 Likes
4

Thanks the quick response Im learning a lot in here, Im figuring out how to make things with logic.
I appreciate it @javagar

1 Like
5

Wow… that something like this doesn’t throw an error makes me cringe…

p5js really should do some tests…

1 Like
6

Provided that we use valid quote marks, it performs concatenation.

Try this:

function setup() {
  createCanvas(400, 200);
  frameRate(2);
  textSize(24);
}

function draw() {
  background(255);
  // concatenate a string and a number
  // perfectly legal in JavaScript
  text("Frame " + frameCount, 10, height / 2);
}

Image:
frameCount

However, the quote marks here do not look correct:

contador =‘contador’ + 1
console.log (‘contador’)

Concatenation is probably not what was needed there anyway.

SOME EDITS (March 27, 2021):

@xiquip, while we are are on the subject of counters, you may want to read p5.js Reference: frameCount. Also perform a search on modulus. Those topics may be useful for what you are doing.

Also try this out, and see the embedded comments:

function setup() {
  // the setup() function runs only once
  createCanvas(300, 300);
  noStroke();
  rectMode(CENTER);
  background(0, 0, 0); // black background
  fill(255, 255, 255); // initialize fill as yellow
}

function draw() {
  // the draw() function runs repeatedly
  // frameCount starts at 0 in setup() and increments each time draw() runs
  // we can sometimes use it as an alternative to maintaining a counter
  // using modulus (remainder) operation for cyclical action
  // % is the modulus operator, computes a remainder
  if (frameCount % 300 === 0) {          // remainder of 0
    fill(255, 0, 0); // red fill
  } else if (frameCount % 300 === 100) { // remainder of 100
    fill(0, 255, 0); // green fill
  } else if (frameCount % 300 == 200) { // remainder of 200
    fill(0, 0, 255); // blue fill
  }
  rect(width/2, height/2, 250, 250);
}

The code might provide some ideas for the program with which you are currently working.

1 Like
7

To be honest I saw it on a video and they also called it ‘concatenation’ (which I dont know what is) and I thought it would be a great idea to put it on my code

8

Concatenation may be useful when you are assembling some text, and need to combine several strings or some strings and numbers. However, here, it is likely that your actual intent was to increase the value of contador by 1:

contador =‘contador’ + 1

However, valid quote marks around the name of a variable make it function as a string, instead of having it function as a variable.

This would work for what you are trying to do:

contador = contador + 1;

You could also do it this way:

contador += 1;