2b:null 2c:["$","title",null,{"children":"Endurance simulation | Na Mi | Observable"}] 31:T20f3,md`# Séance 4 - 30/01 : ## Objectifs de la séance ### Récap de la séance précédente * Liens observable semaine précédente : https://observablehq.com/@paulinelem/voronoi-particles-light/2 * Nous avons continué à modéliser le paramètre endurance : définition d'un historique aléatoire des courses pour chaque agent, définition d'une vitesse initiale aléatoire (avec une vitesse maximale atteignable bornée par le quota d’endurance du joueur), mise à jour de l’endurance du joueur en fonction du type de course du joueur * Nous avons fait l’état de l’art sur le paramètre endurance, en particulier en définissant des catégories de course dans lesquelles l’endurance est plus ou moins affectée suivant le type de course. ### Objectifs de la séance * Récap réunion du mardi 28/01 * Créer une représentation visuelle de jauges de quota d’endurance * Intégrer les représentations visuelles des jauges et les calculs d’endurance / vecteurs vitesses * Utiliser les données de l'état de l'art pour générer un historique plus réaliste * Etat de l’art temps de réaction * Ajouter un point ballon au clic et adapter les vecteurs vitesses des joueurs en fonction de la position du ballon * Organiser une réunion pour la semaine prochaine ## Travail sur la séance ### Objectifs du paramètres endurance L’objectif est de créer une visualisation graphique où des agents sont sur un terrain avec une jauge d’endurance au-dessus d’eux. Des vitesses sont générées aléatoirement et forment l’historique du joueur, son quota d’endurance diminue en fonction de cet historique et des 5 catégories de vitesses qu’il peut utiliser. Dans une deuxième partie, un ballon pourra être ajouté ce qui dirigera les joueurs dans cette direction. Ainsi, à différents moments du match (donc des endurances différentes), une même situation pourra aboutir à des couvertures de terrain différentes car un joueur ne pourra plus atteindre telle ou telle zone car son temps de réaction n’est plus assez bon, ou sa vitesse maximale trop réduite. ### Le paramètre temps de réaction Sources : * http://scienceperfo.com/comprendre-le-temps-de-reaction/ * http://tpetempsdereaction.e-monsite.com/pages/facteurs-influencants-le-temps-de-reaction/ * http://acces.ens-lyon.fr/acces/thematiques/neurosciences/outils-numeriques/temps-de-reaction-investigation-variabilite-et-traitements-statistiques-des-donnees/comprendre-1/le-temps-de-reaction-quest-ce-que-cest Le temps de réaction (acquisition des informations et sélection de la réponse) englobe une série de processus qui s’enchaînent en très peu de temps. Si on ajoute le temps de mouvement, on obtient le temps de réponse (acquisition et transfert des informations vers le cerveau, la sélection d’une réponse et le temps de mouvement). Acquisition et transfert des informations vers le cerveau : le système visuel du joueur détermine la trajectoire et la vitesse du ballon, soit en regardant le ballon, soit en regardant comment le joueur se positionne pour tirer etc. L’acquisition de ces informations s’additionne au temps de transfert vers le cerveau par le nerf optique. Sélection de la réponse : comparaison de la situation en direct avec les infos passées dont il connaît le résultat, puis sélection de la réponse motrice qu’il doit faire pour aller vers ou avoir le ballon. Le temps de mouvement : les signaux sont envoyés aux muscles pour créer l’action voulue, l’activation musculaire et le temps de mouvement sont comptés. Facteurs affectant le temps de réaction : * Identification * Choix * Nombre de stimulus (facteur déclenchant une réaction) * Type de stimulus (temps de réaction d’un stimulus auditif deux fois plus court que le temps de réaction d’un stimulus visuel) * Intensité de stimulus * Entraînement (plus efficace après s’être entraînés, les personnes en bonne forme physique ont également un temps de réaction plus court car la circulation du sang est meilleure donc le cerveau est plus irrigué donc va plus vite) * Fatigue (la fatigue mentale a un impact beaucoup plus fort que la fatigue musculaire, qui n’aurait quasiment aucun impact, plus les tâches sont dures plus la fatigue sera impactante) * Sexe (les temps de réactions masculins sont plus rapides dans quasiment toutes les tranches d’âge, même si cela se réduit dernièrement avec les femmes participant plus à des activités entraînant la réactivité) * Age (les personnes plus âgées sont plus prudentes et surveillent leur réponse, elles ne retiennent également qu’un stimulus en même temps contrairement aux jeunes, commence à faiblir dès 24 ans) * Distraction (bruit de fond allonge le temps de réaction, ainsi que les phobies, le téléphone, l’anxiété face à la réponse qu’il va falloir apporter) * Vision (un stimulus en vision centrale sera traité plus rapidement que dans une vision périphérique) * Gaucher ou droitier (les gauchers ont un temps de réaction plus rapide, sans doute lié aux hémisphères du cerveau) * Alcool ou substances détériorant la concentration (temps de réaction augmenté, également avec de la caféine) * Niveau d’étude et intelligence (légère tendance pour les personnes intelligentes à être plus rapides) Les processus visuels semblent expliquer 90% de l’écart dans la vitesse de réaction entre les athlètes, la rapidité du système moteur semble moins prépondérante. La perception de la simulation se fait par des cellules photoréceptrices de la rétine : cônes et bâtonnets. Elles transmettent un influx nerveux aux cellules bipolaires et ganglionnaires qui traitent en premier l’information visuelle. L’influx nerveux créé traverse 2 synapses et ce sont les axones des neurones ganglionnaires P et M qui se regroupent dans les nerfs optiques et qui transfèrent l’info au cerveau. Le message est ensuite transmis vers les aires visuelle du cerveau avec d’abord une synthèse de l’information puis une reconnaissance et un traitement de l’information : étape décisionnelle. Suivant le type de traitement (apparition, comparaison…), le temps de traitement est plus ou moins long. L’info décidée par le cerveau est ensuite transmise aux muscles. Ordre de grandeur en dixièmes de secondes : 0.2/0.3s environ au foot. ### Adaptation du modèle d’endurance en fonction des données réelles Les données employées afin de générer un historique plus réalistes sont celles trouvées la semaine passée et des données de la FIFA (2011, https://resources.fifa.com/image/upload/analyse-physique-allemagne-2011-1680701.pdf?cloudid=vzczbe0wnbpwpv6ziwla). Au lieu de prendre des vitesses aléatoires sur chaque épisode de courses, la vitesse appartient est dorénavant choisie dans les différentes catégories de course suivant les pourcentages suivants : * sprints (>19 km/h) : 8% * courses hautes intensité (16-19 km/h) : 14% * courses modérées (13-16 km/h) : 18% * jogging (5 - 13 km/h) : 30 % * marche (< 5 km/h) : 30% De même, grâce à l'article (https://www.researchgate.net/publication/10673250_Match_performance_of_high-standard_soccer_players_with_special_reference_to_development_of_fatigue) de Mohr & al., nous pouvons adapter la durée des moyennes des épisodes en fonction du type de course. La durée d'un épisode est aléatoire suivant une loi normale de moyenne fournie par Mohr & al. et d'écart-type que nous avons définis arbitrairement. La durée des temps de récupération est en moyenne de 35 secondes, nous avons adapté cette valeur dans le code en prenant un temps de récupération entre deux épisodes aléatoire suivant une loi normale centrée sur 35. ### Calcul de la trajectoire (optimale) entre un joueur (x,y,u,v) et le ballon Le but est de trouver la trajectoire que va emprunter un joueur pour se rendre au ballon en tenant compte de sa position et de sa vitesse initiale. Nous avons commencé à créer un code python pour modéliser cette trajectoire. Une fois que l’on saura comment calculer cette trajectoire, on transposera ce modèle sur D3. ## Travail à faire à la prochaine séance * Finir d’implémenter le code pour calculer la trajectoire entre le joueur et la balle sur python puis le rajouter sur D3 * Améliorer le modèle de la recharge de l'endurance * Intégrer l'accélération au modèle `32:T19ab,{// Tirage d'un nombre aléatoire entre deux bornes min et max function randomNumber(min, max){ return Math.random()*(max-min) + min} // Tirage d'une variable suivant une loi normale function randomGauss(moyenne, ecartType){ var num = -1; while (num <= 0){ let u = Math.random(), v = Math.random(); num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v ); //u et v les deux valeurs aléatoires initiales // Décallage de la gaussienne autour des valeurs qui nous intéressent num *= ecartType; num += moyenne-ecartType;} return num } // Calcule aléatoirement un historique de course function generate_histo() { let histo = [] // nombre de courses de l'historique var k = Math.trunc(Math.random()*100) let speed = 0 let t1 = 0 let t2 = 0 let duration = 0 let catCourse = 0 for (let i=0; i 30) { if (endurance + 0.2 *endurance >1 ){ endurance = 1 } else { endurance = endurance + 0.2 *endurance} } // On distingue nos 5 catégories de course if ( speed < 5.0) { facteur = 1 fact_temps = 1 } else if ( 5 < speed < 13){ facteur = 0.9 fact_temps = 1 } else if ( 13 < speed < 16){ facteur = 0.8 fact_temps = (1-(elem['t2']-elem['t1'])/60) } else if ( 16 < speed < 19){ facteur = 0.65 fact_temps = (1-(elem['t2']-elem['t1'])/60) } else if ( 19 < speed ){ facteur = 0.5 fact_temps = (1-(elem['t2']-elem['t1'])/60) } endurance = fact_temps * facteur * endurance t_prec = elem['t2'] }) return (endurance) }; // renvoie le vecteur de couleurs de la jauge de l'agent function color_jauge(colormax) { var colors = [], slice = 0, value =0, inPad = false; // 360 degrees d3.range(360).forEach(function(e, i) { // convert to radians if(i<=colormax){value =0.5} else{value =1} var start = i * (Math.PI / 180), end = (i + 1) * (Math.PI / 180); colors.push( d3.hsl(Math.floor(i/3), 1, value)); }); return(colors) }; // Création du vecteur agents: on rajoute les paramètres vmax et histo function agents_random(number){ const agents = Array.from({ length: number }, (d, i) => ({ position: [width * Math.random(), height * Math.random()], vmax: 25, color: d3.hsl(((i % 2) / 2) * 360, 0.6 + 0.2 * Math.random(), 0.6), acceleration: 1, histo: generate_histo(), // speed: [Math.random() * 10, Math.random() * 10], // speed: [3, 2], // color: d3.color("steelblue"), // distance:Math.random()*50, // the distance that the agent has already done // distanceMax:70 // the distance that the agent can make // in this model all have the same acceleration capacity ** power diagram })); // On modifie le vecteur agents en rajoutant vecteur speed à partir de la fonction speed_agent, ainsi que le vecteur de couleur de la jauge agents.forEach(function(agent) { agent['speed']= speed_agent(agent.vmax, endurance(agent.histo)); agent['colorjauge'] = color_jauge(endurance(agent.histo)*360) ; //console.log(endurance(agent.histo)) }); return agents }; // Vecteur agents en choisissant la vitesse max et l'endurance function agent(num, vmax, endurance){ const agent = { position: [width * Math.random(), height * Math.random()], vmax: vmax, color: d3.hsl(((num % 2) / 2) * 360, 0.6 + 0.2 * Math.random(), 0.6), acceleration: 1, speed: speed_agent(vmax, endurance), colorjauge: color_jauge(endurance*360) }; return agent}; const agents = [agent(1, 25, 1), agent(2, 25, 0)] console.log(agents) yield displayInteractive(agents, { showBoundaries: true, visibility, panel: true }); } // the accessible zone is the intersection of the dark and clear zone 33:T50f,{ function endurance(historic) { let endurance = 1 // console.log(endurance) let t_prec = 0 historic.forEach(function(elem) { var speed = elem['speed'] let facteur = 1 let fact_temps = 1 if ((elem['t1'] - t_prec) > 300) { if (endurance + 0.2 *endurance >1 ){ endurance = 1 } else { endurance = endurance + 0.2 *endurance} } if ( speed < 5.0) { facteur = 1 fact_temps = 1 } else if ( 5< speed < 13){ facteur = 0.9 fact_temps = 1 } else if ( 13< speed < 16){ facteur = 0.8 fact_temps = (1-(elem['t2']-elem['t1'])/60) } else if ( 16 < speed < 19){ facteur = 0.65 fact_temps = (1-(elem['t2']-elem['t1'])/60) } else if ( 19 < speed ){ facteur = 0.5 fact_temps = (1-(elem['t2']-elem['t1'])/60) } endurance = fact_temps * facteur * endurance // console.log(endurance) t_prec = elem['t2'] }) return (endurance) }; // console.log(endurance(historic, vmax)); function histo_agents(agents) { agents.forEach(function(agent) { //console.log('Agent', endurance(agent.historic)) } ) }; // histo_agents(agents) } 34:T73c,function displayField(agents) { const hexbin = d3 .hexbin() .radius(hexradius) .angle(angle) .size([width, height]), centers = hexbin.centers(), owned = []; let t = 0, a = 10000; do { t += hexradius / Math.sqrt(t + 1); for (const p of agents) { const pos = [ p.position[0] + t * p.speed[0], p.position[1] + t * p.speed[1] ]; for (let i = 0; i < centers.length; i++) { const c = centers[i], r = p.acceleration * radius(t); if (Math.hypot(c[0] - pos[0], c[1] - pos[1]) < r) { c.color = p.color; c.vector = [c[0] - pos[0], c[1] - pos[1]].map( d => d * (hexradius / r) ** 1.3 ); owned.push(c); centers.splice(i--, 1); } } } } while (radius(t) < width && centers.length && a-- > 0); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .selectAll(".hex") .data(owned) .join("path") .attr("d", d => `M${d[0]},${d[1]}${hexbin.hexagon()}`) .style("fill", d => d.color) .style("stroke", d => d.color); svg .selectAll(".vector") .data(owned) .join("path") .attr( "d", d => `M${d[0] - d.vector[0] / 2},${d[1] - d.vector[1] / 2} l${d.vector[0]},${d.vector[1]}` ) .style("stroke", "white"); svg .selectAll(".speed") .data(agents) .join("path") .attr( "d", d => `M${d.position[0]},${d.position[1]} l${d.speed[0] * hexradius * 10},${d.speed[1] * hexradius * 10}` ) .style("stroke", "white"); svg .selectAll(".agent") .data(agents) .join("circle") .attr("cx", d => d.position[0]) .attr("cy", d => d.position[1]) .attr("r", 4) .style("fill", "white"); return svg.node(); }35:T15ef,function* drawSituation( agents, options = { darker, showCones, voronoiClip, width, height, shape }, context ) { 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; do { const show_cone = showCones && t > t_cone + 3 && (t = t_cone + 3); t += 1 / Math.sqrt(t + 1); let i = 0; for (const p of agents) { // context.beginPath(); // context.arc(p.position[0], p.position[1], p.distanceMax-p.distance, 0, tau); // context.strokeStyle = "black"; // context.opacity = 0.5 // var col = p.color // context.fillStyle = d3.hsl(col['h'], col['s'], 0.85); // context.stroke(); // context.fill(); // context.closePath(); // context.restore(); //for each agent we draw a circle centered on his center and of diameter (distanceMax-distance)/2 //we draw the circle with the same color but less opacity that the agent so that we can see a difference with de cone. points[i++] = p.position[0] + t * p.speed[0]; console.log('speed', p.speed[0]); points[i++] = p.position[1] + t * p.speed[1]; } if (voronoiClip) voronoi.update(); i = 0; if (d) context.putImageData(d, 0, 0); for (const p of agents) { context.save(); if (voronoiClip) { context.beginPath(); voronoi.renderCell(i, context); context.clip(); } if (show_cone) { t_cone = t; context.globalCompositeOperation = "destination-over"; drawShape( //we do the same changes everytime the drawShape function is called points[2 * i], points[2 * i + 1], p.acceleration * radius(t), // p.distance + Math.pow(Math.pow(t * p.speed[0], 2) + Math.pow(t* p.speed[1], 2), 0.5), // we calculate the new distance, from the origine to the new position of the player // p.distanceMax, // the max distance doesn't change // i, shape, context ); context.lineWidth = 0.5; context.strokeStyle = "white"; context.stroke(); } context.globalAlpha = globalAlpha; context.globalCompositeOperation = "destination-over"; drawShape( points[2 * i], points[2 * i + 1], p.acceleration * radius(t), // p.distance + Math.pow(Math.pow(t * p.speed[0], 2) + Math.pow(t*p.speed[1], 2), 0.5), // p.distanceMax, // i, shape, context ); const u = d3.hsl(p.color); context.fillStyle = u.copy({ l: u.l / (1 + t * darker) }); // .copy({ l: …} ) ?? context.fill(); context.restore(); i++; } d = context.getImageData(0, 0, width, height); if (performance.now() - time > 50) { // same on the hidden canvas if (hidden) { i = 0; for (const p of agents) { hidden.save(); if (voronoiClip) { hidden.beginPath(); voronoi.renderCell(i, hidden); hidden.clip(); } hidden.globalCompositeOperation = "destination-over"; drawShape( points[2 * i], points[2 * i + 1], p.acceleration * radius(t), // p.distance + Math.pow(Math.pow(t * p.speed[0], 2) + Math.pow(t*p.speed[1], 2), 0.5), // p.distanceMax, // i, shape, hidden ); hidden.fillStyle = `rgb(${p.hidden.join(",")})`; // https://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element hidden.fill(); hidden.restore(); i++; } } // /hidden time = performance.now(); drawLayer(hidden, lookup); yield context.canvas; } } while ( me == instance && t < 2000 && d.data.some((d, i) => i % 4 === 3 && !d) ); } yield* draw(); const tmax = t; const boundaries = showBoundaries ? pathboundaries(agents, tmax).features : []; { for (const m of boundaries) { context.strokeStyle = "white"; context.beginPath(); if (m.geometry.coordinates.length === 1) m.geometry.type = "MultiPoint"; path(m); context.lineWidth = 1; context.stroke(); } } drawLayer(); yield context.canvas; function drawLayer(hidden, lookup) { // all we paint here is forgotten let i = 0; for (const p of agents) { drawPoint(context, p, 5); i++; } if (options.panel) { context.save(); context.translate(0, 0); drawPanel(context, agents, hidden, lookup); context.restore(); } } }36:T599,function drawPoint(context, p, size) { const end = [ p.position[0] + 20 * p.speed[0], p.position[1] + 20 * p.speed[1] ]; context.strokeStyle = "white"; 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 . for (var i = 0; i < 360; i++) { context.beginPath(); context.moveTo(p.position[0] +20, p.position[1]-20); context.lineTo(p.position[0] +20 + Math.cos(i*Math.PI/180)*10, p.position[1]-20 -Math.sin(i*Math.PI/180)*10); context.lineTo(p.position[0]+20 +Math.cos((i+1)*Math.PI/180)*10, p.position[1]-20 -Math.sin((i+1)*Math.PI/180)*10); context.fillStyle = p.colorjauge[i]; context.fill(); context.lineWidth = size > 5 ? 2 : 1; context.closePath(); context.restore(); } }37:T50b,function drawPanel(context, agents, hidden, lookup) { if (hidden) { // context.drawImage(hidden.canvas, 0, 0); const data = hidden.getImageData( 0, 0, hidden.canvas.width, hidden.canvas.height ).data; let unknown = 0; for (const 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 (const 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); } }38:T4c7,// function drawShape(x, y, r, distance, distanceMax, pos, shape, context) { function drawShape(x, y, r, shape, context) { //this function now takes into account the distance and the distanceMax of an agent // if (distance 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) }; }3a:T46e,{ const context = DOM.context2d(width, height, 1); const points = []; for (let r = 0; r < 100; r++) { const data = context.getImageData(0, 0, width, height); const A = {}; for (const c of agents) { plotCircleAA( Math.round(c.position[0]), Math.round(c.position[1]), r, (x, y, v = 255) => { const i = x + width * y; if (data.data[4 * i + 3] < 128) { const id = `${x}/${y}`; A[id] = (A[id] || 0) + v / 255; } } ); } for (const b in A) { if (A[b] > 1) { const p = b.split("/").map(Number); points.push(p); } } context.fillStyle = "white"; for (const c of agents) { context.beginPath(); context.arc(...c.position, r, 0, tau); context.fill(); } context.fillStyle = "red"; for (const c of agents) { context.beginPath(); context.arc(...c.position, 1, 0, tau); context.fill(); } context.fillStyle = "black"; for (const p of points) { context.fillRect(...p, 1, 1); } yield context.canvas; } }3b:T5e8,async function displayInteractive(agents, options = {}) { let instance = Math.random(), im; if (options.visibility) await options.visibility(); if (!options.shape) options.shape = shape; const w = (options.width = options.width || width), h = (options.height = options.height || height); const context = DOM.context2d(w, h), canvas = context.canvas, _drag = drag(agents) .on("start.render", () => { 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); const u = instance; for (const x of drawSituation(agents, options, context)) { if (u !== instance) break; if (options.visibility) await options.visibility(); await Promises.delay(16); } } }3c:T422,// adapted from https://observablehq.com/@d3/hello-d3-drag drag = agents => { // When starting a drag gesture, move the subject to the top and mark it as active. function dragstarted() { agents.splice(agents.indexOf(d3.event.subject), 1); agents.push(d3.event.subject); d3.event.subject.active = true; } // When dragging, update the subject’s position. function dragged() { const agent = d3.event.subject; if (agent.thing === "dot") { agent.position[0] = Math.max(0, Math.min(width, d3.event.x)); agent.position[1] = Math.max(0, Math.min(height, d3.event.y)); } if (agent.thing === "speed") { agent.speed[0] = (d3.event.x - agent.position[0]) / 20; agent.speed[1] = (d3.event.y - agent.position[1]) / 20; } } // When ending a drag gesture, mark the subject as inactive again. function dragended() { d3.event.subject.active = false; } return d3 .drag() .subject(dragsubject(agents)) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }3d:[{"id":"691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","href":"https://static.observableusercontent.com/files/691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","name":"d3-hexbin.js","type":"application/javascript","lastModified":1580973517844.641,"size":7438}] 2f:{"id":"0d344ebfea5213fa","slug":"endurance-simulation","title":"Endurance simulation","thumbnail":"c8e35f122a5e8f4c0193b1b43b6de82d30b95a5851840d3153970db89acb1fec","access_level":"public","create_time":"$D2020-02-06T07:18:37.844Z","update_time":"$D2020-02-06T16:30:51.004Z","view_time":null,"first_public_time":"$D2020-02-06T16:30:52.122Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"789d9ad1a281d576","login":"litchi","name":"Na Mi","avatar_url":"https://avatars-next.observableusercontent.com/35967f9a19cdc66a431ac25d6af97f03516045c9e6b9efe6c48d4aa00f756344","tier":"starter_2024"},"version":2281,"publish_version":2281,"role":null,"authored":false,"authors":[{"type":"individual","id":"74f3c3d41630dd08","login":"litchi","name":"Na Mi","avatar_url":"https://avatars-next.observableusercontent.com/35967f9a19cdc66a431ac25d6af97f03516045c9e6b9efe6c48d4aa00f756344","tier":null}],"members":[{"type":"individual","id":"74f3c3d41630dd08","login":"litchi","name":"Na Mi","avatar_url":"https://avatars-next.observableusercontent.com/35967f9a19cdc66a431ac25d6af97f03516045c9e6b9efe6c48d4aa00f756344","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Endurance simulation","cells":[{"id":0,"value":"md`# Endurance simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2224,"value":"$31","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":345,"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":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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":396,"value":"voronoiClip = options && options.indexOf(\"Clip Voronoi\") > -1","pinned":true,"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":true,"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":219,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2077,"value":"md` Fonction qui calcule l'endurance à partir d'un historique donné ! `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2073,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":301,"value":"md`Un agent avance à fond vers un statique.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":325,"value":"md`Un agent avance vers un mur.`","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":1097,"value":"agentsDir = Array.from({ length: 15 }, (d, i) => ({\n position: [width * Math.random(), height * Math.random()],\n speed: [Math.random() - Math.random(), Math.random() - Math.random()],\n color: d3.hsl(Math.random() * 360, 0.6 + 0.2 * Math.random(), 0.6),\n acceleration: 1 // in this model all have the same acceleration capacity ** power diagram\n}))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1090,"value":"hexradius = 10","pinned":true,"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":994,"value":"$34","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":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1869,"value":"$36","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1653,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1579,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1356,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1121,"value":"import {plotCircle, plotCircleAA} from \"81fd2058ee21afc3\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1125,"value":"$3a","pinned":true,"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":"$3b","pinned":true,"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) {\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 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 distance = d;\n subject = c;\n subject.thing = \"dot\";\n }\n // grab the speed?\n d = Math.hypot(\n event.x - (c.position[0] + 20 * c.speed[0]),\n event.y - (c.position[1] + 20 * c.speed[1])\n );\n if (d < 5) {\n distance = d;\n subject = c;\n subject.thing = \"speed\";\n }\n }\n return subject;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"$3c","pinned":true,"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"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 30:"$2f:body"