Proper technique for utilizing loadImage in p5.js?

Question

Proper technique for utilizing loadImage in p5.js?

I've been working on loading image URLs from a json file and everything seems to be functioning correctly, except for the actual images not displaying.

Currently, I have a simple click carousel set up where clicking moves the index to the next image. However, despite referencing the images in the code, they just won't display as intended.

If anyone has any ideas on what I might be doing wrong here, please let me know!

var w = window.innerWidth;
var h = window.innerHeight;
var xPos = w/2;
var yPos = h/2;
var index = 0;
var imageData;
var imgList = [];
var indexMax;

function preload() {
  loadJSON("image_search_result.json", resultLoaded);
}

function resultLoaded(data) {
  imageData = data;
  indexMax = imageData.items.length;
  for (i = 0; i < indexMax; i++) {
    imgList.push(imageData.items[i]['link']);
  }
}

function mouseReleased() {
  index = index + 1;
  if (index == indexMax){
    index = index - indexMax;
  }
}

function setup() {
  createCanvas(w,h);
}

function draw() {
  background(0);
  image(loadImage(imgList[index]),xPos,yPos,w,h);
  text(index,20,60); // index counter
  text(imgList[index],80,60); // image list number
  textSize(20);
  fill(255);
}

javascript asynchronous processing p5.js

Answer 1

Answer №1

It seems like the issue lies in your attempt to upload images with each call to the drawing function. Your code is set up in a way that even if the images remain constant, p5.js will continuously reload them from scratch. To resolve this, you should preload the images before initiating the program, as demonstrated below:

var w = window.innerWidth;
var h = window.innerHeight;
var xPos = w / 2;
var yPos = h / 2;
var index = 0;
var imageData;
var imgList = [];
var indexMax;

function preload() {
  loadJSON("img.json", resultLoaded);
}

function resultLoaded(data) {
  imageData = data;
  indexMax = imageData.items.length;
  for (i = 0; i < indexMax; i++) {
    url = imageData.items[i]["link"];
    imgList.push(loadImage(url));
  }
}

function mouseReleased() {
  index = index + 1;
  if (index == indexMax) {
    index = index - indexMax;
  }
}

function setup() {
  createCanvas(w, h);
}

function draw() {
  background(0);

  image(imgList[index], xPos, yPos, w, h);

  text(index, 20, 60);
  textSize(20);
  fill(255);
}

Side note: @George Profenza also provided a similar solution while I was crafting this code. Apologies for any redundancy.

Answer 2

It seems like the issue lies in your attempt to upload images with each call to the drawing function. Your code is set up in a way that even if the images remain constant, p5.js will continuously reload them from scratch. To resolve this, you should preload the images before initiating the program, as demonstrated below:

var w = window.innerWidth;
var h = window.innerHeight;
var xPos = w / 2;
var yPos = h / 2;
var index = 0;
var imageData;
var imgList = [];
var indexMax;

function preload() {
  loadJSON("img.json", resultLoaded);
}

function resultLoaded(data) {
  imageData = data;
  indexMax = imageData.items.length;
  for (i = 0; i < indexMax; i++) {
    url = imageData.items[i]["link"];
    imgList.push(loadImage(url));
  }
}

function mouseReleased() {
  index = index + 1;
  if (index == indexMax) {
    index = index - indexMax;
  }
}

function setup() {
  createCanvas(w, h);
}

function draw() {
  background(0);

  image(imgList[index], xPos, yPos, w, h);

  text(index, 20, 60);
  textSize(20);
  fill(255);
}

Side note: @George Profenza also provided a similar solution while I was crafting this code. Apologies for any redundancy.

Answer 3

Answer №2

Success! After implementing a callback in loadImage, I was able to get everything working smoothly. This method wasn't something I had come across before, but it turned out to be incredibly effective.

function draw() {
  nextImg = loadImage(imgList[index], imageLoaded);
  text(index,20,60); // tracking index
  text(imgList[index],80,60); // displaying image list number
  textSize(20);
  fill(255);
}

function imageLoaded() {
  background(0);
  image(nextImg,xPos,yPos,w,h);
  imageMode(CENTER);
}

Answer 4

Success! After implementing a callback in loadImage, I was able to get everything working smoothly. This method wasn't something I had come across before, but it turned out to be incredibly effective.

function draw() {
  nextImg = loadImage(imgList[index], imageLoaded);
  text(index,20,60); // tracking index
  text(imgList[index],80,60); // displaying image list number
  textSize(20);
  fill(255);
}

function imageLoaded() {
  background(0);
  image(nextImg,xPos,yPos,w,h);
  imageMode(CENTER);
}

Proper technique for utilizing loadImage in p5.js?

Answer №1

Answer №2

Similar questions

What is the best way to navigate to a different page when scrolling in React Router?

Is there a workaround for Angular ui-sref param removing spaces?

Having issues with the basic KnockoutJS binding not functioning as expected

Navigating an array and organizing items based on matching properties

Struggling to retrieve the accurate input value when the browser's return button is clicked?

Creating dynamic forms using AngularJS and the ng-repeat directive

Meteor.js in conjunction with ScrollMagic TweenMax.to

Ways to insert text into an SVG file

Tips for implementing Angular 6 Route Authentication Guards on both Parent and Child Routes in all Routes

Adding an Ajax response to a div in HTML: A step-by-step guide

populate first and then aggregate all the data in mongoose

Working with npm objects across multiple files

Unusual behavior observed within for loop; code within not running as expected

Eliminate the excess padding from the Material UI textbox

Placing a component within a .jsx file instead of utilizing a .css file for positioning

Guide on configuring Angular validation to trigger on blur events and form submission

Enhancing your react-slick carousel with a captivating full-screen background

Bidirectional Data Flow with rxjs in Angular

Tips for increasing character limit when moving data from a MYSQL database to an Excel spreadsheet with dropdown menus using PHP

Developing JavaScript functionality to manage multiple radio buttons that should be hidden after being selected