2c:null 2d:["$","title",null,{"children":"Endurance simulation | Guillaume LE GALL | Observable"}] 32:T435,md`# Séance 5 - 06/02 : suite du paramètre endurance ## Objectifs de la séance ### Récap de la séance précédente * https://observablehq.com/d/d3f98dcbdb576eb0 * Modélisation des trajectoires d’un joueur sur le terrain quand une balle est mise à un endroit aléatoire du terrain sur python. * Implémentation des jauges d’endurance au-dessus d’agents présents sur le terrain, avec décrémentation ou incrémentation possibles * Nous avons fait l’état de l’art sur le paramètre temps de réaction, pour voir comment celui-ci serait affecté par l’altération de l’endurance. ### Objectifs de la séance * Simuler plusieurs phases successivement (récupérer les informations à l'arrêt et relancer aléatoirement) * Amélioration du modèle de la recharge de l’endurance * Finir d’implémenter le code pour calculer la trajectoire entre le joueur et la balle sur python puis le rajouter sur D3 * Réunion bilan pour la présentation de la semaine prochaine avec M.Vuillemot * Préparer les slides de la présentation de la semaine prochaine `33:T833,md`## Travail sur la séance ### Ajout de fonctions pour générer des agents Jusqu’à présent, les agents étaient générés aléatoirement : chaque agent est doté : * d’une vitesse maximale (identique pour chaque agent) * d’un historique de courses au cours du match généré aléatoirement (basé sur les statistiques de la FIFA 2011 : https://resources.fifa.com/image/upload/analyse-physique-allemagne-2011-1680701.pdf?cloudid=vzczbe0wnbpwpv6ziwla) * l’endurance de chaque joueur est calculé grâce à une fonction qui prend en compte cet historique de course et les temps de récupération entre chacune d’entre elle Nous ajoutons à présent une fonction permettant de générer des agents ayant des caractéristiques spécifiques : une vitesse maximale imposée et une endurance prédéfinie afin de pouvoir observer des comportements différents. ### Calcul de la trajectoire entre deux points via un modèle simple sur python Nous avons créé un premier modèle (qui agit sur la vitesse) afin de trouver une trajectoire entre un joueur avec une position initiale et un autre point (ballon). Le modèle permet de converger dans tous les cas vers le point avec des trajectoires plutôt cohérentes. Nous allons essayer d’un peu complexifier le modèle afin d’améliorer la cohérence des trajectoires avec la réalité. On essaiera ensuite d’ajouter l’endurance à ce modèle pour jouer sur la vitesse maximale atteignable par l’agent au cours du temps. ### Simulation de plusieurs séquences de manière consécutive Appel récursif(10 fois) de la fonction drawSituation afin de simuler 10 changements de direction et de borner la vitesse_max en fonction de l’historique et des séquences précédentes. Il reste des problèmes de visualisation de la jauge mais la simulation fonctionne et les historiques se complètent bien. Les prochaines étapes sont d’améliorer la visibilité de la jauge a chaque étape et d’intégrer cette partie au travail de Nadège sur l’élaboration d’une meilleure modélisation de l’endurance et de sa recharge. `34:T12a8,{ // 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){ let u = Math.random(), v = Math.random(); 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 // 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()*9) +1 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) // }; // Création du vecteur agents: on rajoute les paramètres vmax et histo var agents = Array.from({ length: 5 }, (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)) }) yield displayInteractive(agents, { showBoundaries: true, visibility, panel: true }); } // the accessible zone is the intersection of the dark and clear zone 35:T4cd, function endurance(historic) { console.log('histo', 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'] }) console.log(endurance) return (endurance) }; // console.log(endurance(historic, vmax)); // histo_agents(agents) 36:T73a,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 (var 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(); }37:T12c6,function* drawSituation( agents, options = { darker, showCones, voronoiClip, width, height, shape }, context, n =10 ) { console.log(agents) if (n <= 1) { console.log("J'ai fini") } else { var new_agents=[] 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() { console.log(n) const me = instance; var t_fin = 0 var pos_fin = [] do { const show_cone = showCones && t > t_cone + 3 && (t = t_cone + 3); t += 1 / Math.sqrt(t + 1); t_fin = t let i = 0; for (var p of agents) { points[i++] = p.position[0] + t * 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 (var p of agents) { context.save(); context.globalAlpha = globalAlpha; context.globalCompositeOperation = "destination-over"; drawShape( points[2 * i], points[2 * i + 1], p.acceleration * radius(t), 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 (var 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), 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 < 20 && d.data.some((d, i) => i % 4 === 3 && !d) ) ; new_agents = [] for (var p of agents) { var speed = Math.sqrt(Math.pow(p.speed[0],2)+Math.pow(p.speed[0],2)); var taille = p.histo.length var t1 = p.histo[taille-1].t2+10 ; var t2 = t1+t_fin*0.1; let new_histo = p.histo; new_histo.push({'speed':speed, 't1':t1, 't2':t2}); console.log(endurance(p.histo)) console.log(new_histo) console.log(endurance(new_histo)) var new_ag = { 'position':[p.position[0] + t_fin * p.speed[0], p.position[1] + t_fin * p.speed[1]], 'vmax': p.vmax, 'color': p.color, 'acceleration':p.acceleration, 'histo': new_histo, 'speed': speed_agent(p.vmax, endurance(new_histo)), 'colorjauge':color_jauge(endurance(new_histo)*360), 'hidden':p.hidden, 'pixels':p.pixels } new_agents.push(new_ag); } console.log(new_agents) } yield* draw() yield context.canvas; function drawLayer(hidden, lookup) { // all we paint here is forgotten let i = 0; for (var p of agents) { drawPoint(context, p, 5); i++; } if (options.panel) { context.save(); context.translate(0, 0); drawPanel(context, agents, hidden, lookup); context.restore(); } } console.log("Je suis la ") yield* drawSituation( new_agents, options = { darker, showCones, voronoiClip, width, height, shape }, context, n-1 )} }38:T5c3,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 . console.log("Je passe par la") 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(); } }39:T507,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 (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); } }3a: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) }; }3c: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; } }3d: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); } } }3e: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); }3f:[{"id":"691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","href":"https://static.observableusercontent.com/files/691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","name":"d3-hexbin.js","type":"application/javascript","lastModified":1581596382317.303,"size":7438}] 30:{"id":"8adbb907a68c15d9","slug":"endurance-simulation","title":"Endurance simulation","thumbnail":"7c16254daefb4758b2d987126a7416f5a5f2f44345fbdcd63bbde95d616d711b","access_level":"public","create_time":"$D2020-02-13T12:19:42.317Z","update_time":"$D2020-02-13T12:19:42.317Z","view_time":null,"first_public_time":"$D2020-02-13T12:20:00.681Z","has_unpublished_edits":null,"fork":{"id":"9edb90006ee91b3f","slug":"endurance-simulation","title":"Endurance simulation","owner":{"id":"0d799e8e79d939fa","login":"jean-thomas-beaudoin","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"4c40bf6ae8ba4cbd","login":"glegall7","name":"Guillaume LE GALL","avatar_url":"https://avatars-next.observableusercontent.com/d72ecbad2b937c6d422c611c067bf10b349675126365084cae078c8b69b6c8cf","tier":"starter_2024"},"version":2382,"publish_version":2382,"role":null,"authored":false,"authors":[{"type":"individual","id":"2081b1be2e701de2","login":"glegall7","name":"Guillaume LE GALL","avatar_url":"https://avatars-next.observableusercontent.com/d72ecbad2b937c6d422c611c067bf10b349675126365084cae078c8b69b6c8cf","tier":null}],"members":[{"type":"individual","id":"2081b1be2e701de2","login":"glegall7","name":"Guillaume LE GALL","avatar_url":"https://avatars-next.observableusercontent.com/d72ecbad2b937c6d422c611c067bf10b349675126365084cae078c8b69b6c8cf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Endurance simulation","cells":[{"id":0,"value":"md`# Endurance simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2224,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2376,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2379,"value":"md`## Bilan de la séance et planification de la séance suivante\n\n### Bilan de la séance\n\n### A faire la prochaine fois\n* Soutenance à 13h50\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"viewof options = checkbox([\"Show cones\", \"Clip Voronoi\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"showCones = options && options.indexOf(\"Show cones\") > -1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"voronoiClip = options && options.indexOf(\"Clip Voronoi\") > -1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"mutable debug = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2298,"value":"// Renvoie le vecteur vitesse de l'agent qui sera utilisé pour la fonction principale displayInteractive. \nfunction speed_agent(vmax, endu){ \n var speed = Math.random()*endu*vmax ;// = x2+y2\n var speed_x = Math.random()*speed*speed;\n var speed_y = speed * speed - speed_x;\n // console.log(Math.sqrt(speed_x), Math.sqrt(speed_y))\n return [Math.sqrt(speed_x)/2, Math.sqrt(speed_y)/2]\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2073,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2290,"value":"function histo_agents(agents) {\n agents.forEach(function(agent) {\n // console.log('Agent', endurance(agent.historic))\n } )\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"md`Un agent avance à fond vers un statique.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"md`Un agent avance vers un mur.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"md`## Vector field`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"hexradius = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"viewof angle = slider({ min: -90, max: 90, description: \"Angle\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"md`## Draw`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1869,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1579,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1356,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1121,"value":"import {plotCircle, plotCircleAA} from \"81fd2058ee21afc3\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"md`## Drag`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"md`## Annex`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"tau = 2 * Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"import {checkbox, slider, select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 31:"$30:body"