2b:null 2c:["$","title",null,{"children":"Endurance simulation | paulinelem | Observable"}] 31: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 32: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) 33: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(); }34: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 )} }35: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(); } }36: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); } }37: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) }; }39: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; } }3a: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); } } }3b: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); }3c:[{"id":"691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","href":"https://static.observableusercontent.com/files/691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","name":"d3-hexbin.js","type":"application/javascript","lastModified":1580913308383.515,"size":7438}] 2f:{"id":"6d8b49c793971421","slug":"endurance-simulation","title":"Endurance simulation","thumbnail":"fef2c6a605720a6cb66d7328515a3822cb3d7a48773087b3216ae4a443218258","access_level":"public","create_time":"$D2020-02-05T14:35:08.383Z","update_time":"$D2020-02-07T12:47:26.810Z","view_time":null,"first_public_time":"$D2020-02-06T10:14:41.475Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"2fe05e7dad5299f4","login":"paulinelem","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9b47c2864b3507854ea53e6c9961ef8622a66e9752959e2f02894aeb49a36eb1","tier":"starter_2024"},"version":2376,"publish_version":2376,"role":null,"authored":false,"authors":[{"type":"individual","id":"12748f029868b0f7","login":"paulinelem","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9b47c2864b3507854ea53e6c9961ef8622a66e9752959e2f02894aeb49a36eb1","tier":null}],"members":[{"type":"individual","id":"12748f029868b0f7","login":"paulinelem","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9b47c2864b3507854ea53e6c9961ef8622a66e9752959e2f02894aeb49a36eb1","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":"md`# Séance 5 - 06/02 :\n\n\n\ntravail de modelisation de sequences successives avec prise en compte de l'historique \n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"viewof s = slider({\n min: 0,\n value: 5,\n max: 10,\n step: 0.00001,\n description: \"acceleration/speed ratio\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"viewof darker = slider({\n min: 0,\n value: 0.02,\n max: 0.1,\n description: \"darker with time?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":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":"$31","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 // 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"},{"id":2301,"value":"// renvoie le vecteur de couleurs de la jauge de l'agent\n function color_jauge(colormax) {\n console.log(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 console.log(colors)\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":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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":"$33","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":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1869,"value":"$35","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":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1579,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1356,"value":"$38","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":"$39","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":"$3a","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":"$3b","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":"$W3c","stdlib":"1","titling":"auto"}} 30:"$2f:body"