I need help making the pictures stay until next is pressed

p5.js Coding Questions
1

Can someone please help
Heres the code:

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)
}
1 Like
2

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 …

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);
}
1 Like