Using my own data in a P5.js sketch?

p5.js Coding Questions
1

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

2

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

Cheers
— mnse

3

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

cant do indents but its an array not an object

4

Hi @mamba76,

Sorry for the late response, but wasn’t that busy on the weekend. :slight_smile:
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:

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

you can iterate through data quite easy.

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

2 Likes
5

Hi

1 Like
6

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?

7
1 Like
8

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.

9

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

10

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 ?

11

solved (the quick way)

just do -

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