setInterval dont work !

DDv2FF

Hi ! I was trying to change the color of the background every 0.1 seconds with setInterval, turning it to white. And I couldn't make it without hardcoding the variable inside the function.

let y, color1, color2;
function setup(){
    createCanvas(400, 300);
    y = 0;

    color1 = 0;

    changeColor(color1, 100);

}

function changeColor(thecolor, wait){
    setInterval(startt, wait);
    function startt(){
        thecolor++;
        // color1++;

    }
}

function draw(){
    background(color1);

    stroke(255);
    line(0, y, width, y);
    y+=5;
    if(y > height){
        y = 0;
    }

}

KevinWorkman

You're only ever changing thecolor which is passed into your function. This doesn't change the original value.

var x = 42;

function change(z){
  z = 100;
}

change(x);
console.log(x); // still 42

You should also debug your code to make sure your function is actually firing like you expected.

But taking a step back, it feels a little weird to use setInterval() at all. Can't you just use the frameCount variable or the millis() function to do your own timing?

GoToLoop

• Just like Java, in JS too we've only got pass-by-value.
• When you invoke function changeColor() like this: changeColor(color1, 100);
• 1st, the current value stored in variable color1 is read, which is 0.
• Then a copy of that argument value is sent to function changeColor()'s 1st parameter thecolor.
• BtW, function parameters are just like their local variables; but are initialized by passed arguments when the function is called rather than being initialized inside their function's body.
• Therefore, given changeColor()'s 1st parameter thecolor got merely a copy of the value passed to it, directly mutating it won't change anything on the original passed argument variable color1.
• In your workaround, you create an inner function which will forever keep alive its enclosing function's 1st parameter thecolor, via accessing it on a technique called closure.
• It'd be much easier to simply declaring color1 or thecolor as a global variable instead of creating an inner function just to use closure access. :P

GoToLoop

More about closures: https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Closures

DDv2FF

Oooh... I get it. But, then, it works different when a dom element is passed as an argument for the parameter of the function isn't it ?
Because I do can change the content of a dom element, with ".html" in the function for example.
(example that I've been using to learn, in this video https://youtube.com/watch?v=-jysK0nlz7A&list=PLRqwX-V7Uu6ZmA-d3D0iFIvgrB5_7kB8H&index=6 )

GoToLoop

... it works different when a DOM element is passed as an argument for the parameter of the function, isn't it?

It may seem it's different, but it's still pass-by-value. @-)
It's tricky to explain, but I'll try it out. :-\"

I pretty much bet when you had mutated that DOM element, you did it so via the dot operator ., right? :>

That is, you haven't reassigned another object to the parameter itself, but mutated the object already stored in it using the dot . access operator. L-)

https://Processing.org/reference/dot.html

To better explain it I did the pure JS example below. :bz

Since it's just JS, you can open your browser's console by hitting F12 and paste this code there: :-bd

// Forum.Processing.org/two/discussion/27374/setinterval-dont-work#Item_5
// GoToLoop (2018-Mar-27)

class Dog {
  constructor(name='Rex') { this.name = name; }
}

class Cat {
  constructor(name='Feefee') { this.name = name; }
}

function changeAnimalToCat(animal) {
  animal = cat; // Won't work b/c it's reassigning a local parameter variable!
}

function changeAnimalName(animal, name='') {
  animal.name = name; // Works b/c it's changing an object property!
}

let dog = new Dog, cat = new Cat, animal = dog;
console.log(animal); // Dog {name: "Rex"}.

changeAnimalToCat(animal); // Failed attempt to reassign animal to cat.
console.log(animal); // It's still a Dog {name: "Rex"}.

changeAnimalName(animal, 'Lola'); // Changing property name to 'Lola'.
console.log(animal); // Still a dog; but now it's Dog {name: "Lola"}.

DDv2FF

Ooohhh !!! If I wanted to change the name of the animal to Feefee. I could writte

function changeAnimalName(animal, changeWithName) {
  animal.name = changeWithName.name; 
}

let animal1 = dog;

changeAnimalToOtherName(animal1, cat);

In that case I would be working with two objects created before. Ill check the reference