AUTO size() not working on createImg

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!

1 Like

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?

1 Like

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();
oscOne = new p5.Oscillator(); //oscOne is a variable and an object
  oscOne.setType("square"); //
  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 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
	//passes the slider's parameter value into the oscOne.freq 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);} 

1 Like

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:


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

1 Like