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

**URL:** <https://discourse.processing.org/t/how-do-i-generate-colour-based-on-my-json-data-in-p5-js/24148>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [September 27, 2020, 7:32am UTC](https://discourse.processing.org/t/how-do-i-generate-colour-based-on-my-json-data-in-p5-js/24148 "2020-09-27T07:32:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [September 27, 2020, 7:32am UTC](https://discourse.processing.org/t/how-do-i-generate-colour-based-on-my-json-data-in-p5-js/24148/1 "2020-09-27T07:32:13Z")

</div>

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](https://editor.p5js.org/chesterdols/sketches/SJiW1YvTX)

```auto
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);

```

```auto
 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];

```

}

```auto
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:

```auto
[
  {
    "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!

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [September 28, 2020, 10:55am UTC](https://discourse.processing.org/t/how-do-i-generate-colour-based-on-my-json-data-in-p5-js/24148/2 "2020-09-28T10:55:17Z")

</div>

> [@sam101](#):
>
> `fill (data[j].c[0], data[j].c[1], data[j].c[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.

---

<div class="post-metadata">

**Author:** ![sam101](https://avatars.discourse-cdn.com/v4/letter/s/c67d28/32.png) [@sam101](https://discourse.processing.org/u/sam101)\
**Post date:** [September 28, 2020, 11:24am UTC](https://discourse.processing.org/t/how-do-i-generate-colour-based-on-my-json-data-in-p5-js/24148/3 "2020-09-28T11:24:25Z")

</div>

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