# Using my own data in a P5.js sketch?

**URL:** <https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983>\
**Category:** Coding Questions\
**Created:** [July 16, 2022, 6:51am UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983 "2022-07-16T06:51:25Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![mamba76](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mamba76](https://discourse.processing.org/u/mamba76)\
**Post date:** [July 16, 2022, 6:51am UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/1 "2022-07-16T06:51:25Z")

</div>

How can I load my JSON file, containing an array of x / y coordinates, into my sketch program so I can draw a graph ?

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 16, 2022, 7:37am UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/2 "2022-07-16T07:37:15Z")

</div>

Hi @mamba76,

It would be very helpfull if you at least post the structure of your json as the mentioned information could be stored in many ways …

[Load and save json](https://processing.org/examples/loadsavejson.html)

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![mamba76](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mamba76](https://discourse.processing.org/u/mamba76)\
**Post date:** [July 16, 2022, 1:29pm UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/3 "2022-07-16T13:29:39Z")

</div>

[  
[  
0,  
35.86,  
“”  
],  
[  
1,  
35.31,  
“”  
],  
[  
2,  
32.97,  
“”  
],  
]

cant do indents but its an array not an object

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 18, 2022, 7:19am UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/4 "2022-07-18T07:19:21Z")

</div>

Hi @mamba76,

Sorry for the late response, but wasn’t that busy on the weekend. 🙂  
First, you can indent even if it is an array.  
As you said in the title “your own data” I would recomment to use another structure of your json, as it simplifies things alot. If you’re using the structure like this:

file: data/data.json:

```auto
{
  "data": [
    [-100,-100,"#ff0000"],
    [100,-100,"#00ff00"],
    [100,100,"#0000ff"],
    [-100,100,"#ffff00"]
  ]
}

```

you can iterate through data quite easy.

```auto
let mydata;

function preload() {
  mydata=loadJSON("data/data.json");
}

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);  
  noStroke();
  beginShape();
  for (const element of mydata.data) {    
    fill(element[2]);
    vertex(element[0], element[1]);  
  };  
  endShape();    
}

```

Cheers  
— mnse

![canvas](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/f/cfcecfd70e2e3e8f68de4288872c41593c937cf1.png)

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [July 18, 2022, 7:25am UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/5 "2022-07-18T07:25:06Z")

</div>

Hi

[![](https://img.youtube.com/vi/_NFkzw6oFtQ/hqdefault.jpg "10.2: What is JSON? Part I - p5.js Tutorial") ](https://www.youtube.com/watch?v=_NFkzw6oFtQ)

[![](https://img.youtube.com/vi/118sDpLOClw/hqdefault.jpg "10.3: What is JSON? Part II - p5.js Tutorial") ](https://www.youtube.com/watch?v=118sDpLOClw)

---

<div class="post-metadata">

**Author:** ![mamba76](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mamba76](https://discourse.processing.org/u/mamba76)\
**Post date:** [July 18, 2022, 8:59am UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/6 "2022-07-18T08:59:51Z")

</div>

Thanks for reply. Coming from server side dev Iv not uch experience with front end stuff. Actually Iv really struggled it. I like javascript, I use node.js on VSC. The first graphics utility Iv tried is P5.js. I actually already made a sketch project that proccessed my array from a JSON file, as an array, and then produced the graph I required but Iv lost that program! When I try it today I get a new message and understand P5 only now accepts objects. Is this a new thing because I don’t remember object only last year?

---

<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:** [July 18, 2022, 9:03am UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/7 "2022-07-18T09:03:49Z")

</div>

> [@mamba76](#):
>
> … I don’t remember object only last year?

> [@Examples from "Make: Getting Started with p5.js" not working](https://discourse.processing.org/t/examples-from-make-getting-started-with-p5-js-not-working/37835/2):
>
> Neither!! File “films.json” is an array of objects. However loadJSON() is returning an object instead of an array! So filmData.length is zero! Even though it indeed contains 12 objects. According to loadJSON()'s online reference: [reference | p5.js](http://p5js.org/reference/#/p5/loadJSON) it’s supposed to return either an object or an array. So it’s a bug which was introduced later. You should open an issue on its repo:

---

<div class="post-metadata">

**Author:** ![mamba76](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mamba76](https://discourse.processing.org/u/mamba76)\
**Post date:** [July 18, 2022, 9:19am UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/8 "2022-07-18T09:19:18Z")

</div>

If this stuff aint hard enough! i gave up trying to include p5 sketch output in the same process as my node program because of the ES6 modular design and resulted to creating a JSON file first. I believe this required the dynamic import of my file in the preload() but I got it working eventually.

Im about to learn fabric.js instead soley because its should intergrate easily with node and has SVG ability but in all fairness apart from this apparent bug in P5 and the way things are going anything done in a browser is going to require use of webpack it seems. Its still a mess in my head but I understand the benefits from ES6 modular design and why things need to be minified but for someone who just wants to get their personal graphics on a computer screen its seems overkill. Then I suppose I shouldn’t have learned a scripting language lol.

---

<div class="post-metadata">

**Author:** ![mamba76](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mamba76](https://discourse.processing.org/u/mamba76)\
**Post date:** [July 18, 2022, 1:02pm UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/9 "2022-07-18T13:02:02Z")

</div>

The data Im trying to get into my P5 sketch.js is an array of graph coordinates so the x axis is 1,2,3,4,5… I can’t use these as property keys I would have to concatonate a string in front just to get data in the sketch and then add a routine to strip it again ?? Thats barmy! BUT I had a working sketch using arrays less than a year ago? Like already mentioned must be a bug so Fabric.js it is. Peace V

---

<div class="post-metadata">

**Author:** ![mamba76](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mamba76](https://discourse.processing.org/u/mamba76)\
**Post date:** [July 18, 2022, 8:11pm UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/10 "2022-07-18T20:11:13Z")

</div>

Ok so with this line I can import my json file ES6 style!

import data from ‘./myGraph.json’ assert {type: ‘json’};  
console.log(data[0][1])

But heres the catch -  
in index.html I have to tell it the source is a module like -

```
<script type="module" src="sketch.js" ></script>

```

But then my drawing dissapears !?  
I can either have one or the other not both so frustrating. Any ideas ?

---

<div class="post-metadata">

**Author:** ![mamba76](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mamba76](https://discourse.processing.org/u/mamba76)\
**Post date:** [July 18, 2022, 8:42pm UTC](https://discourse.processing.org/t/using-my-own-data-in-a-p5-js-sketch/37983/11 "2022-07-18T20:42:53Z")

</div>

solved (the quick way)

just do -

window.setup = function () {…}  
window.draw = function () {…}  
etc etc…