Using my own data in a P5.js sketch?

p5.js Coding Questions
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