generate JSONArray

doeroe

Hi there,

do you know, how to generate a JSONArray with p5? According to the p5 reference, there must be a way to save a .json file containing several JSONobjects with saveJSON, but there is no example for the syntax of that JSONArray (only for JSON-Objects).

I really appreciate any help!

laimperiestro

Hello

Check this

https://p5js.org/examples/arrays-array.html

http://stackoverflow.com/questions/30818935/extracting-info-from-a-json-p5-js

https://p5js.org/examples/arrays-array-objects.html

GoToLoop

1. http://p5js.org/reference/#/p5/saveJSON
2. https://OpenProcessing.org/sketch/395612

"sketch.js":

/**
 * saveJSONArray() (v1.0)
 * GoToLoop (2016/Dec/15)
 *
 * forum.Processing.org/two/discussion/19765/generate-jsonarray
 * OpenProcessing.org/sketch/395612
 */

const jsonArr = [{}], jsonObj = jsonArr[0];

function setup() {
  jsonObj.id = 0;
  jsonObj.species = 'Panthera leo';
  jsonObj.name = 'Lion';

  saveJSON(jsonArr, 'lion.arr.json');
  saveJSON(jsonObj, 'lion.obj.json');
}

"lion.arr.json":

[
  {
    "id": 0,
    "species": "Panthera leo",
    "name": "Lion"
  }
]

"lion.obj.json":

{
  "id": 0,
  "species": "Panthera leo",
  "name": "Lion"
}

doeroe

Hey hey, so that helped me a little - thanks so far!

I have these three arrays, that are getting filled during a song is playing:

var idArray = [];
var levelArray = [];
var centroidArray = [];

My frameRate is equal to 3, so that every second three new values are pushed in the arrays.

After the song, the JSON file is generated (at least that is the plan) by pushing a "over-button" I built before:

 function setup() {
   frameRate(3);
   createCanvas(500,500);
   sound.play();

   // creating a button
   button = createButton('over');
   button.position(10, 10);
   button.mousePressed(stop);
}


function stop() {
  sound.stop()

  // generate JSON (hopefully JSON-Array)
  json = {};
  json.id = //idArray ?;
  json.level = //levelArray ?;
  json.centroid = //centroidArray ?;

  saveJSON(json, 'tea leaf dancers.json'); 
}

And now I don't know how to write, that every single JSON object should contain these three values.

Do I need a for-loop before I generate the JSON file with i < idArray.length?

doeroe

Yeah, I fixed it with:

function stop() {
  sound.stop()

   for (i = 0; i < idArray.length; i++){
     json = {};

     json.id = idArray[i];
     json.level = levelArray[i];
     json.centroid = centroidArray[i];

     jsonArray.push(json);
   }   
   saveJSON(jsonArray, 'tea leaf dancers.json');
}

GoToLoop

Indeed, if your 3 arrays are interconnected by the same index, why not encapsulate them as 1 object from the get go, and use 1 array only for those unified objects? :\">

I was actually finishing that same plan. And now it's ready. You can check it online below too: B-)

http://CodePen.io/GoSubRoutine/pen/RoENJd/right/?editors=1011

"index.html":

<script src=https://p5js.org/assets/js/p5.min.js></script>
<script src=https://p5js.org/assets/js/p5.dom.min.js></script>
<script src=sketch.js></script>

"sketch.js":

/**
 * saveJSONArray() (v2.0)
 * GoToLoop (2016-Dec-16)
 *
 * forum.Processing.org/two/discussion/19765/generate-jsonarray#Item_5
 * CodePen.io/GoSubRoutine/pen/RoENJd/right/?editors=1011
 */

"use strict";

const SAVE_JSON_NAME = 'tea_leaf_dancers.arr.json',
      BTN_NAME = 'End Song',
      songs = [], randoms = Array(3);

let canv, btn;

function setup() {
  canv = createCanvas(300, 200).mousePressed(addSong);
  btn  = createButton(BTN_NAME).mousePressed(saveSongs);
  noLoop();
  windowResized();
}

function draw() {
  background('#' + hex(~~random(0x1000), 3));
}

function saveSongs() {
  saveJSON(songs, SAVE_JSON_NAME);
}

function addSong() {
  pickRandoms(100);
  const song = createSong();
  songs.push(song);
  console.log(songs.length, song);
  redraw();
}

function pickRandoms(n) {
  for (let i = 0; i < randoms.length; randoms[i++] = ~~random(n));
}

function createSong() {
  return {
    id: randoms[0],
    level: randoms[1],
    centroid: randoms[2]
  };
}

function windowResized() {
  canv.position(windowWidth - width >> 1, windowHeight - height >> 1);

  const btnX = (width  - btn.width  >> 1) + canv.x,
        btnY = (height - btn.height >> 1) + canv.y;

  btn.position(btnX, btnY);
}

P.S.: As you can see, it's relying on 3 random values to fill up those 3 properties each time a mouse is pressed at the canvas. :ar!

doeroe

Wow, haha, for me that looks crazy! :D
But I guess (after some weeks living in the java script world) I understand your code! Great! Thanks for that version ;)