# Sharing a p5 sketch that has an array of images

**URL:** <https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821>\
**Category:** Coding Questions\
**Created:** [May 1, 2019, 10:43pm UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821 "2019-05-01T22:43:41Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![am\_i\_functional](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/am_i_functional/32/4933_2.png) [@am\_i\_functional](https://discourse.processing.org/u/am_i_functional)\
**Post date:** [May 1, 2019, 10:43pm UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/1 "2019-05-01T22:43:41Z")

</div>

My sketch which is just basically coding challenge 5 works great in the web editor. I used some of my own art in it and it works fine with my art. When i try to share online it has a problem. i saw in inspect element a differernt path to the water can vs the flower images and i wonder if it has something to do with it. When i try to present my sketch it just says loading.  
I took out the flowers and then it would present. I think it has something to do with accessing the flower images in an array.

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

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [May 2, 2019, 12:38am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/2 "2019-05-02T00:38:38Z")

</div>

sharing a p5js sketch that includes images shouldn’t be a problem. are there any error messages in the console (browser or sketch)?

---

<div class="post-metadata">

**Author:** ![am\_i\_functional](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/am_i_functional/32/4933_2.png) [@am\_i\_functional](https://discourse.processing.org/u/am_i_functional)\
**Post date:** [May 2, 2019, 1:58am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/3 "2019-05-02T01:58:09Z")

</div>

hi thanks for answering  
in the console it works just fine but when i go to present it then it says it cant load the flower images

it says says loading i saw this in the inspect console

 ![bug](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b8472928eefed81b0285104db7742a9329623abc.png)

---

<div class="post-metadata">

**Author:** ![am\_i\_functional](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/am_i_functional/32/4933_2.png) [@am\_i\_functional](https://discourse.processing.org/u/am_i_functional)\
**Post date:** [May 2, 2019, 2:05am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/4 "2019-05-02T02:05:27Z")

</div>

thats what message i see when i inspect it

 ![bugCapture](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b1d82ccc5870eccc014f0f22a2239f0b12eb9a7e.png)

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [May 2, 2019, 2:08am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/5 "2019-05-02T02:08:25Z")

</div>

posting a link to the code might be easier

---

<div class="post-metadata">

**Author:** ![am\_i\_functional](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/am_i_functional/32/4933_2.png) [@am\_i\_functional](https://discourse.processing.org/u/am_i_functional)\
**Post date:** [May 2, 2019, 2:18am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/7 "2019-05-02T02:18:09Z")

</div>

main sketch.js file

```auto

var p;

var f = [];
var drops = [];

var img = [];
var watercan;

function preload() {
  watercan = loadImage("can.png");
  for (var i = 0; i < 6; i++) {
    img[i] = loadImage("flower" + i + ".png");
  }
}

function setup() {
  createCanvas(600, 400);
  p = new player();

  // drop = new water(width/2, height/2); 
  for (var i = 0; i < 6; i++) {
    var kitten = img[i];
    f[i] = new flower(i * 80 + 80, 60, kitten);

  }

}

function draw() {
  background(55, 155, 100);
  p.show();
  p.move();
  for (var i = 0; i < drops.length; i++) {
    drops[i].show();
    drops[i].move();

    for (var j = 0; j < f.length; j++) {
      if (drops[i].hits(f[j])) {
        f[j].grow();
        drops[i].evap();

        //console.log("hit");  

      }

    }
  }

  var edge = false;
  for (var i = 0; i < f.length; i++) {
    f[i].show();
    f[i].move();

    if (f[i].x > width || f[i].x < 0) {
      edge = true;
    }
    
    if(f[i].y > height) {
      f[i].y =0; 
    }
  }

  if (edge) {
    for (var i = 0; i < f.length; i++) {
      f[i].shiftDown();
    }
  }

  // how to go through an array backwards. start at the end //length -1, go down by one and start at 0 
  for (var i = drops.length - 1; i >= 0; i--) {
    if (drops[i].toDelete) {
      drops.splice(i, 1);
    }
  }

}

function keyReleased() {
  if (key != ' ') {
    p.setDir(0);
  }
}

function keyPressed() {

  if (key === ' ') {
    var drop = new water(p.x, height - 60);
    drops.push(drop);
  }
  if (keyCode === RIGHT_ARROW) {
    p.setDir(1);
  } else if (keyCode === LEFT_ARROW) {
    p.setDir(-1);
  }

}

```

html file:

```auto
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
 

  </head>
  <body>
    <script src="sketch.js" type="text/javascript"></script>
    <script src="player.js" type="text/javascript"></script>
    <script src="flower.js" type="text/javascript"></script>
    <script src="water.js" type="text/javascript"></script>
  </body>
</html>

```

my flower.js file

```auto
typ
function flower(x,y,img ){
  
  this.x= x;
  this.y = y;
   this.kitten= img;
  this.r = 30;
 
   
  
  this.xdir = 1;
  //this.ydir= 0;
  
   this.grow =function (){
     this.r = this.r+1;
     
   }
  
  this.move= function (){     
   this.x =this.x +this.xdir;
    //this.y = this.y+ this.ydir;
    
  }
  
  this.shiftDown = function (){
   this.xdir *= -1; 
   this.y +=this.r; 
    
  }
  
  this.show = function () {
    //fill (225,0,200);
  // ellipse(this.x, this.y, this.r*2, this.r*2); 
    image (this.kitten, this.x, this.y, this.r*2,this.r*2 ); 
  }
}e or paste code here

```

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [May 2, 2019, 2:23am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/8 "2019-05-02T02:23:02Z")

</div>

just gonna have a look but you know you can just share the link to the editor and people can view your sketch like [mySketch](https://editor.p5js.org/hotfooted/sketches/UkUiSLo_q)

---

<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:** [May 2, 2019, 2:27am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/9 "2019-05-02T02:27:46Z")

</div>

> [@Issue loading xml-feed in p5js](https://discourse.processing.org/t/issue-loading-xml-feed-in-p5js/8212/4):
>
> CORS protection access got nothing to do w/ programming languages. tongue CORS is a browser exclusive “feature”: crazy_face

---

<div class="post-metadata">

**Author:** ![am\_i\_functional](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/am_i_functional/32/4933_2.png) [@am\_i\_functional](https://discourse.processing.org/u/am_i_functional)\
**Post date:** [May 2, 2019, 2:29am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/11 "2019-05-02T02:29:03Z")

</div>

[flower game](https://editor.p5js.org/keepitprocedural/sketches/LzW5-khId)

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [May 2, 2019, 2:37am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/12 "2019-05-02T02:37:50Z")

</div>

that link works fine for me. how were you sharing the sketch? were you just offering a download and expecting lauching index.html to work? if so then cors is an issue as GoToLoop said but a hacky little way to work around that you can just encode the images into a base64 string using a site like [this](http://jpillora.com/base64-encoder/) and using the base64 string like [this](https://editor.p5js.org/hotfooted/sketches/iw_O_oDda) but it all depends on how you are sharing the sketch. if you just give the link anyone should be able to use it if you want to offer downloads base64 embedding may be a better options and you can put all of the base64 strings in another .js file to keep stuff tidy. a bit hacky but it works.

edit: ofc if you just host it on your own server you can fix those problems or put it on [gamejolt](https://gamejolt.com) [itch](http://itch.io/) or [newgrounds](http://newgrounds.com)

---

<div class="post-metadata">

**Author:** ![am\_i\_functional](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/am_i_functional/32/4933_2.png) [@am\_i\_functional](https://discourse.processing.org/u/am_i_functional)\
**Post date:** [May 2, 2019, 2:39am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/13 "2019-05-02T02:39:24Z")

</div>

ok im might share the link to share then until i get my hackerman skills up then.

Thanks for the help!! 👍👍👍👍

---

<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:** [May 2, 2019, 3:12am UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/14 "2019-05-02T03:12:31Z")

</div>

> [@Searching for coding help in Processing3](https://discourse.processing.org/t/searching-for-coding-help-in-processing3/1851/7):
>
> For a sketch w/ assets, like images, audios, videos, fonts, etc., you can create a repo for it at [GitHub.com](http://GitHub.com): [Create a repo - GitHub Docs](https://Help.GitHub.com/articles/create-a-repo/) And then drag & drop your whole sketch folder into it:

---

<div class="post-metadata">

**Author:** ![am\_i\_functional](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/am_i_functional/32/4933_2.png) [@am\_i\_functional](https://discourse.processing.org/u/am_i_functional)\
**Post date:** [May 2, 2019, 6:56pm UTC](https://discourse.processing.org/t/sharing-a-p5-sketch-that-has-an-array-of-images/10821/15 "2019-05-02T18:56:44Z")

</div>

awesome ill try that!