AUTO size() not working on createImg

p5.js Libraries
1

Hi. I’m still learning coding.
As far as I can tell setting one of the values of the size() when applied to createImg doesn’t work, the image just disappears. As in:

button = createImg(’…/dumbo.jpg’);
button.size(500, AUTO);

just makes the image disappear.

I found this recent related post on github and thought it was relevant, but I’m not sure:

I’m currently running the most recent version of P5.
Appreciate any help!

2

Hey there Epignosis,

Never heard of AUTO before, interesting. Is it possible, although hard to tell without seeing your code, that the Dumbo image isn’t preloaded yet?

3

Hi. Yes that is possible. Here is my code (with my personal comments that may or may not be correct, I’m teaching myself):

//define some variables to be used later, these are objects
var oscOne;
var filter;
var button;
var oscSlider;
var filterSlider;
var playing = false; //a variable known as playing whose state is known as false


// Any code outside of setup or draw gets executed first regardless of where it is in the document

		function setup() 
		//a function that only runs once automatically, define p5 objects here to be used later
{
createCanvas(100, 100); // Third parameter defines renderer
  
filter = new p5.Filter();
  filter.setType("lowpass");
  filter.freq(20000);
  filter.res(10);
	
oscOne = new p5.Oscillator(); //oscOne is a variable and an object
  oscOne.setType("square"); //varName.property
  oscOne.disconnect();
  oscOne.connect(filter);
  oscOne.start();
  oscOne.freq(440); //value in hz
  oscOne.amp(0); //(amplitude between 0-1, rampTime, timeFromNow)
  
button = createImg('../dumbo.jpg'); 
	//defines a variable known as button
button.size(500, AUTO);
//resize image
button.mousePressed(toggle); 
	// button is the variable 
	// mousePressed is a p5 specific event binded to the var 
	// the event calls the function named toggle, toggle is defined below
	
oscSlider = createSlider(100, 1200, 440); 
	// oscSlider is the variable
	//createSlider is a global js thing
	//the slider's parameters are (lowest value, highest value, start value)
	
filterSlider = createSlider(10, 20000, 20000); 	
}


function draw() 
//this is a p5 function, only call once, put all your changes here, everything here gets looped automatically
{
if (playing) {background(255, 0, 0);} 
	//if playing is true show this in the canvas
else {background(0, 0, 0);} 
	//if playing is false show this
	
oscOne.freq(oscSlider.value()); 
	//passes the slider's parameter value into the oscOne.freq value

filter.freq(filterSlider.value()); 
}



		function toggle() 
				//this is a function I made up using the button's boolean logic capability
				//this function is being invoked by the .mousePressed event binded to the button variable
{
if (!playing)
{playing = true; oscOne.amp(0.5, 0.5);} 
//evaluate the variable known as playing??, then when .mousePressed is invoked set the parameters of oscOne.amp to the following

else {playing = false; oscOne.amp(0, 0.5);} 
//???
}
4

Alright, edited your code a little bit and seems like the AUTO works. What I did notice however, is that when I open the sketch in a private window, is that it doesn’t run properly the first time. It doesn’t display the image button at all, until I press start again.

As I mentioned earlier, it’s probably because the image isn’t preloaded. Might be a good exercise for you to figure that out :slight_smile:

5

Awesome thanks so much, yes that seems to have solved it. (I’m still learning but at least it’s working now…)
Thanks again