Recitation 10

In this recitation, I use to use the data of the json file and create some visual effect. I used these data to determine some point of a person. If the user put the mouse on these points, they can see the point turns into red and its name appeared next to the point.

Link to glitch: https://glitch.com/edit/#!/ccl-amber-datavisualize?path=script.js%3A23%3A18

This is my code:

let data
let dot=[] let Dis
let check=true

function preload(){
data = loadJSON(“pose.json”);
}

function setup() {
createCanvas(600, 600);
background(50);
//console.log(data.bodypoints[1].x)
}

function draw() {
for(let i=0;i<data.bodypoints.length;i=i+1){
fill(255);
circle(data.bodypoints[i].x,data.bodypoints[i].y,8);
console.log(data.bodypoints[i].x)
Dis=dist(data.bodypoints[i].x,data.bodypoints[i].y,mouseX,mouseY)
if (Dis<=4){
fill(255,0,0);
circle(data.bodypoints[i].x,data.bodypoints[i].y,8);
text(data.bodypoints[i].part,data.bodypoints[i].x,data.bodypoints[i].y+25)
}
}
}