splice

1rulesupersedes · June 2017

I want to make the first image disappear when it reaches 10 images. I am thinking splice the array. However not sure where or how.

index.html

    <html>
    <head>

      <meta charset="UTF-8">
      <script language="javascript" type="text/javascript" src="libraries/p5.js"></script> 
      <script language="javascript" src="libraries/p5.dom.js"></script>
      <script language="javascript" src="libraries/p5.sound.js"></script>
      <script language="javascript" src="images.js"></script>
      <script language="javascript" src="images_2.js"></script>
    </head> 
      <!-- this line removes any default padding and style. you might only need one of these values set. -->
      <style> 
      </style>

    </head>

    <body>

    </body>
    </html>

============================================================================ images.js

    var bubbles = [];
    var flowers = [];

    function preload(){

        for(var i = 0; i< 6; i++){
            flowers[i] = loadImage("fet_pictures/" + i + ".jpg");
        }

    }

    function windowResized(){
        resizeCanvas(windowWidth, windowHeight);
    }

    function setup(){
        createCanvas(windowWidth, windowHeight);
    }

    function mousePressed(){
        var r = floor(random(0, flowers.length));
        var b = new Bubble(mouseX, mouseY, flowers[r]);
        bubbles.push(b);
    }

    function draw(){
        background(0);
        for(var i = bubbles.length -1; i >= 0; i--){
            bubbles[i].update();
            bubbles[i].display();
        }
    }

============================================================================ images_2.js

        function Bubble(x, y, img){
        this.x = x;
        this.y = y;
        this.img = img;
        this.lifespan = 255;

        this.display = function(){
            imageMode(CENTER);
            image(this.img, this.x, this.y);
            this.img.resize(100, 0);
            //ellipse(this.x, this.y, 48, 48);
        }

        this.update = function() {
            this.x = this.x + random(-1, 1);
            this.y = this.y + random(-1, 1);
           }
        }

GoToLoop · June 2017

https://developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

https://forum.Processing.org/two/discussions/tagged?Tag=shift()

http://p5js.SketchPad.cc/sp/pad/view/ro.CxS6E9WWAMC$EO/latest

kfrajer · June 2017

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

I will do:

images_2.js

this.lifespan = millis()+255;  //current milliseconds + 255

// . . . OTHER code

//Additional function
//Returns false if not expired/it is alive. Otherwise true.
this.checkIfExpired() = function() {
  return (millis()<this.lifespan);
}

images.js

function draw(){
    background(0);
    for(var i = bubbles.length -1; i >= 0; i--){
        bubbles[i].update();
        bubbles[i].display();
        if(bubbles[i].checkIfExpired()==true){
           bubbles.splice(i,1);
        }
    }
}

Unfortunately this is untested code. Hopefully it works for you. I am assuming your lifeSpan is a time field indicating how long an object should stay alive during the sketch. In this case, I am assuming units to be in milliseconds. Using a value of 255 might be too short. Assuming your code runs at 30fps (about 1 frame every 33ms) then for a value of 255, your object will be displayed for about 7 frames (because of 255/33). If I were you, instead of 255, I would start with 1500.

Kf

1rulesupersedes · June 2017

Hello kfrajer,

Thank you for your time! I did get your code to work. "this.lifespan = millis()+255;" was new to me.

1rulesupersedes · June 2017

Hello GoToLoop,

Thanks for you time and providing the resources it was a mind opener.

Howdy, Stranger!

Categories

In this Discussion

splice

Best Answer

Answers

images_2.js

images.js