25:null 26:["$","title",null,{"children":"Endurance model simulation | Guillaume Le Gall | Observable"}] 2b:Tf34,function initagents(){ //this function will intialize the simulation. We create the agents will all their parameters // Tirage d'un nombre aléatoire entre deux bornes min et max function randomNumber(min, max){ return Math.random()*(max-min) + min} // Calcule aléatoirement un historique de course function generate_histo() { let histo = [] // nombre de courses de l'historique var k = Math.trunc(Math.random()*10) +1 let speed = 0 let t1 = 0 let t2 = 0 let duration = -1 let catCourse = 0 // Joueur endurant, cat_endurance = 2 for (let i=0; i histo.length-10){ //On recupere les valeurs de l'histo precedent pour relier nos points de la courbe if (j>0) { var endu_prec = endurance(histo.slice(0, j-1),obj.cat_endurance) data_line_simul.push({'y': parseFloat(endu_prec), 'color':obj.color, 'time':histo[j].t1 }, {'y': parseFloat(endu), 'color':obj.color, 'time':histo[j].t2 }) ; data_line_course_simul.push({'y':0, 'x':histo[j].t1, 'color':obj.color }, {'y':histo[j].speed, 'x':histo[j].t1, 'color':obj.color },{'y':histo[j].speed, 'x':histo[j].t2, 'color':obj.color },{'y':0, 'x':histo[j].t2, 'color':obj.color }) } //Cas particulier du premier element de l'histo à gérer (on part de 1 en endurance et de 0 en vitesse) else{ data_line_simul.push({'y': 1.0, 'color':obj.color, 'time':0.0 }, {'y': parseFloat(endu), 'color':obj.color, 'time':histo[j].t2 }) data_line_course_simul.push({'y':0, 'x':0, 'color':obj.color }, {'y':0, 'x':histo[j].t1, 'color':obj.color }, {'y':histo[j].speed, 'x':histo[j].t1, 'color':obj.color },{'y':histo[j].speed, 'x':histo[j].t2, 'color':obj.color },{'y':0, 'x':histo[j].t2, 'color':obj.color }) } } else { //Si on traite une course de l'histo ayant eu lieu avant la simulation if (j>0) { var endu_prec = endurance(histo.slice(0, j-1),obj.cat_endurance) data_line.push({'y': parseFloat(endu_prec), 'color':obj.color, 'time':histo[j].t1}, {'y': parseFloat(endu), 'color':obj.color, 'time':histo[j].t2}) ; data_line_course.push({'y':0, 'x':histo[j].t1, 'color':obj.color}, {'y':histo[j].speed, 'x':histo[j].t1, 'color':obj.color},{'y':histo[j].speed, 'x':histo[j].t2, 'color':obj.color},{'y':0, 'x':histo[j].t2, 'color':obj.color}) } else{ data_line.push({'y': 1.0, 'color':obj.color, 'time':0.0}, {'y': parseFloat(endu), 'color':obj.color, 'time':histo[j].t2}) data_line_course.push({'y':0, 'x':0, 'color':obj.color}, {'y':0, 'x':histo[j].t1, 'color':obj.color}, {'y':histo[j].speed, 'x':histo[j].t1, 'color':obj.color},{'y':histo[j].speed, 'x':histo[j].t2, 'color':obj.color},{'y':0, 'x':histo[j].t2, 'color':obj.color}) } //On relie la ligne de d'avant la simulation à celle de la simulation if (j==histo.length-10) { data_line.push({'y': parseFloat(endu), 'color':obj.color, 'time':histo[j+1].t1}, ) data_line_course.push({'y':0, 'x':histo[j+1].t1, 'color':obj.color}) } } //On calcule la valeur max de t de tous les historiques pour pouvoir mettre à l'echelle notre graphique if(histo[j].t2>t_max){ t_max=histo[j].t2 } } //On met à jour nos variables globales data_endu.push(data_line) data_endu_simul.push(data_line_simul) data_course.push(data_line_course) data_course_simul.push(data_line_course_simul) } return {'data_endu' :data_endu, 'data_endu_simul' :data_endu_simul,'data_course': data_course,'data_course_simul': data_course_simul, 't_max' : t_max} } var get_data = get_data() //On appelle les fonctions de dessin drawGraphEndu(get_data) drawGraphCourse(get_data) } 2d:Ta42,function drawGraphEndu (get_data) { var margin = {top: 20, right: 20, bottom: 20, left: 20} , width = 900 // Use the window's width , height = 500; // Use the window's height // The number of datapoints var xScale = d3.scaleLinear() .domain([0, get_data.t_max]) // input .range([0, width]); // output var yScale = d3.scaleLinear() .domain([0, 1]) // input .range([height, 0]); // output d3.select("#graph_endu").selectAll("svg").remove(); var svg = d3.select("#graph_endu").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)); svg.append("g") .attr("class", "y axis") .call(d3.axisLeft(yScale)); //fonction appelée sur les données avant simulation (ligne de faible epaisseur) function draw_line(dataset){ svg.selectAll("dotPoint") .data(dataset) .enter().append("circle") .attr("class", "dot") .attr("cx", function(d, i) { return xScale(d.time) }) .attr("cy", function(d) { return yScale(d.y) }) .attr("r", 2) .attr("fill", function(d) { return d.color }) svg.append("path") .datum(dataset) .attr("class", "line") .style("stroke",function(d,i) {let color =d[i].color; if (d[i].simul) {; color = 'black'} return(color) }) .style("stroke-width",0.5 ) .attr("d", d3.line() .x(function(d, i) { return xScale(d.time); }) .y(function(d) { return yScale(d.y); })) ; } //fonction appelée sur les données de la simulation (ligne de grosse epaisseur) function draw_line_simul(dataset){ svg.selectAll("dotPoint") .data(dataset) .enter().append("circle") .attr("class", "dot") .attr("cx", function(d, i) { return xScale(d.time) }) .attr("cy", function(d) { return yScale(d.y) }) .attr("r", 3) .attr("fill", function(d) { return d.color }) svg.append("path") .datum(dataset) .attr("class", "line") .style("stroke",function(d,i) {let color =d[i].color; if (d[i].simul) {; color = 'black'} return(color) }) .style("stroke-width",2 ) .attr("d", d3.line() .x(function(d, i) { return xScale(d.time); }) .y(function(d) { return yScale(d.y); })) ; } //On appelle le bon jeu de donnee sur la bonne fonction get_data.data_endu.forEach(function(e) { draw_line(e) }) get_data.data_endu_simul.forEach(function(e) { draw_line_simul(e) } ) } 2e:T9a4,//Meme principe que drawGraphEndu mais pour la vitesse function drawGraphCourse (get_data) { var margin = {top: 20, right: 20, bottom: 20, left: 20} , width = 900 // Use the window's width , height = 500; // Use the window's height // The number of datapoints var xScale = d3.scaleLinear() .domain([0, get_data.t_max]) // input .range([0, width]); // output var courseScale = d3.scaleLinear() .domain([0, 30]) // 30 est la vitesse max atteignable .range([height, 0]); // output d3.select("#graph_course").selectAll("svg").remove(); var svg = d3.select("#graph_course").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)); svg.append("g") .attr("class", "course axis") .call(d3.axisLeft(courseScale)); function draw_line_course(dataset){ svg.selectAll("dotPoint") .data(dataset) .enter().append("circle") .attr("class", "dot") .attr("cx", function(d, i) { return xScale(d.x) }) .attr("cy", function(d) { return courseScale(d.y) }) .attr("r", 0.5) .attr("fill", function(d) { return d.color }) svg.append("path") .datum(dataset) .attr("class", "line_course") .style("stroke",function(d,i) { return(d[i].color) }) .style("stroke-width",0.5 ) .attr("d", d3.line() .x(function(d, i) { return xScale(d.x); }) .y(function(d) { return courseScale(d.y); })) ; } function draw_line_course_simul(dataset){ svg.selectAll("dotPoint") .data(dataset) .enter().append("circle") .attr("class", "dot") .attr("cx", function(d, i) { return xScale(d.x) }) .attr("cy", function(d) { return courseScale(d.y) }) .attr("r", 1) .attr("fill", function(d) { return d.color }) svg.append("path") .datum(dataset) .attr("class", "line_course") .style("stroke",function(d,i) { return(d[i].color) }) .style("stroke-width",2 ) .attr("d", d3.line() .x(function(d, i) { return xScale(d.x); }) .y(function(d) { return courseScale(d.y); })) ; } get_data.data_course.forEach(function(e) { draw_line_course(e) }) get_data.data_course_simul.forEach(function(e) { draw_line_course_simul(e) }) }2f:T69e, // Renvoie le vecteur vitesse de l'agent qui sera utilisé pour la fonction principale displayInteractive. function speed_agent(position, cat_endurance, vmax, endu, histo){ var speed = Math.random()*endu*vmax ;// = x2+y2 var speed_x = Math.random()*speed*speed; var speed_y = speed * speed - speed_x; var signe_x = Math.random() var signe_y = Math.random() if (signe_x>0.5){ signe_x = -1} else { signe_x=1} if (signe_y>0.5){ signe_y = -1} else { signe_y = 1} speed_x = signe_x*Math.sqrt(speed_x)/2 speed_y =signe_y*Math.sqrt(speed_y)/2 var taille = histo.length; var t1 = histo[taille-1].t2 +randomGauss(35,1); var t2 = t1+randomGauss(10,1); var t_max = t2-t1 var pos_x = position[0] + t_max * speed_x; var pos_y = position[1] + t_max * speed_y; var count = 0 //On verifie que l'agent reste bien dans l'ecran, sinon on calcule une nouvelle course, on fait ca jusqu'à ce la vitesse convienne while ((pos_x < 10 || pos_x > width - 10 || pos_y < 10 || pos_y > height -10 || (pos_x< width/2 && pos_y < 110)) && (count < 1000)){ count ++; var new_speed = Math.random()*endu*vmax ;// = x2+y2 var speed_x = Math.random()*new_speed*new_speed; var speed_y = new_speed * new_speed - speed_x; var signe_x = Math.random() var signe_y = Math.random() if (signe_x>0.5){ signe_x = -1} else { signe_x=1} if (signe_y>0.5){ signe_y = -1} else { signe_y = 1} var speed_x = signe_x*Math.sqrt(speed_x)/2; var speed_y = signe_y*Math.sqrt(speed_y)/2; var pos_x = position[0] + t_max * speed_x; var pos_y = position[1] + t_max * speed_y; ;} return {'speed':[speed_x, speed_y],'t1':t1, 't2':t2} }; 30:T6d5,//Fonction qui calcule l'endurance à partir d'un historique donné function endurance(historic, cat_endurance) { // définition des listes de paramètres d'incrémentation/décrémentation de l'endurance en fonction des caractéristiques du joueur // [marche, jogging, intensité modérée, haute intensité, sprint, division facteur temps, % recharge, temps récup nécéssaire à la recharge] var non_endurant = [1, 0.8, 0.7, 0.5, 0.3, 40, 0.1, 30]; var moy_endurant = [1, 0.9, 0.8, 0.7, 0.6, 50, 0.2, 25]; var tres_endurant = [1, 1, 0.95, 0.9, 0.8, 80, 0.3, 20]; var endurance_tot = [non_endurant, moy_endurant, tres_endurant]; let endurance = 1 let t_prec = 0 historic.forEach(function(elem) { var speed = elem['speed'] let facteur = 1 let fact_temps = 1 if ((elem['t1'] - t_prec) > endurance_tot[cat_endurance][7]) { if (endurance + endurance_tot[cat_endurance][6]*endurance >1 ){ endurance = 1 } else { endurance = endurance + endurance_tot[cat_endurance][6] *endurance} } if ( speed < 5.0) { facteur = endurance_tot[cat_endurance][0] } else if ( 5< speed < 13){ facteur = endurance_tot[cat_endurance][1] } else if ( 13< speed < 16){ facteur = endurance_tot[cat_endurance][2] } else if ( 16 < speed < 19){ facteur = endurance_tot[cat_endurance][3] } else if ( 19 < speed ){ facteur = endurance_tot[cat_endurance][4] } fact_temps = (1-(elem['t2']-elem['t1'])/endurance_tot[cat_endurance][5]) endurance = fact_temps * facteur * endurance t_prec = elem['t2'] }) return (endurance) }; 31:T1b81,//Fonction principale qui trace chaque segment de course et met à jour les variables partagées par plusieurs fonctions function* drawSituation( agents, options = { darker, showCones, voronoiClip, width, height, shape }, context, n = 10 // On va tracer 9 courses pour chaque agent ) { //Fin de la simulation // On recupere les dernieres positions et vitesse des agents au cas où on veuille placer la balle // On trace les graphiques associés à la simulation if (n <= 1) { var vmax0=agents[0]['vmax']*endurance(agents[0].histo, agents[0].cat_endurance); var vmax1=agents[1]['vmax']*endurance(agents[1].histo, agents[1].cat_endurance); var vmax2=agents[2]['vmax']*endurance(agents[2].histo, agents[2].cat_endurance); document.getElementById('agent0').innerHTML=[agents[0]['position'],agents[0]['speed'],vmax0,agents[0]['color']]; document.getElementById('agent1').innerHTML=[agents[1]['position'],agents[1]['speed'],vmax1,agents[1]['color']]; document.getElementById('agent2').innerHTML=[agents[2]['position'],agents[2]['speed'],vmax2,agents[2]['color']]; drawGraph() } else { //Si on est au premier appel, on met en place les elements statiques (noms des agents/ categorie/ vmax.. if (n === 10){ function drawParams(agents){ var j=1 for (var p of agents){ function enduranceProfile(p) { if (p.cat_endurance == 0){return 'Low'} else if (p.cat_endurance == 1){return 'Middle'} else {return 'Important'} } context.font = 'normal 12pt Calibri'; context.fillStyle = p.color; context.fillText('Agent ' + j, 0 , 15 +(j-1)*35); context.font = 'normal 12pt Calibri'; context.fillStyle = p.color; context.fillText('Agent ' + j, p.position[0]+10 , p.position[1]+5 ); context.fillText('Max speed : ' + p.vmax, p.position[0]+10 , p.position[1] + 20); context.fillText('Endurance Profile : ' + enduranceProfile(p), p.position[0]+10 , p.position[1] + 35); j+=1; } }; drawParams(agents); } // Variables utiles pour la creation des prochaines courses var new_agents=[] var t_fin = [0,0,0] //Code original de Philippe Riviere const path = d3.geoPath().context(context); let { darker, showCones, showBoundaries, voronoiClip, width, height, shape, panel } = options; darker = darker || 0; const delaunay = d3.Delaunay.from(agents), points = delaunay.points, voronoi = delaunay.voronoi([0, 0, width, height]); let t = 0, d, time = performance.now(), t_cone = 0, instance = Math.random(); // hidden canvas to note who is winning const hidden = options.panel ? DOM.context2d(width, height, 0.25) : null; const lookup = new Map(); if (hidden) { const hiddenCanvasColor = rgbColorGenerator(); agents.forEach(a => (a.hidden = hiddenCanvasColor.next().value)); } function* draw() { const me = instance; var pos_fin = [] var i = 0; for (var p of agents) { t=0; do { const show_cone = showCones && t > t_cone + 3 && (t = t_cone + 3); t += 1 / Math.sqrt(t + 1); points[0] = p.position[0] + t * p.speed[0]; points[1] = p.position[1] + t * p.speed[1]; if (voronoiClip) voronoi.update(); if (d) context.putImageData(d, 0, 0); d = context.getImageData(0, 0, width, height); if (performance.now() - time > 50) { // same on the hidden canvas if (hidden) { hidden.save(); if (voronoiClip) { hidden.beginPath(); voronoi.renderCell(i, hidden); hidden.clip(); } hidden.globalCompositeOperation = "destination-over"; hidden.fillStyle = `rgb(${p.hidden.join(",")})`; hidden.fill(); hidden.restore(); } time = performance.now(); yield context.canvas; } } while ( me == instance && t < (p.histo[p.histo.length - 1].t2 - p.histo[p.histo.length - 1].t1) && d.data.some((d, i) => i % 4 === 3 && !d) // Le t max depend de chaque agent et represente le temps de sa course ) t_fin[i]= t; // On stocke le t_fin pour le reutiliser plus loin i++; } function drawLayer(hidden, lookup) { // all we paint here is forgotten var j=0; for (var p of agents) { drawPoint(context, p, t_fin[j], j, n, 5); // Pour chaque agent, on trace la course j++ } if (options.panel) { context.save(); context.translate(0, 0); drawPanel(context, agents, hidden, lookup); context.restore(); } } drawLayer(hidden, lookup); // On appelle drawLayer ; // Si on n'est pas dans le cas de la derniere course if (n != 2){ var j = 1; for (var p of agents) { var t_fin_j = t_fin[j-1] var cat_endurance = p.cat_endurance; var taille = p.histo.length; var new_val = speed_agent([p.position[0] + t_fin_j * p.speed[0], p.position[1] + t_fin_j * p.speed[1]], cat_endurance, p.vmax, endurance(p.histo, cat_endurance), p.histo) // On calcule une nouvelle vitesse grace à l'historique et la postion finale de la course precedente. var new_speed = new_val.speed; var norm_speed = Math.sqrt(Math.pow(new_speed[0],2)+Math.pow(new_speed[1],2)); let new_histo = p.histo; new_histo.push({'speed':norm_speed, 't1':new_val.t1, 't2':new_val.t2}); //On met à jour l'historique //On "cree" notre nouvel agent (agent modifié de sa nouvelle course) var new_ag = { 'position':[p.position[0] + t_fin_j * p.speed[0], p.position[1] + t_fin_j * p.speed[1]], 'vmax': p.vmax, 'color': p.color, 'acceleration':p.acceleration, 'histo': new_histo, 'speed': new_speed, 'cat_endurance': cat_endurance, 'colorjauge':color_jauge(endurance(new_histo, cat_endurance)*360), 'hidden':p.hidden, 'pixels':p.pixels } //On met a jour le html utile au graphiques document.getElementById("agent_"+j.toString()).innerHTML = JSON.stringify(new_ag); new_agents.push(new_ag); //On met à jour la variable globale des 3 agents j+=1; } } // Sinon on remet au bout la valeur de l'agent en cours (dans le cas ou on devrait placer la balle) else if (n===2){ for (var p of agents) { var new_ag = p; new_agents.push(new_ag); } } } yield* draw() yield context.canvas; // On rappelle la fonction récursivement sur les nouveaux agents yield* drawSituation( new_agents, options = { darker, showCones, voronoiClip, width, height, shape }, context, n-1 )} }32:T5f0,//Fonction qui trace chaque course et chaque jauge function drawPoint(context, p, t_end, j, n, size) { //tracé de la course const end = [ p.position[0] + t_end * p.speed[0], p.position[1] + t_end * p.speed[1] ]; context.strokeStyle = "black"; context.beginPath(); context.moveTo(...p.position); context.lineTo(...end); context.lineWidth = size > 5 ? 2 : 0.5; context.stroke(); context.closePath(); context.restore(); context.beginPath(); context.arc(...p.position, size, 0, tau); context.fillStyle = p.color; context.fill(); context.lineWidth = size > 5 ? 3 : 2; context.stroke(); context.closePath(); context.restore(); context.beginPath(); context.arc(...end, size / 2, 0, tau); context.fillStyle = p.color; context.fill(); context.lineWidth = size > 5 ? 2 : 1; context.stroke(); context.closePath(); context.restore(); // Dessin de chaque 'arc de cercle' (on dessine en fait des triangles) suivant le vecteur couleur de l'endurance de l'agent.(jauge) let r = 15; for (var i = 0; i < 360; i++) { context.beginPath(); context.moveTo(70 + (10-n)*40, 15 +j*35); context.lineTo(70 +(10-n)*40 + Math.cos(i*Math.PI/180)*r,15+ j*35 -Math.sin(i*Math.PI/180)*r); context.lineTo(70 +(10-n)*40 +Math.cos((i+1)*Math.PI/180)*r,15 + j*35 -Math.sin((i+1)*Math.PI/180)*r); context.fillStyle = p.colorjauge[i]; context.fill(); context.lineWidth = size > 5 ? 2 : 1; context.closePath(); context.restore(); } }33:T502,//Fonction originale de Philippe Rivière function drawPanel(context, agents, hidden, lookup) { if (hidden) { const data = hidden.getImageData( 0, 0, hidden.canvas.width, hidden.canvas.height ).data; let unknown = 0; for (var agent of agents) agent.pixels = 0; for (let i = 0; i < data.length; i += 4) { if (data[i + 3] >= 200) { const c = [data[i], data[i + 1], data[i + 2]], code = c.join(","); if (!lookup.has(code)) { const a = d3.scan( agents.map( d => Math.abs(d.hidden[0] - c[0]) + Math.abs(d.hidden[1] - c[1]) + Math.abs(d.hidden[2] - c[2]) ) ); lookup.set(code, a); } agents[lookup.get(code)].pixels++; } } context.fillStyle = "white"; context.fillRect( 0, 0, Math.sqrt(d3.max(agents, d => d.pixels)) + 2, 2 * (agents.length + 2) ); for (var agent of agents) { context.translate(0, 2); context.fillStyle = agent.color; context.fillRect(0, 0, Math.sqrt(agent.pixels), 2); } context.fillStyle = "black"; context.translate(0, 2); context.fillRect(0, 0, Math.sqrt(unknown), 2); } }34:Tb1a,function pathboundaries(agents, tmax = 1000) { const A = new Map(); const time = performance.now(); const delaunay = d3.Delaunay.from( agents, d => d.position[0], d => d.position[1] ), points = delaunay.points, voronoi = delaunay.voronoi([0, 0, width, height]); let step = 0.01; for (let t = 1; t < tmax; t += step) { const r = radius(t); for (let i = 0; i < agents.length; i++) { points[2 * i] = agents[i].position[0] + agents[i].speed[0] * t; points[2 * i + 1] = agents[i].position[1] + agents[i].speed[1] * t; } delaunay.update(); let max = Infinity; for (let i = 0; i < agents.length; i++) { for (const j of delaunay.neighbors(i)) { if (j < i) { const vector = [ points[2 * j] - points[2 * i], points[2 * j + 1] - points[2 * i + 1] ], dist = Math.hypot(...vector) / 2, mid = [ (points[2 * i] + points[2 * j]) / 2, (points[2 * i + 1] + points[2 * j + 1]) / 2 ]; const diff = r * r - dist * dist; max = Math.min(max, Math.abs(diff)); if (diff >= 0) { const id = `${i}-${j}`; if (!A.get(id)) { const str = []; A.set(id, str); } const str = A.get(id); const side = Math.sqrt(diff), normal = [vector[1] / dist / 2, -vector[0] / dist / 2]; for (const even of [-1, 1]) { const pt = [ mid[0] + even * normal[0] * side, mid[1] + even * normal[1] * side ]; const f = delaunay.find(...pt, i); if (f == i || f == j) { if (even < 0) str.push(pt); else str.unshift(pt); } } } } } } // adaptive step for t step = Math.max(1, Math.sqrt(max)) / 100; if (performance.now() - time > 10000) break; } const boundaries = []; for (const [id, m] of A) { let start = true, p0 = m[0], curr; for (let i = 0; i < m.length; i++) { const p = m[i]; if (Math.hypot(p[0] - p0[0], p[1] - p0[1]) > 25) { if (!start) { boundaries.push({ type: "Feature", properties: id, geometry: { type: "LineString" , coordinates: curr } }); start = true; } } if (start) { curr = []; start = false; } curr.push(p); p0 = p; } boundaries.push({ type: "Feature", properties: id, geometry: { type: "LineString", coordinates: curr } }); } return { type: "FeatureCollection", features: boundaries.filter(d => d && d.geometry.coordinates) }; }35:T474,function initsvg(context,maxx,maxy){ //this function initialize the first graph below the simulation (distance to the ball over time) d3.select("#svgcontainer").selectAll("svg").remove(); var margin = {top: 0, right: 0, bottom: 20, left: 20} , width = 900 // Use the window's width , height = 500; // Use the window's height var widthrect= width-150 var svg = d3.select("#svgcontainer").append("svg") .attr("width", width+margin.right+margin.left) .attr("height", height+margin.top+margin.bottom) .append("g") .attr("transform", "translate("+margin.left+","+margin.top+")") var x = d3.scaleLinear() .domain([0,maxx]) .range([0, width]) var y = d3.scaleLinear() .domain([maxy,0]) .range([0,height]); var xAxis = d3.axisBottom() .scale(x); var yAxis = d3.axisLeft() .scale(y); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height +")") .call(xAxis) svg.append("g") .attr("class", "y axis") .call(yAxis) return [svg,x,y]; }36:T4a4,function initsvgvitesse(context,maxvx,maxvy){ //this function initialize the second graph below the simulation (speed of the agent during their trajectory to the ball over time) d3.select("#svgcontainer2").selectAll("svg").remove(); var margin = {top: 0, right: 0, bottom: 20, left: 20} , width = 900 // Use the window's width , height = 500; // Use the window's height var widthrect= width-150 var svg = d3.select("#svgcontainer2").append("svg") .attr("width", width+margin.right+margin.left) .attr("height", height+margin.top+margin.bottom) .append("g") .attr("transform", "translate("+margin.left+","+margin.top+")") var x = d3.scaleLinear() .domain([0,maxvx]) .range([0, width]) var y = d3.scaleLinear() .domain([maxvy,0]) .range([0,height]); var xAxis = d3.axisBottom() .scale(x); var yAxis = d3.axisLeft() .scale(y); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height +")") .call(xAxis) svg.append("g") .attr("class", "y axis") .call(yAxis) return [svg,x,y]; }37:T8c6,function trajectory1 (pos,vit,point, vmax=12){ //this function calculate the trajectory of an agent with an initial position and speed to a point with a maximal speed. it returns the trajectory (x and y) and the speed (u,v,w) var x=[pos[0]] var u=[vit[0]] var c=point[0] var y=[pos[1]] var v=[vit[1]] var d=point[1] var dt=0.01 var F=dt*30 var epsilon=0.1 if (u[0]!=0){ var angle=Math.atan((v[0])/(u[0])) } else{ var angle=Math.pi/2 } var vmaxx=Math.abs(Math.cos(angle)*vmax) var vmaxy=Math.abs(Math.sin(angle)*vmax) for (var i=0;i<=1000;i++){ if((c-x[i])!=0){ angle=Math.atan((d-y[i])/(c-x[i])) } else{ angle=Math.pi/2 } if (vmaxx>Math.abs(Math.cos(angle)*vmax)){ if (vmaxx-F>=0){ vmaxx=vmaxx-F } else{ vmaxx=0 }} else{ vmaxx=Math.min(vmaxx+F,Math.abs(Math.cos(angle)*vmax)) } if (vmaxy>Math.abs(Math.sin(angle)*vmax)){ if (vmaxy-F>=0){ vmaxy=vmaxy-F } else{ vmaxy=0 }} else{ vmaxy=Math.min(vmaxy+F,Math.abs(Math.sin(angle)*vmax)) } var Fx=F var Fy=F var signex=1 if (c-x[i]<0){ signex=-1 } var newu= u[i]+ Fx*signex newu = Math.abs(newu)<=vmaxx ? newu : (newu>=0 ? vmaxx :-vmaxx) u.push(newu) var signey=1 if (d-y[i]<0) { signey=-1 } var newv= v[i]+ Fy*signey newv = Math.abs(newv)<=vmaxy ? newv : (newv>=0 ? vmaxy :-vmaxy) v.push(newv) var newx = x[i]+newu*dt x.push(newx) var newy = y[i]+newv*dt y.push(newy) if (Math.abs(c-newx) { instance = Math.random(); im = context.getImageData( 0, 0, context.canvas.width, context.canvas.height ); }) .on("drag.render", () => { context.putImageData(im, 0, 0); for (const p of agents.filter(p => p.active)) { drawPoint(context, p, 9); } }) .on("end.render", go); const _dragsubject = dragsubject(agents); d3.select(canvas) .call(_drag) .style("cursor", "pointer") .on("mousemove", () => { const m = d3.mouse(canvas), subject = _dragsubject({ x: m[0], y: m[1] }); d3.select(canvas).style( "cursor", !subject ? "default" : subject.thing == "dot" ? "pointer" : "crosshair" ); }); go(); return canvas; async function go() { context.clearRect(0, 0, w, h); document.getElementById('isball').innerHTML="0" const u = instance; for(let j=1;j<4;j++){ document.getElementById('endu_'+j.toString()).innerHTML="" } for (const x of drawSituation(agents, options, context)) { if (u !== instance) break; if (options.visibility) await options.visibility(); await Promises.delay(16); } } }39:T1256,function place_ball(x, y, context, agents) { //this function will place the green dot on the canvas where the user clicked and will intiate the calculation of the trajectory of each agent. it will also display the two first graphs below the simulation // const svg = d3.create("svg").attr("viewBox", [0, 0, 500, 500]); // console.log(x,y); if (context) { // d3.select(context).append("circle") // .attr("cx", 30) // .attr("cy", 30) // .attr("r", 20); var isball=document.getElementById('isball').innerHTML if(isball=="0"){ var agent0=document.getElementById('agent0').innerHTML agent0=agent0.split(",") var agent1=document.getElementById('agent1').innerHTML agent1=agent1.split(",") var agent2=document.getElementById('agent2').innerHTML agent2=agent2.split(",") var agents2=[agent0,agent1, agent2] context.beginPath(); context.arc(x, y, 10, 0, 2 * Math.PI, false); context.fillStyle = 'green'; context.fill(); context.lineWidth = 2; context.strokeStyle = '#003300'; context.stroke(); context.closePath(); var maxx=0 var maxy=0 var maxvy=0 for(var i = 0; i < agents2.length; i++) { var p=agents2[i] var pos=[20*parseFloat(p[0])/context.canvas.width,10*parseFloat(p[1])/context.canvas.height] var speed=[parseFloat(p[2])/3.6,parseFloat(p[3])/3.6] var ball =[x*20/context.canvas.width,y*10/context.canvas.height] var result = trajectory1(pos, speed, ball,parseFloat(p[4])/4) var position=[] var distance=[] var maxylocal=0 var maxvylocal=0 result[0].forEach(function(e,i){ position.push([context.canvas.width*(e)/20,context.canvas.height*(result[1][i])/10]) //position.push([e,result[1][i]]) var dist=Math.sqrt((e-ball[0])**2+(result[1][i]-ball[1])**2) maxylocal=Math.max(dist, maxylocal) maxvylocal=Math.max(result[4][i], maxvylocal) }) var maxxxlocal=position.length maxx=Math.max(maxx,maxxxlocal) maxy=Math.max(maxy,maxylocal) maxvy=Math.max(maxvy,maxvylocal) context.save(); context.beginPath(); context.moveTo(position[0][0],position[0][1]); position.forEach(function(e,i){ context.lineTo(position[i][0],position[i][1]); }) context.lineWidth = 2; context.strokeStyle = "black"; context.stroke(); context.closePath() context.restore(); context.save(); context.beginPath(); context.moveTo(p[0],p[1]); context.lineTo(p[0]+p[2]*20,p[1]+p[3]*20); context.lineWidth = 2; context.strokeStyle = "red"; context.stroke(); context.closePath() context.restore(); } var elements=initsvg(context, maxx, maxy); var elements2=initsvgvitesse(context, maxx, maxvy); var line = d3.line() .curve(d3.curveMonotoneX) .x(function(d,i){return elements[1](i)}) .y(function(d,i){return elements[2](d);}) var line2 = d3.line() .curve(d3.curveMonotoneX) .x(function(d,i){return elements2[1](i)}) .y(function(d,i){console.log(d);return elements2[2](d);}) for(var i = 0; i < agents2.length; i++) { var p=agents2[i] var pos=[20*parseFloat(p[0])/context.canvas.width,10*parseFloat(p[1])/context.canvas.height] var speed=[parseFloat(p[2])/3.6,parseFloat(p[3])/3.6] var ball =[x*20/context.canvas.width,y*10/context.canvas.height] var result = trajectory1(pos, speed, ball,parseFloat(p[4])/4) var distance=[] result[0].forEach(function(e,i){ //position.push([e,result[1][i]]) var dist=Math.sqrt((e-ball[0])**2+(result[1][i]-ball[1])**2) distance.push(dist) }) var lines = elements[0].append("g").selectAll("path").data([distance]).enter() .append("path") .attr("d", line) .attr("fill", "none") .attr("stroke", p[5]) var lines2 = elements2[0].append("g").selectAll("path").data([result[4]]).enter() .append("path") .attr("d", line2) .attr("fill", "none") .attr("stroke", p[5]) } document.getElementById('isball').innerHTML="1" } } }3a:[{"id":"691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","href":"https://static.observableusercontent.com/files/691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","name":"d3-hexbin.js","type":"application/javascript","lastModified":1585656794843.376,"size":7438}] 29:{"id":"f98b434eda0671bb","slug":"try-to-fix-run-time/4","title":"Endurance model simulation","thumbnail":"5034c5fc6b9109447e4633c2b151fcef1f7377d9d5b5ebb398be12f727522cb9","access_level":"public","create_time":"$D2020-03-31T12:13:14.843Z","update_time":"$D2020-03-31T13:39:11.095Z","view_time":null,"first_public_time":"$D2020-03-31T12:13:22.775Z","fork":{"id":"0a5298d8465788bc","slug":"try-to-fix-run-time/4","title":"Try to fix run time","owner":{"id":"2fe05e7dad5299f4","login":"paulinelem","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"ded7a4035e65b118","login":"guillaumelegall","name":"Guillaume Le Gall","avatar_url":"https://avatars-next.observableusercontent.com/692055ffcd9b279c4ad0edf89bca091e1c583182887d349e68f72bb943a31c40","tier":"starter_2024"},"version":3343,"publish_version":3343,"role":null,"authored":false,"authors":[{"type":"individual","id":"025b728c49863189","login":"guillaumelegall","name":"Guillaume Le Gall","avatar_url":"https://avatars-next.observableusercontent.com/692055ffcd9b279c4ad0edf89bca091e1c583182887d349e68f72bb943a31c40","tier":null}],"members":[{"type":"individual","id":"025b728c49863189","login":"guillaumelegall","name":"Guillaume Le Gall","avatar_url":"https://avatars-next.observableusercontent.com/692055ffcd9b279c4ad0edf89bca091e1c583182887d349e68f72bb943a31c40","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Endurance model simulation","cells":[{"id":2376,"value":"md`# Endurance model simulation \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3330,"value":"md` The purpose of this notebook is to explain the importance of endurance in the modelisation of moving agents. In order to do that, we created a simulation with three agents. For each one, you can select his endurance profile (important= fast recovery) and his maximum speed. The simulation will then create an historic of course for each agent. The simulation will then display 10 movements for each agent based on what he did before. After each movement, the endurance of each agent is calculated and this influence the maximal speed of the next movement. When each agent has made 10 movements, you can add a ball (green point) by clicking on the simulation. The notebook will then calculate a trajectory for each agent to go to that point. To do the algorythm takes into account what the agent did before (it uses the endurance of the agent)\n\n\nThis project is based on the work of Nathan Rivière `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2556,"value":"md`## Choose parameters for the 1st agent`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2527,"value":"viewof enduranceType1 = select({\n title: \"1st Agent : Endurance Profile\",\n description: \"Choose the endurance profile of the 1st agent\",\n options: [\n {label : \"Important\", value:2},\n {label:\"Middle\", value:1},\n {label: \"Low\", value:0}],\n value: \"Moyennement endurant\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2499,"value":"viewof vmax1 = slider({\n title: \"1st agent : Maximum speed\",\n min: 0,\n value: 25,\n max: 40,\n step: 0.00001,\n description: \"Choose the maximum speed of the 1st agent\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2558,"value":"md`## Choose parameters for the 2nd agent`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2560,"value":"viewof enduranceType2 = select({\n title: \"2nd Agent : Endurance Profile\",\n description: \"Choose the endurance profile of the 2nd agent\",\n options: [\n {label : \"Important\", value:2},\n {label:\"Middle\", value:1},\n {label: \"Low\", value:0}],\n value: \"Moyennement endurant\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2563,"value":"viewof vmax2 = slider({\n title: \"2nd agent : Maximum speed\",\n min: 0,\n value: 25,\n max: 40,\n step: 0.00001,\n description: \"Choose the maximum speed of the 2nd agent\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2566,"value":"md`## Choose parameters for the 3rd agent`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2568,"value":"viewof enduranceType3 = select({\n title: \"3rd Agent : Endurance Profile\",\n description: \"Choose the endurance profile of the 3rd agent\",\n options: [\n {label : \"Important\", value:2},\n {label:\"Middle\", value:1},\n {label: \"Low\", value:0}],\n value: \"Moyennement endurant\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2570,"value":"viewof vmax3 = slider({\n title: \"3rd agent : Maximum speed\",\n min: 0,\n value: 25,\n max: 40,\n step: 0.00001,\n description: \"Choose the maximum speed of the 3rd agent\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2678,"value":"md`## Visualisation`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2919,"value":"// Tirage d'une variable suivant une loi normale \n function randomGauss(moyenne, ecartType){\n let u = Math.random(), v = Math.random();\n let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v ); //u et v les deux valeurs aléatoires initiales\n // Décallage de la gaussienne autour des valeurs qui nous intéressent\n num *= ecartType; \n num += moyenne-ecartType; \n return num\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3275,"value":"html` \n

Légende

Types d'endurance

Endurance Importante
Endurance Moyenne
Endurance Faible

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2475,"value":"{\n //launch \n \n var agents=initagents();\n yield displayInteractive(agents, {\n showBoundaries: true,\n visibility,\n panel: true\n });\n}\n\n\n// the accessible zone is the intersection of the dark and clear zone\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3280,"value":"html` \n

Graphiques

Evolution de la distance au ballon au cours du temps

Evolution de la vitesse des agents lors de leur trajectoire vers le ballon (m/s)

\n
\n

Evolution de l'endurance en fonction du temps

Evolution des courses en fonction du temps

En gras les phases visibles dans la simulation

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3040,"value":"html` \n

\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2788,"value":"html `\n\n\n

\n\n

\n\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3012,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3084,"value":"//Fait matcher la categorie d'endurance à la couleur du joueur\nfunction map_endu_color(cat_endurance){\n let color = 'green'\n if (cat_endurance==0){\n color = 'red'\n } else if(cat_endurance ==1){\n color = 'gold'\n }\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2699,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3128,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3137,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2494,"value":"viewof globalAlpha = select({\n options: [1, 0.3, 0.1, 0.01],\n description: \"Global alpha\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"viewof s = slider({\n min: 0,\n value: 5,\n max: 10,\n step: 0.00001,\n description: \"acceleration/speed ratio\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"viewof darker = slider({\n min: 0,\n value: 0.02,\n max: 0.1,\n description: \"darker with time?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1575,"value":"viewof shape = select({\n options: [\"circle\", \"square\", \"manhattan\"],\n description: \"Isolines shape\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"viewof options = checkbox([\"Show cones\", \"Clip Voronoi\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"showCones = options && options.indexOf(\"Show cones\") > -1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"voronoiClip = options && options.indexOf(\"Clip Voronoi\") > -1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"radius = d3\n .scalePow()\n .exponent(2)\n .domain([0, 10])\n .range([0, s])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1543,"value":"mutable debug = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2298,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2301,"value":"// renvoie le vecteur de couleurs de la jauge de l'agent\n function color_jauge(colormax) {\n var colors = [],\n slice = 0,\n value =0,\n inPad = false;\n // 360 degrees\n d3.range(360).forEach(function(e, i) {\n // convert to radians\n if(i<=colormax){value =0.5}\n else{value =1}\n var start = i * (Math.PI / 180),\n end = (i + 1) * (Math.PI / 180);\n colors.push(d3.hsl(Math.floor(i/3), 1, value)); \t\n \n });\n return(colors)\n };","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2073,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"md`### Relative acceleration\n\nIf an agent can accelerate more than another, it can “encircle” it after a while. (Note: in this model, we can’t use the Voronoi clipping any more).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":438,"value":"viewof acceleration = slider({\n min: 0.9,\n max: 3,\n value: 1,\n description: \"Relative acceleration\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"viewof acceleration2 = slider({\n min: 0.9,\n max: 3,\n value: 1.25,\n description: \"Relative acceleration\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":967,"value":"md`## Vector field`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1090,"value":"hexradius = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1094,"value":"viewof angle = slider({ min: -90, max: 90, description: \"Angle\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":834,"value":"md`## Draw`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1869,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1716,"value":"// import {rgbColorGenerator} from \"@camargo/canvas-picking-with-a-hidden-canvas\"\nfunction* rgbColorGenerator() {\n let nextColor = 1;\n const nextColorStep = 50;\n\n while (nextColor < 16777216) {\n nextColor += nextColorStep;\n yield [\n nextColor & 0xff,\n (nextColor & 0xff00) >> 8,\n (nextColor & 0xff0000) >> 16\n ];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1653,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1579,"value":"//Fonction originale de Philippe Rivière\nfunction drawShape(x, y, r, shape, context) {\n\n\n if (shape === \"square\") {\n context.save();\n context.translate(x, y); \n context.beginPath();\n context.moveTo(-r, -r);\n context.lineTo(-r, r);\n context.lineTo(r, r);\n context.lineTo(r, -r);\n context.closePath();\n } else if (shape === \"manhattan\") {\n context.save();\n context.translate(x, y);\n context.beginPath();\n context.moveTo(-r, 0);\n context.lineTo(0, r);\n context.lineTo(r, 0);\n context.lineTo(0, -r);\n context.closePath();\n\n } else {\n context.beginPath();\n context.arc(x, y, r, 0, tau);\n\n\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1356,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3030,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3216,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3028,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":541,"value":"md`## Drag`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1804,"value":"// Choose the circle that is closest to the pointer for dragging.\nfunction dragsubject(agents, context) {\n \n const radius = 30;\n\n return function(event) {\n if (!event) event = d3.event;\n let subject = null;\n let distance = radius * 1.5;\n \n let ballon = true;\n for (const c of agents) {\n // grab the dot?\n let d = Math.hypot(event.x - c.position[0], event.y - c.position[1]);\n if (d < distance) {\n \n distance = d;\n subject = c;\n subject.thing = \"dot\";\n ballon = false\n }\n // grab the speed?\n let t = c.histo[c.histo.length-10].t2-c.histo[c.histo.length-10].t1;\n d = Math.hypot(\n event.x - (c.position[0] + t * c.speed[0]),\n event.y - (c.position[1] + t * c.speed[1])\n );\n if (d < 5) {\n distance = d;\n subject = c;\n subject.thing = \"speed\";\n ballon = false\n }\n\n }\n if (ballon) {\n place_ball(d3.event.x, d3.event.y, context, agents)\n }\n return subject;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"// adapted from https://observablehq.com/@d3/hello-d3-drag\nfunction drag (agents, context){\n \n return d3\n .drag()\n .subject(dragsubject(agents, context))\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3026,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"md`## Annex`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"// agents = Array.from({ length: 500 }, (d, i) => ({\n// position: [width * Math.random(), height * Math.random()],\n// speed: [Math.random() - Math.random(), Math.random() - Math.random()],\n// color: color(i),\n// acceleration: 1, // in this model all have the same acceleration capacity, \n// distance:0, \n// distanceMax:20\n// }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":930,"value":"color = i => {\n const u = i / 2.618033988749895,\n v = u - Math.floor(u);\n return d3.hsl(v * 360, 0.6 + 0.2 * Math.random(), 0.6); // d3.interpolateSpectral(v)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\", \"d3-color@1.3\", await FileAttachment(\n \"d3-hexbin.js\"\n).url())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"tau = 2 * Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":147,"value":"import {checkbox, slider, select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2872,"value":"html `\n\n

\n\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3021,"value":"html `

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3324,"value":"html `\n\n\n

`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 2a:"$29:body"