# Web Editor : not defined width

**URL:** <https://discourse.processing.org/t/web-editor-not-defined-width/8240>\
**Category:** Coding Questions\
**Created:** [February 9, 2019, 10:41am UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240 "2019-02-09T10:41:42Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pilou](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@Pilou](https://discourse.processing.org/u/Pilou)\
**Post date:** [February 9, 2019, 10:41am UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/1 "2019-02-09T10:41:42Z")

</div>

When I drop an image to the screen the width is not defined…in the function “draw” part !

[https://editor.p5js.org/Pilou/sketches/qEPc9d1YD](https://editor.p5js.org/Pilou/sketches/qEPc9d1YD)

I have not this problem when an image is preloaded!  
[https://editor.p5js.org/Pilou/sketches/SyG4qmVqQ](https://editor.p5js.org/Pilou/sketches/SyG4qmVqQ)

thx by advance for unblock that! 🙂

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 9, 2019, 5:46pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/2 "2019-02-09T17:46:02Z")

</div>

> **[Image Drop](https://bl.ocks.org/GoSubRoutine/22e47de702d3c8d86585f80f652d8179)**
>
> GoSubRoutine’s Block 22e47de702d3c8d86585f80f652d8179

---

<div class="post-metadata">

**Author:** ![Pilou](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@Pilou](https://discourse.processing.org/u/Pilou)\
**Post date:** [February 9, 2019, 5:54pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/3 "2019-02-09T17:54:41Z")

</div>

> [@GoToLoop](#):
>
> Routine’s Block 22e47de702d3c8d86585f80f652d8179

Thx but it’s not the drop who makes problem, it’s after! 🙂

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 9, 2019, 6:05pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/4 "2019-02-09T18:05:22Z")

</div>

Callback **draw()** doesn’t await for _img_ to be fully loaded, much less for some1 to drop an image into the browser! 🤨

In my own sketch, I check whether _img_ exists before using **image()**. And you should do the same. 😉

---

<div class="post-metadata">

**Author:** ![Pilou](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@Pilou](https://discourse.processing.org/u/Pilou)\
**Post date:** [February 9, 2019, 7:20pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/5 "2019-02-09T19:20:57Z")

</div>

I will study that! 🙂

---

<div class="post-metadata">

**Author:** ![Pilou](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@Pilou](https://discourse.processing.org/u/Pilou)\
**Post date:** [February 9, 2019, 8:13pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/6 "2019-02-09T20:13:13Z")

</div>

[https://editor.p5js.org/Pilou/sketches/5A7DeQN-H](https://editor.p5js.org/Pilou/sketches/5A7DeQN-H)

Bravo ! With your blocks the program works perfectly  
Just drop an image PNG (\<=1024\*512) with a transparent background for have an interesting result! 😉

Here if you have not for test: [image 1](https://i.postimg.cc/WzrtqxFj/titi.png)  
[image 2](https://i.postimg.cc/NGrKn2NV/titi1.png)

I have only 2 messages on the console who are out of my knowledge! 😉  
If you can take a look:)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 9, 2019, 8:37pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/7 "2019-02-09T20:37:56Z")

</div>

You should properly indent your code so you & others can study them comfortably. 😔

Use this site service for it ➡ [Beautifier.io](http://Beautifier.io)

Back to your code, even though you check _img_ for the 1st **image()**, the 1 inside your triple loop is missing. 😬

Actually, you should skip your whole triple for loop if there’s no _img_. 🙃

Also, you’re loading the p5js libraries 2 times in your “index.html” file! 😲

---

<div class="post-metadata">

**Author:** ![Pilou](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@Pilou](https://discourse.processing.org/u/Pilou)\
**Post date:** [February 9, 2019, 11:48pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/8 "2019-02-09T23:48:52Z")

</div>

Thx for the all advices…i will see that with natural light tomorrow!

If you don’t know, a free [true gem](https://ephtracy.github.io) of coding!  
my little [gallery](https://schmoll8.wixsite.com/magicavox)

 ![infinite_jungle1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/32921321aeba60ad016b952b16996b736c146867.jpeg)

---

<div class="post-metadata">

**Author:** ![Pilou](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@Pilou](https://discourse.processing.org/u/Pilou)\
**Post date:** [February 10, 2019, 5:37pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/9 "2019-02-10T17:37:31Z")

</div>

[https://editor.p5js.org/Pilou/sketches/PE\_HwNoXH](https://editor.p5js.org/Pilou/sketches/PE_HwNoXH)

I remake for more clear thing for me 🙂  
And I have forgotten to increase the name of previous versions so they are devastated!

Here not yet drop…  
you must obtain a variation of that in change t between (1-50) on the fly inside the code …or anything you want!

 ![green_worms](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ecea7498543039818b455ab42d5c5113579c7532.jpeg)  
Next I will try to put your code…for drop an image against an yet existing one!

---

<div class="post-metadata">

**Author:** ![Pilou](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@Pilou](https://discourse.processing.org/u/Pilou)\
**Post date:** [February 10, 2019, 6:59pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/10 "2019-02-10T18:59:53Z")

</div>

[https://editor.p5js.org/Pilou/sketches/0Q6enksIF](https://editor.p5js.org/Pilou/sketches/0Q6enksIF)

don’t know how skip the triple loop …try with “while” but…  
Normally code is “beautifyed”…

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 10, 2019, 9:06pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/11 "2019-02-10T21:06:15Z")

</div>

My advice to you was this: 😔

> [@GoToLoop](#):
>
> Actually, you should skip your whole triple `for` loop if there’s no _img_ . 🙃

Meaning you should check _img_ before allowing that triple `for () {}` loop. 🧐

Also, this is an “infinite” loop block ➡`while (img) {`

Given there’s nothing inside that block which can mutate variable _img_ to “falsy”, it’s gonna repeat itself ad infinitum once it starts! ♾

---

<div class="post-metadata">

**Author:** ![Pilou](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@Pilou](https://discourse.processing.org/u/Pilou)\
**Post date:** [March 15, 2019, 1:13pm UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/12 "2019-03-15T13:13:03Z")

</div>

Thx to [Makio](https://twitter.com/makio135)!

[https://editor.p5js.org/Pilou/sketches/y1GHaBqyT](https://editor.p5js.org/Pilou/sketches/y1GHaBqyT)

Right Click on the image for save it as you want  
Just a curious thing - size saved image is 2048 \*1024 : should be 1024 \*512 ???

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/db141ef64c60bfb272b0745cea8976a2c99ad8f9.jpeg)

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/13dea3f5250d537df17ce9ab94f4cff6caedb3ca.jpeg)

 ![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a21c8c816b61a41e96f7c72611818bc2fd771fcd.jpeg)

---

<div class="post-metadata">

**Author:** ![Pilou](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@Pilou](https://discourse.processing.org/u/Pilou)\
**Post date:** [March 16, 2019, 2:15am UTC](https://discourse.processing.org/t/web-editor-not-defined-width/8240/13 "2019-03-16T02:15:56Z")

</div>

![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ecfbb015f15cfb3319613aae1d44e151d5b1192d.jpeg)