# AUTO size() not working on createImg

**URL:** <https://discourse.processing.org/t/auto-size-not-working-on-createimg/12776>\
**Category:** Libraries\
**Created:** [July 18, 2019, 3:07am UTC](https://discourse.processing.org/t/auto-size-not-working-on-createimg/12776 "2019-07-18T03:07:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [July 18, 2019, 3:07am UTC](https://discourse.processing.org/t/auto-size-not-working-on-createimg/12776/1 "2019-07-18T03:07:14Z")

</div>

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:

> <https://github.com/processing/p5.js/pull/3481>

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

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [July 18, 2019, 9:36am UTC](https://discourse.processing.org/t/auto-size-not-working-on-createimg/12776/2 "2019-07-18T09:36:21Z")

</div>

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](https://p5js.org/reference/#/p5/preload) yet?

---

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [July 18, 2019, 3:40pm UTC](https://discourse.processing.org/t/auto-size-not-working-on-createimg/12776/3 "2019-07-18T15:40:26Z")

</div>

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

```auto
//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);} 
//???
}

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [July 18, 2019, 4:32pm UTC](https://discourse.processing.org/t/auto-size-not-working-on-createimg/12776/4 "2019-07-18T16:32:13Z")

</div>

Alright, [edited your code a little bit](https://editor.p5js.org/Tiemen/sketches/UzTFg7m2w) 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 🙂

---

<div class="post-metadata">

**Author:** ![epignosis567](https://avatars.discourse-cdn.com/v4/letter/e/d78d45/32.png) [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Post date:** [July 18, 2019, 5:08pm UTC](https://discourse.processing.org/t/auto-size-not-working-on-createimg/12776/5 "2019-07-18T17:08:10Z")

</div>

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