# I need help making the pictures stay until next is pressed

**URL:** <https://discourse.processing.org/t/i-need-help-making-the-pictures-stay-until-next-is-pressed/19273>\
**Category:** Coding Questions\
**Created:** [April 1, 2020, 2:23am UTC](https://discourse.processing.org/t/i-need-help-making-the-pictures-stay-until-next-is-pressed/19273 "2020-04-01T02:23:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![stacy](https://avatars.discourse-cdn.com/v4/letter/s/e95f7d/32.png) [@stacy](https://discourse.processing.org/u/stacy)\
**Post date:** [April 1, 2020, 2:23am UTC](https://discourse.processing.org/t/i-need-help-making-the-pictures-stay-until-next-is-pressed/19273/1 "2020-04-01T02:23:45Z")

</div>

Can someone please help  
Heres the code:

```auto
var drop = [];
let images = ["images (9).jpeg","images (10).jpeg", "images (8).jpeg", "images (7).jpeg", "images (5).jpeg", "images (6).jpeg"];
let current = 1;

 
function setup() {
 
   frameRate(3)
  createCanvas(900,700);
 background(173, 216, 230);
next = createButton("Next");
next.position(820,20)
next.mousePressed(nextImage);
previous = createButton("Previous");
previous.position(20,20)
previous.mousePressed(previousImage);
    
	
	for (var i = 0; i < 200; i++) {
		drop[i] = new rainDrop();
      
	}
}

function draw() {

  background(173, 216, 230);

     drawFlower();
      for (let count =0; count < 100; count++) {
      
    
    makeCloud (random (10,180), random (10, 20), random (500,500));
    makeCloud (random (230, 340), random (10, 20), random (500, 500));
    makeCloud (random (415, 540), random (10, 20), random (500, 500));
    makeCloud (random (600, 720), random (10, 20), random (500, 500));
    makeCloud (random (40, 145), random (60, 70), random (500, 500));
    makeCloud (random (200, 380), random (60, 70), random (500, 500));
    makeCloud (random (440, 560), random (60, 70), random (500, 500));   
    makeCloud (random (610, 760), random (60, 70), random (500, 500)); 
         drawSun();
        
      }

	for (var i = 0; i < 200; i++) {
		drop[i].show();
		drop[i].update();
	}

}  
 function nextImage(){

if(current < images.length-1) {
current +=1;
}
loadImage(images[current], img => {
img.resize(330,330);
image(img, 240, 200);
});
  }
function previousImage(){
if(current > 0) {
current -=1;
}
loadImage(images[current], img => {
img.resize(330,330);
image(img, 240, 200);
});
}

function makeCloud(x, y, size){
  fill(255,255,255);
  ellipse (x+size/10, y+size/10, size/20, size/20)
  
  }

  function drawFlower(){
    //flower 1
  stroke(30,255,100)
  strokeWeight(3);
  line(40, 820, 58, 550)
  noStroke();
  fill('pink');
  ellipse(40, 525, 40);
  ellipse(85, 550, 40);
  ellipse(25, 550, 40);
  ellipse(40, 575, 40);
  ellipse(70, 575, 40);
  ellipse(72, 528, 40);
  fill('white');
  ellipse(55, 550, 35);
  //flower 2
  stroke(30,255,100)
  strokeWeight(3);
  line(200, 850, 187, 550)
   noStroke();
  fill('red');
  ellipse(218,555, 40);
   ellipse(205, 580, 40);
   ellipse(170, 583, 40);
   ellipse(155, 555, 40);
  ellipse(170, 530, 40);
  ellipse(202, 528, 40);
  fill('white');
  ellipse(185, 557, 35);
 //flower 3
  stroke(30,255,100)
  strokeWeight(3);
  line(825, 870, 803, 550)
   noStroke();
  fill(255,127,80);
  ellipse(770,545, 40);
  ellipse(785, 570, 40);
  ellipse(823, 570, 40);
   ellipse(837, 545, 40);
  ellipse(825, 518, 40);
    ellipse(788, 518, 40);
  fill('white');
  ellipse(803, 545, 36);
  //flower 4
  stroke(30,255,100)
  strokeWeight(3);
  line(655, 770, 643, 550)
   noStroke();
  fill(221,160,221);
  ellipse(675,545, 40);
  ellipse(662, 570, 40);
  ellipse(627, 570, 40);
  ellipse(612, 545, 40);
  ellipse(625, 520, 40);
   ellipse(658, 518, 40);
  fill('white');
  ellipse(643, 545, 35);
    textSize(30)
    fill('black')
    text("Activities to do in spring", 250, 180)
    
}
function rainDrop() {
	this.x = random(0, width);
	this.y = random(0, -height);

	this.show = function() {
		noStroke();
		fill(0,0,128);
		ellipse(this.x, this.y, 3, 12);
	}

	this.update = function() {
		this.speed = (5, 10);
		this.gravity = 30;
		this.y = this.y + this.speed * this.gravity;

		if (this.y > height) {
			this.y = random(0, -height);
		}

	}
}
function drawSun(){
  fill('orange')
  ellipse(845,50, 80, 80)
  strokeWeight(0)
}

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [April 3, 2020, 6:26pm UTC](https://discourse.processing.org/t/i-need-help-making-the-pictures-stay-until-next-is-pressed/19273/2 "2020-04-03T18:26:39Z")

</div>

Just start with an empty images array and then fill that in `preload()`. I did not have access to your images so I just pull random images from picsum.

In your callback functions, rather than trying to load the images again, just increment/decrement the variable `current`. I noticed you were also resizing the images every time either button was pressed, if you were resizing them to different sizes each time then this would be ok, but since you were setting that size the same every time, then just resize them right after you add them to the array (within that for loop).

To better illustrate, I removed all code that was not essential to your issue …

```auto
const NUM_IMGS = 10;
let imgs = [];
let currentImg = 0;

function preload() {
  for (let i = 0; i < NUM_IMGS; i++) {
    imgs[i] = loadImage(`https://picsum.photos/200/300/?random?sig=${i}`);
    // imgs[i].resize(330, 330);
  }
}

function setup() {
  createCanvas(200, 300);
  background(173, 216, 230);
  
  previous = createButton('Prev');
  previous.position(10, 320);
  previous.mouseClicked(_=> { if (currentImg > 0) currentImg--; });
  
  next = createButton('Next');
  next.mouseClicked(_=> { if (currentImg < imgs.length - 1) currentImg++; });
  next.position(140, 320);
}

function draw() {
  background(173, 216, 230);
  image(imgs[currentImg], 0, 0);
}

```