I feel like this should be an easy thing to do but my brain is fried. How can I use data from a JSON object in processing.js? I've spent all day trying to figure it out.

My ajax script for storing the json looks like this: obj = JSON.parse(response);

The result of which is this: [{"x":20,"y":145},{"x":70,"y":10},{"x":18,"y":50}]...

My sketch in test.pde looks like this:

1. void setup(){ 
   

2.       size(200, 200); 
   

3. } 
   

4. void draw(){ 
   

5.       background(204);
         fill(20, 255, 160);
         ellipse(100, 100, 20, 20);
   }

So my question is, how do I draw... ellipses with positions based on the json data?

Hello, let me explain my situation and maybe you can help me. I have a database containing data for thousands of shapes, many of which will eventually be drawn outside my visible 500x500 sketch window. Presently I'm able to navigate through a dozen or so test shapes by dragging the mouse around, like one might do when dragging the mouse in Google Maps to see new image data.

So I guess my question is, should I worry about Processing handling so many shapes at once or not? Should I try to write something to draw them only when they are inside the visible window to boost performance, or is it okay if I make a .pde file with thousands of shapes written inside the draw loop? I'm actually using processing.js if that makes any difference.

1.     beginShape();
       vertex(0, 0);
       vertex(-250, -250);
       vertex(-200, -210);
       vertex(-150, -250);
       endShape();
   

I'm new to programming and not quite sure how to approach this. Any advice on  databases, etc or  references to other resources would also be greatly appreciated. Thanks for your input.

Hi, I'm having trouble understanding how or if it's possible to get an easing effect with translate when the mouse is released. So is this possible? Am I moving in the right direction? My goal is to ease a bunch of different shapes together after the user releases the mouse, similar to the interaction on google maps. Any feedback would be greatly appreciated. I am new to processing and programming in general.

1. void setup(){
       smooth();
       size(800, 500);
   }
   
   void draw(){
       background(0, 0, 0);
       smooth();
       strokeWeight(1);
       fill(0, 255, 255)
       stroke(255, 102, 0);
      
       beginShape();
       vertex(200, 200);
       vertex(250, 250);
       vertex(200, 300);
       vertex(150, 250);
       endShape();
   }
   
   void mouseDragged(){
       translate(mouseX-pmouseX, mouseY-pmouseY)
   }
   
   void mouseReleased(){
     //animate translation movement.. possible?
   }