25:null 26:["$","title",null,{"children":"Endurance simulation | Guillaume LE GALL | Observable"}] 2b:T435,md`# Séance 8 - 27/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 `2c: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. `2d:Tb5e,{ // 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 ({ 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() })); // 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) ; }) yield displayInteractive(agents, { showBoundaries: true, visibility, panel: true }); } // the accessible zone is the intersection of the dark and clear zone 2e:T427, function endurance(historic) { 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) > 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 t_prec = elem['t2'] }) return (endurance) }; // histo_agents(agents) 2f:T7ad,function trajectory1 (pos,vit,point, vmax=12){ 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) (a.hidden = hiddenCanvasColor.next().value)); } function* draw() { 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; let new_histo = p.histo; new_histo.push({'speed':speed, 't1':t1, 't2':t2}); 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); } } 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(); } } yield* drawSituation( new_agents, options = { darker, showCones, voronoiClip, width, height, shape }, context, n-1 )} }31:T5ab,function drawPoint(context, p, size) { const end = [ p.position[0] + 20 * p.speed[0], p.position[1] + 20 * p.speed[1] ]; context.strokeStyle = "black"; context.beginPath(); context.moveTo(...p.position); context.lineTo(...end); context.lineWidth = size > 5 ? 3 : 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 . let r = 15; 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)*r, p.position[1]-20 -Math.sin(i*Math.PI/180)*r); context.lineTo(p.position[0]+20 +Math.cos((i+1)*Math.PI/180)*r, p.position[1]-20 -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(); } }32: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); } }33:T493,// 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 { 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" ); console.log("I am here") }); 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); } } }35:T487,// adapted from https://observablehq.com/@d3/hello-d3-drag function drag (agents, context){ // 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() { const agent = d3.event.subject; console.log("Idragged") d3.event.subject.active = false; } return d3 .drag() .subject(dragsubject(agents, context)) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }36:[{"id":"691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","href":"https://static.observableusercontent.com/files/691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","name":"d3-hexbin.js","type":"application/javascript","lastModified":1582191252590.91,"size":7438}] 29:{"id":"11befb33180a77eb","slug":"endurance-simulation/4","title":"Endurance simulation","thumbnail":"f0bb6290924a374637405373ddb2030047d67f0b070c3673aa7334343bec1357","access_level":"public","create_time":"$D2020-02-20T09:34:12.590Z","update_time":"$D2020-02-27T08:13:39.215Z","view_time":null,"first_public_time":"$D2020-02-20T15:05:00.451Z","fork":{"id":"299b4c0e0a2ae1f0","slug":"endurance-simulation/3","title":"Endurance simulation","owner":{"id":"2fe05e7dad5299f4","login":"paulinelem","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":2550,"publish_version":2550,"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,"subscribed":null,"forks":1,"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":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2376,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 var signe_x = Math.random()\n var signe_y = Math.random()\n if (signe_x>0.5){\n signe_x = -1}\n else {\n signe_x=1}\n if (signe_y>0.5){\n signe_y = -1}\n else {\n signe_y = 1}\n return [signe_x*Math.sqrt(speed_x)/2, signe_y*Math.sqrt(speed_y)/2]\n};","pinned":true,"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":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":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2290,"value":"function histo_agents(agents) {\n agents.forEach(function(agent) {\n } )\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2514,"value":"$2f","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":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":834,"value":"md`## Draw`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1869,"value":"$31","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1653,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1579,"value":"$33","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":"$34","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, context) {\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 distance = d;\n subject = c;\n subject.thing = \"dot\";\n ballon = false\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 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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2432,"value":"function place_ball(x, y, context, agents) {\n// const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 500, 500]);\n \n // console.log(x,y);\n if (context) {\n// d3.select(context).append(\"circle\")\n// .attr(\"cx\", 30)\n// .attr(\"cy\", 30)\n// .attr(\"r\", 20);\n \n context.beginPath();\n context.arc(x, y, 10, 0, 2 * Math.PI, false);\n context.fillStyle = 'green';\n context.fill();\n context.lineWidth = 2;\n context.strokeStyle = '#003300';\n context.stroke();\n context.closePath();\n \n \n \n }\n\n \n\n}","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":"$W36","stdlib":"1","titling":"auto"}} 2a:"$29:body"