P5js API add data on interval

Layzfat

Hi,

I hoped to solve this one on my own this time but I cant get the understanding to create the opposite from what I got helped with before. In this question I posted the json data change per time interval. I want to do the same but add the data per interval. I've managed to make an example of the data so it automatically loads all the data at once by setting it in the function setup()

The former make const timer and loops with the timer thru all images and data. Ideally I want to have both 'systems' working along each other in one code. But first I would like to know how it would work separately, In my short coding experience this approach made me search more myself and learn more from it.

This is what I cooked up so far.

sketch.js

    var data;

    function preload() {
      data = loadJSON("data.json");
    }

    function setup() {
      createCanvas(600,300);
      noStroke();
      fill(0,0,0,40);

      background(255,255,255);
      var places = data.places;
      for (var i = 0; i < places.length; i++) {
        var from_long = data.places[i].long;
        var from_lat = data.places[i].lat;
        var x = map(from_long,-180,180,0,width);
        var y = map(from_lat,-90,90,height,0);
        ellipse(x,y,3,3);
        console.log(data.places.length);
        console.log(data.places);
        console.log(data.places[0].long);
        console.log(from_lat);
      }
    }

data.json :

{
    "places" : [{
        "lat" : "5.758105",
        "long" : "4.218750"
    },
    {
        "lat" : "-34.768691",
        "long" : "149.765625"
    },
    {
        "lat" : "-6.871893",
        "long" : "142.031250"
    },
    {
        "lat" : "-9.785960",
        "long" : "42.583084"
    },
    {
        "lat" : "5.758105",
        "long" : "4.218750"
    },
    {
        "lat" : "5.758105",
        "long" : "4.218750"
    },
    {
        "lat" : "5.758105",
        "long" : "4.218750"
    }
]
}

ps: Wanted to make a thimble, but JSON is not supported.

GoToLoop

ps: Wanted to make a thimble, but JSON is not supported.

So why do you have an uploaded ".json" file there from your previous sketch? (:|
https://ThimbleProjects.org/blckpstv/388718/ID_python/id_JP_.json

If you're having problem uploading files on Thimble, you can try out OpenProcessing: *-:)
https://OpenProcessing.org/sketch/create

GoToLoop

I want to do the same but add the data per interval.

Isn't the whole data already fully loaded from the ".json" file? :-/
Where else the data is gonna keep coming in besides that file? /:)

Layzfat

@GoToLoop any thoughts on this? P5js doesn't have a timer reference to look into to find more about what I want to achieve.

@GoToLoop well for the uploading part, I keep getting now (for the new .json file) Thimble doesn't know how to process the file...

The add per interval was misleading, language misinterpretation. I want to show the data on the 'new' .json file on the html (or the canvas) that is drawn. When I run the sketch all the data is loaded and !showed instantly. I'm trying to show a new piece of the data for every interval and keep the former one.

More specific for every time a new circle() element is drawn onto the html (with the timer from the const). I want to show a new circle and keep the one from the former draw or loop.

I really hope this makes it more comprehensible

:\"> :-/ :-?