26:null 27:["$","title",null,{"children":"Simulation with 3 agents : choice of maximum speed and endurance profile for each | paulinelem | Observable"}] 2c:Te1f,{ // Tirage d'un nombre aléatoire entre deux bornes min et max function randomNumber(min, max){ return Math.random()*(max-min) + min} // Calcule aléatoirement un historique de course function generate_histo() { let histo = [] // nombre de courses de l'historique var k = Math.trunc(Math.random()*10) +1 console.log(k) let speed = 0 let t1 = 0 let t2 = 0 let duration = -1 let catCourse = 0 // Joueur endurant, cat_endurance = 2 for (let i=0; i0.5){ signe_x = -1} else { signe_x=1} if (signe_y>0.5){ signe_y = -1} else { signe_y = 1} var pos_x = position[0] + 20 * signe_x*Math.sqrt(speed_x); var pos_y = position[1] + 20 * signe_y*Math.sqrt(speed_y); var count = 0; while ((pos_x < 10 || pos_x > width - 10 || pos_y < 10 || pos_y > height -10) && (count < 100)){ count ++; var new_speed = Math.random()*endu*vmax ;// = x2+y2 //console.log('on recalcule les positions'); var speed_x = Math.random()*new_speed*new_speed; var speed_y = new_speed * new_speed - speed_x; //console.log('vit', new_speed, speed_x, speed_y) var signe_x = Math.random() var signe_y = Math.random() if (signe_x>0.5){ signe_x = -1} else { signe_x=1} if (signe_y>0.5){ signe_y = -1} else { signe_y = 1} var speed_x = signe_x*Math.sqrt(speed_x); var speed_y = signe_y*Math.sqrt(speed_y); var pos_x = position[0] + 20 * speed_x; var pos_y = position[1] + 20 * speed_y; } return [speed_x/2, speed_y/2] };2e:T184d,function drawGraph () { var margin = {top: 50, right: 50, bottom: 50, left: 50} , width = 900 // Use the window's width , height = 500; // Use the window's height // The number of datapoints // 5. X scale will use the index of our data var xScale = d3.scaleLinear() .domain([0, 500]) // input .range([0, width]); // output // 6. Y scale will use the randomly generate number var yScale = d3.scaleLinear() .domain([0, 1]) // input .range([height, 0]); // output var courseScale = d3.scaleLinear() .domain([0, 30]) // input .range([height, 0]); // output var colorScale = d3.scaleOrdinal().domain(["1","2","0"]).range(["gold", "orange", "red"]); // 7. d3's line generator var line = d3.line() .x(function(d, i) { return xScale(i); }) // set the x values for the line generator .y(function(d) { return yScale(d.y); }) // set the y values for the line generator .curve(d3.curveMonotoneX) // apply smoothing to the line // 8. An array of objects of length N. Each object has key -> value pair, the key being "y" and the value is a random number // var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } }) // 1. Add the SVG to the page and employ #2 d3.select("#graphs").selectAll("svg").remove(); var svg = d3.select("#graphs").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // 3. Call the x axis in a group tag svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom // 4. Call the y axis in a group tag svg.append("g") .attr("class", "y axis") .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft // for (let k=1; k<4; k++) { // var obj = JSON.parse(document.getElementById("test_"+k.toString()).innerHTML); // console.log(obj) // } svg.append("g") .attr("class", "course axis") .attr("transform", "translate(" + width + ",0 )") .call(d3.axisRight(courseScale)); // Create an axis component with d3.axisLeft function get_data() { var data = [] var data_course = [] for (let k=1; k<4; k++) { let data_line = [] let data_line_course = [] var obj = JSON.parse(document.getElementById("test_"+k.toString()).innerHTML); console.log(k, obj) var histo = obj.histo for (var j=0; j0) { var endu_prec = endurance(histo.slice(0, j-1),obj.cat_endurance) data_line.push({'y': parseFloat(endu_prec), 'color':colorScale(obj.cat_endurance), 'time':histo[j].t1}, {'y': parseFloat(endu), 'color':colorScale(obj.cat_endurance), 'time':histo[j].t2}) ; data_line_course.push({'y':0, 'x':histo[j].t1, 'color':colorScale(obj.cat_endurance)}, {'y':histo[j].speed, 'x':histo[j].t1, 'color':colorScale(obj.cat_endurance)},{'y':histo[j].speed, 'x':histo[j].t2, 'color':colorScale(obj.cat_endurance)},{'y':0, 'x':histo[j].t2, 'color':colorScale(obj.cat_endurance)}) } else{ data_line.push({'y': 1.0, 'color':colorScale(obj.cat_endurance), 'time':0.0}, {'y': parseFloat(endu), 'color':colorScale(obj.cat_endurance), 'time':histo[j].t2}) data_line_course.push({'y':0, 'x':0, 'color':colorScale(obj.cat_endurance)}, {'y':0, 'x':histo[j].t1, 'color':colorScale(obj.cat_endurance)}, {'y':histo[j].speed, 'x':histo[j].t1, 'color':colorScale(obj.cat_endurance)},{'y':histo[j].speed, 'x':histo[j].t2, 'color':colorScale(obj.cat_endurance)},{'y':0, 'x':histo[j].t2, 'color':colorScale(obj.cat_endurance)}) } } data.push(data_line) data_course.push(data_line_course) } return {'data' :data,'data_course': data_course} } function draw_line(dataset){ // 12. Appends a circle for each datapoint svg.selectAll("dotPoint") .data(dataset) .enter().append("circle") // Uses the enter().append() method .attr("class", "dot") // Assign a class for styling .attr("cx", function(d, i) { return xScale(d.time) }) .attr("cy", function(d) { return yScale(d.y) }) .attr("r", 3) .attr("fill", function(d) { return d.color }) // .on("mouseover", function(a, b, c) { // console.log(a) // this.attr('class', 'focus') // }) // .on("mouseout", function() { }) svg.append("path") .datum(dataset) // 10. Binds data to the line .attr("class", "line") // Assign a class for styling .style("stroke",function(d,i) {console.log(d); return(d[i].color) }) // .attr("fill", function(d) { return d.color }) .attr("d", d3.line() .x(function(d, i) { return xScale(d.time); }) // set the x values for the line generator .y(function(d) { return yScale(d.y); })) // set the y values for the line generator ; // 11. Calls the line generator } function draw_line_course(dataset){ // 12. Appends a circle for each datapoint svg.selectAll("dotPoint") .data(dataset) .enter().append("circle") // Uses the enter().append() method .attr("class", "dot") // Assign a class for styling .attr("cx", function(d, i) { return xScale(d.x) }) .attr("cy", function(d) { return courseScale(d.y) }) .attr("r", 1) .attr("fill", function(d) { return d.color }) svg.append("path") .datum(dataset) // 10. Binds data to the line .attr("class", "line_course") // Assign a class for styling .style("stroke",function(d,i) {console.log(d); return(d[i].color) }) // .attr("fill", function(d) { return d.color }) .attr("d", d3.line() .x(function(d, i) { return xScale(d.x); }) // set the x values for the line generator .y(function(d) { return courseScale(d.y); })) // set the y values for the line generator ; // 11. Calls the line generator } var get_data = get_data() get_data.data.forEach(function(e) { draw_line(e) }) get_data.data_course.forEach(function(e) { draw_line_course(e) }) } // 9. Append the path, bind the data, and call the line generator 2f:T96a,// Renvoie le vecteur vitesse de l'agent qui sera utilisé pour la fonction principale displayInteractive. // function speed_agent(vmax, endu){ // var speed = Math.random()*endu*vmax ;// = x2+y2 // var speed_x = Math.random()*speed*speed; // var speed_y = speed * speed - speed_x; // var signe_x = Math.random() // var signe_y = Math.random() // if (signe_x>0.5){ // signe_x = -1} // else { // signe_x=1} // if (signe_y>0.5){ // signe_y = -1} // else { // signe_y = 1} // return [signe_x*Math.sqrt(speed_x)/2, signe_y*Math.sqrt(speed_y)/2] // }; // Renvoie le vecteur vitesse de l'agent qui sera utilisé pour la fonction principale displayInteractive. function speed_agent(position, cat_endurance, vmax, endu, histo){ // function speed_agent(position, speed, cat_endurance, vmax, endu, t_max){ //console.log('comp_pos',position, speed) var speed = Math.random()*endu*vmax ;// = x2+y2 var speed_x = Math.random()*speed*speed; var speed_y = speed * speed - speed_x; var signe_x = Math.random() var signe_y = Math.random() if (signe_x>0.5){ signe_x = -1} else { signe_x=1} if (signe_y>0.5){ signe_y = -1} else { signe_y = 1} speed_x = signe_x*Math.sqrt(speed_x)/2 speed_y =signe_y*Math.sqrt(speed_y)/2 var taille = histo.length; var t1 = histo[taille-1].t2 +randomGauss(35,1); // var t2 = t1+randomGauss(5,1); var t2 = t1+20; var t_max = t2-t1 var pos_x = position[0] + t_max * speed_x; var pos_y = position[1] + t_max * speed_y; // var speed_x = speed[0]; // var speed_y = speed[1]; var count = 0 while ((pos_x < 10 || pos_x > width - 10 || pos_y < 10 || pos_y > height -10) && (count < 100)){ count ++; var new_speed = Math.random()*endu*vmax ;// = x2+y2 var speed_x = Math.random()*new_speed*new_speed; var speed_y = new_speed * new_speed - speed_x; //console.log('vit', new_speed, speed_x, speed_y) var signe_x = Math.random() var signe_y = Math.random() if (signe_x>0.5){ signe_x = -1} else { signe_x=1} if (signe_y>0.5){ signe_y = -1} else { signe_y = 1} var speed_x = signe_x*Math.sqrt(speed_x)/2; var speed_y = signe_y*Math.sqrt(speed_y)/2; var pos_x = position[0] + t_max * speed_x; var pos_y = position[1] + t_max * speed_y; ;} //console.log('out_speed_agent', speed_x, speed_y) return {'speed':[speed_x, speed_y],'t1':t1, 't2':t2} }; 30:T6dc, function endurance(historic, cat_endurance) { // définition des listes de paramètres d'incrémentation/décrémentation de l'endurance en fonction des caractéristiques du joueur // [marche, jogging, intensité modérée, haute intensité, sprint, division facteur temps, % recharge, temps récup nécéssaire à la recharge] var non_endurant = [1, 0.8, 0.7, 0.5, 0.3, 40, 0.1, 30]; var moy_endurant = [1, 0.9, 0.8, 0.7, 0.6, 50, 0.2, 25]; var tres_endurant = [1, 1, 0.95, 0.9, 0.8, 80, 0.3, 20]; var endurance_tot = [non_endurant, moy_endurant, tres_endurant]; let endurance = 1 let t_prec = 0 historic.forEach(function(elem) { var speed = elem['speed'] let facteur = 1 let fact_temps = 1 if ((elem['t1'] - t_prec) > endurance_tot[cat_endurance][7]) { if (endurance + endurance_tot[cat_endurance][6]*endurance >1 ){ endurance = 1 } else { endurance = endurance + endurance_tot[cat_endurance][6] *endurance} } if ( speed < 5.0) { facteur = endurance_tot[cat_endurance][0] } else if ( 5< speed < 13){ facteur = endurance_tot[cat_endurance][1] } else if ( 13< speed < 16){ facteur = endurance_tot[cat_endurance][2] } else if ( 16 < speed < 19){ facteur = endurance_tot[cat_endurance][3] } else if ( 19 < speed ){ facteur = endurance_tot[cat_endurance][4] } fact_temps = (1-(elem['t2']-elem['t1'])/endurance_tot[cat_endurance][5]) endurance = fact_temps * facteur * endurance // console.log(endurance) t_prec = elem['t2'] }) return (endurance) }; // console.log(endurance(historic, vmax)); 31:T80f,// 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(); // }32:T1be9,function* drawSituation( agents, options = { darker, showCones, voronoiClip, width, height, shape }, context, n = 10, tmax =20, ) { if (n <= 1) { drawGraph () } else { if (n === 10){ function drawParams(agents){ for (var p of agents){ function enduranceProfile(p) { if (p.cat_endurance == 0){return 'Low'} else if (p.cat_endurance == 1){return 'Middle'} else {return 'Important'} } // speedGauge(p.vmax); context.font = 'normal 12pt Calibri'; context.fillStyle = 'black'; context.fillText('Max speed :' + p.vmax, p.position[0]+10 , p.position[1] + 10); context.font = 'normal 12pt Calibri'; context.fillStyle = 'black'; context.fillText('Endurance Profile :' + enduranceProfile(p), p.position[0]+10 , p.position[1] + 30); } }; drawParams(agents); // speedGauge(); } var new_agents=[] var new_t_max=0 const path = d3.geoPath().context(context); let { darker, showCones, showBoundaries, voronoiClip, width, height, shape, panel } = options; darker = darker || 0; const delaunay = d3.Delaunay.from(agents), points = delaunay.points, voronoi = delaunay.voronoi([0, 0, width, height]); let t = 0, d, time = performance.now(), t_cone = 0, instance = Math.random(); // hidden canvas to note who is winning const hidden = options.panel ? DOM.context2d(width, height, 0.25) : null; const lookup = new Map(); if (hidden) { const hiddenCanvasColor = rgbColorGenerator(); agents.forEach(a => (a.hidden = hiddenCanvasColor.next().value)); } function* draw() { const me = instance; var t_fin = 0 var pos_fin = [] var tmax = 20*Math.random() 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 = [] new_t_max = 20; var j = 1; for (var p of agents) { // var speed = Math.sqrt(Math.pow(p.speed[0],2)+Math.pow(p.speed[1],2)); // var taille = p.histo.length // var t1 = p.histo[taille-1].t2+Math.random()*35 ; // var t2 = t1+t_fin; var cat_endurance = p.cat_endurance; // let new_histo = p.histo; // new_histo.push({'speed':speed, 't1':t1, 't2':t2}); var taille = p.histo.length; console.log('t', t, 't_fin',t_fin, "t2", p.histo[taille-1].t2 - p.histo[taille-1].t1) var new_val = speed_agent([p.position[0] + t_fin * p.speed[0], p.position[1] + t_fin * p.speed[1]], cat_endurance, p.vmax, endurance(p.histo, cat_endurance), p.histo) var new_speed = new_val.speed; var norm_speed = Math.sqrt(Math.pow(new_speed[0],2)+Math.pow(new_speed[1],2)); let new_histo = p.histo; new_histo.push({'speed':norm_speed, 't1':new_val.t1, 't2':new_val.t2}); 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': new_speed, 'cat_endurance': cat_endurance, 'colorjauge':color_jauge(endurance(new_histo, cat_endurance)*360), 'hidden':p.hidden, 'pixels':p.pixels } document.getElementById("test_"+j.toString()).innerHTML = JSON.stringify(new_ag); // document.getElementById("time_"+j.toString()).innerHTML = document.getElementById("time_"+j.toString()).innerHTML + ", " + t2.toString(); // document.getElementById("endu_"+j.toString()).innerHTML = document.getElementById("endu_"+j.toString()).innerHTML + ", " + endurance(new_histo, cat_endurance).toString(); new_agents.push(new_ag); j+=1; } } yield* draw() yield context.canvas; function drawLayer(hidden, lookup) { // all we paint here is forgotten for (var p of agents) { drawPoint(context, p, 5); } // for (var p of agents){ // function enduranceProfile(p) { // if (p.cat_endurance == 0){return 'Low'} // else if (p.cat_endurance == 1){return 'Middle'} // else {return 'Important'} // } // context.font = 'normal 12pt Calibri'; // context.fillStyle = 'black'; // context.fillText('Max speed :' + p.vmax, p.position[0]+10 , p.position[1] + 10); // context.font = 'normal 12pt Calibri'; // context.fillStyle = 'black'; // context.fillText('Endurance Profile :' + enduranceProfile(p), p.position[0]+10 , p.position[1] + 30); // } 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, new_t_max )} }33:T5ad,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 ? 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 . 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(); } }34: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); } }35:T4cb,// 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) }; }37: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; } }38:T650,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 (let j=1; j<4; j++) { document.getElementById("test_"+j.toString()).innerHTML = "" } for (const x of drawSituation(agents, options, context)) { if (u !== instance) break; if (options.visibility) await options.visibility(); await Promises.delay(16); } } }39: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); }3a:[{"id":"691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","href":"https://static.observableusercontent.com/files/691e70cd7e213fc69d93026d2708b6fc38a1381a617c656548519c5886a93e28d3dea400116baabce63a44dbab27c3c297408d2fad24b98409e3bd9ad9c7dc0c","name":"d3-hexbin.js","type":"application/javascript","lastModified":1584003450832.139,"size":7438}] 2a:{"id":"54f036bc53393ed7","slug":"simulation-with-3-agents-choice-of-maximum-speed-and-endura/2","title":"Simulation with 3 agents : choice of maximum speed and endurance profile for each","thumbnail":"4506a412e2b33bbc88b29c6a04e324cc1de2aa9867143f16e56e427386d6bd59","access_level":"public","create_time":"$D2020-03-12T08:57:30.832Z","update_time":"$D2020-03-19T13:37:54.290Z","view_time":null,"first_public_time":"$D2020-03-12T08:58:02.483Z","fork":{"id":"6896dd92d98d5a16","slug":"simulation-with-3-agents-choice-of-maximum-speed-and-endura","title":"Simulation with 3 agents : choice of maximum speed and endurance profile for each","owner":{"id":"2fe05e7dad5299f4","login":"paulinelem","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"2fe05e7dad5299f4","login":"paulinelem","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9b47c2864b3507854ea53e6c9961ef8622a66e9752959e2f02894aeb49a36eb1","tier":"starter_2024"},"version":2945,"publish_version":2945,"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":4,"collection":null,"type":"notebook","body":{"title":"Simulation with 3 agents : choice of maximum speed and endurance profile for each","cells":[{"id":2376,"value":"md`# Simulation with 3 agents : choice of maximum speed and endurance profile for each\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2556,"value":"md`## Choose parameters for the 1st agent`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2527,"value":"viewof enduranceType1 = select({\n title: \"1st Agent : Endurance Profile\",\n description: \"Choose the endurance profile of the 1st agent\",\n options: [\n {label : \"Important\", value:2},\n {label:\"Middle\", value:1},\n {label: \"Low\", value:0}],\n value: \"Moyennement endurant\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2499,"value":"viewof vmax1 = slider({\n title: \"1st agent : Maximum speed\",\n min: 0,\n value: 25,\n max: 40,\n step: 0.00001,\n description: \"Choose the maximum speed of the 1st agent\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2558,"value":"md`## Choose parameters for the 2nd agent`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2560,"value":"viewof enduranceType2 = select({\n title: \"2nd Agent : Endurance Profile\",\n description: \"Choose the endurance profile of the 2nd agent\",\n options: [\n {label : \"Important\", value:2},\n {label:\"Middle\", value:1},\n {label: \"Low\", value:0}],\n value: \"Moyennement endurant\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2563,"value":"viewof vmax2 = slider({\n title: \"2nd agent : Maximum speed\",\n min: 0,\n value: 25,\n max: 40,\n step: 0.00001,\n description: \"Choose the maximum speed of the 2nd agent\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2566,"value":"md`## Choose parameters for the 3rd agent`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2568,"value":"viewof enduranceType3 = select({\n title: \"3rd Agent : Endurance Profile\",\n description: \"Choose the endurance profile of the 3rd agent\",\n options: [\n {label : \"Important\", value:2},\n {label:\"Middle\", value:1},\n {label: \"Low\", value:0}],\n value: \"Moyennement endurant\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2570,"value":"viewof vmax3 = slider({\n title: \"3rd agent : Maximum speed\",\n min: 0,\n value: 25,\n max: 40,\n step: 0.00001,\n description: \"Choose the maximum speed of the 3rd agent\"\n})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2678,"value":"md`## Visualisation`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2919,"value":"// Tirage d'une variable suivant une loi normale \n function randomGauss(moyenne, ecartType){\n let u = Math.random(), v = Math.random();\n let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v ); //u et v les deux valeurs aléatoires initiales\n // Décallage de la gaussienne autour des valeurs qui nous intéressent\n num *= ecartType; \n num += moyenne-ecartType; \n return num\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2475,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2910,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2788,"value":"html `\n\n\n

\n\n

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

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2699,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2494,"value":"viewof globalAlpha = select({\n options: [1, 0.3, 0.1, 0.01],\n description: \"Global alpha\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"viewof s = slider({\n min: 0,\n value: 5,\n max: 10,\n step: 0.00001,\n description: \"acceleration/speed ratio\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"viewof darker = slider({\n min: 0,\n value: 0.02,\n max: 0.1,\n description: \"darker with time?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1575,"value":"viewof shape = select({\n options: [\"circle\", \"square\", \"manhattan\"],\n description: \"Isolines shape\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"viewof options = checkbox([\"Show cones\", \"Clip Voronoi\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"showCones = options && options.indexOf(\"Show cones\") > -1","pinned":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":2298,"value":"$2f","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2073,"value":"$30","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":"$31","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":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1869,"value":"$33","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":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1579,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1356,"value":"$36","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":"$37","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":"$38","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":"$39","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"},{"id":2872,"value":"html `\n\n

\n\n

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