setInterval dont work !

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;
    }

}

Answers

  • edited March 2018 Answer ✓

    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?

  • edited March 2018 Answer ✓
    • 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
  • 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 )

  • edited March 2018 Answer ✓

    ... 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"}.
    
  • 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

Sign In or Register to comment.