How do I generate colour based on my JSON data in p5.js?

p5.js Coding Questions
1

Hi everyone!
I’m trying to figure out how I can generate colour that will respond to my JSON data.
Heres the code so far and I’ve highlighted the bits at the end to show my attempt, but obviously it hasn’t worked. The reference I used was based off this https://editor.p5js.org/chesterdols/sketches/SJiW1YvTX

var data; 
var instagram, snapchat, messenger, facebook, email, instagramCol, snapchatCol, messengerCol, facebookCol, emailCol; 

function preload (){
  data =loadJSON ("Sunday.json");
}
function setup() {
   createCanvas (windowWidth, windowHeight);
   background (255);

 instagramCol = color (142, 68, 173);
   messengerCol = color (133, 193, 233);
   snapchatCol = color (247, 220, 111);
   facebookCol = color (118, 215, 196);
   emailCol = color (178, 186, 187);  
   c = [instagramCol, messengerCol, snapchatCol,  facebookCol, emailCol];

}

function draw () {
  
 for (var j = 0; j < data.length; j++) {
 fill (data[j].c[0], data[j].c[1], data[j].c[2];
 circle (x,y,30);

}

JSON FILE:

[
  {
    "12:00 am": {
      "instagram": 0,
      "messenger": 0,
      "snapchat": 0,
      "email": 0,
      "facebook": 0,
      "totalNotification": 0
    }
  },
  {
    "1:00 am": {
      "instagram": 1,
      "messenger": 2,
      "snapchat": 0,
      "email": 0,
      "facebook": 0,
      "totalNotification": 3
    }
  }
]

Any help or recommends would be great! if you could also point me to any references or examples other than the P5.JS library that would also be great!

2

Shouldn’t c refer to an array-index in the JSON file instead of an array set in setup()?
Anyways it’s difficult to copy your code.
You can edit it by removing the extra " ´´´ " in your code, leaving just one pair.

1 Like
3

Thank you I actually figured this bit out ahah. Not sure how to delete posts on this… :confused: