28:null 29:["$","title",null,{"children":"Avoidance | Herb Susmann | Observable"}] 2e:T1169,canvas = { const context = DOM.context2d(width, height); const arr = []; for(let i = 0; i < N; i++) { arr.push({ x: Math.random() * width, y: Math.random() * height, dx: Math.random() * 2.5, dy: Math.random() * 2.5, v: 0.2 + max_speed * Math.random(), history: [] }); } /* const arr = [ { x: width / 2 - 250, y: height / 2 + 50, }, { x: width - 20, y: 10 } ]; */ while(true) { // Redraw context.fillStyle = "hsl(200deg 95% 20%)"; context.fillRect(0, 0, width, height); // Update for(let i = 0; i < N; i++) { // Find nearest other point let nearestIndex = -1; let nearestDistSq = Infinity; for(let j = 0; j < N; j++) { if(i == j) continue; //if(i < N / 2 && j < N / 2) continue; //if(i >= N / 2 && j >= N / 2) continue; const distSq = Math.pow(Math.min(Math.abs(arr[i].x - arr[j].x), width - Math.abs(arr[i].x - arr[j].x)), 2) + Math.pow(Math.min(Math.abs(arr[i].y - arr[j].y), height - Math.abs(arr[i].y - arr[j].y)), 2); if(distSq < nearestDistSq) { nearestDistSq = distSq; nearestIndex = j; } } // Move away or towards nearest other point //let new_dx = Math.min(Math.abs(arr[nearestIndex].x - arr[i].x), width - Math.abs(arr[nearestIndex].x - arr[i].x)); //let new_dy = Math.min(Math.abs(arr[nearestIndex].y - arr[i].y), height - Math.abs(arr[nearestIndex].y - arr[i].y)); let new_dx = arr[nearestIndex].x - arr[i].x; if(arr[nearestIndex].x - arr[i].x > width/2) { new_dx = (arr[nearestIndex].x - width) - arr[i].x; } else if(arr[nearestIndex].x - arr[i].x < -width/2) { new_dx = (arr[nearestIndex].x) - (arr[i].x - width); } let new_dy = arr[nearestIndex].y - arr[i].y; if(arr[nearestIndex].y - arr[i].y > height/2) { new_dy = (arr[nearestIndex].y - height) - arr[i].y; } else if(arr[nearestIndex].y - arr[i].y < -height/2) { new_dy = (arr[nearestIndex].y) - (arr[i].y - height); } const distThreshold = 1500; if(nearestDistSq < distThreshold && false) { context.beginPath(); context.moveTo(arr[i].x, arr[i].y); context.lineTo(arr[i].x + new_dx, arr[i].y + new_dy); context.stroke(); } new_dx *= -1; new_dy *= -1; if(nearestDistSq < distThreshold) { arr[i].dx = 0.999 * (nearestDistSq / distThreshold) * arr[i].dx + 0.001 * (1 - nearestDistSq / distThreshold) * new_dx; arr[i].dy = 0.999 * (nearestDistSq / distThreshold) * arr[i].dy + 0.001 * (1 - nearestDistSq / distThreshold) * new_dy; } arr[i].dx += random_scale * (Math.random() - 0.5) + bias_x; arr[i].dy += random_scale * (Math.random() - 0.5) + bias_y; const norm = Math.sqrt(Math.pow(arr[i].dx, 2) + Math.pow(arr[i].dy, 2)); arr[i].dx *= arr[i].v / norm; arr[i].dy *= arr[i].v / norm; arr[i].history.unshift({ x: arr[i].x, y: arr[i].y }); arr[i].history = arr[i].history.slice(0, trail_length); arr[i].x += arr[i].dx; arr[i].y += arr[i].dy; if(arr[i].x >= width) { arr[i].x = 0; } else if(arr[i].x <= 0) { arr[i].x = width; } if(arr[i].y >= height) { arr[i].y = 0; } else if(arr[i].y <= 0) { arr[i].y = height; } } for(let i = 0; i < N; i++) { context.fillStyle = "rgba(255, 255, 255, 0.8)"; context.strokeStyle = "rgba(255, 255, 255, 0.5)"; if(arr[i].history.length > 0) { context.beginPath(); context.moveTo(arr[i].history[0].x, arr[i].history[0].y); for(let j = 1; j < arr[i].history.length; j++) { if(Math.pow(arr[i].history[j - 1].x - arr[i].history[j].x, 2) + Math.pow(arr[i].history[j - 1].y - arr[i].history[j].y, 2) > 100) { context.moveTo(arr[i].history[j].x, arr[i].history[j].y); } else { context.lineTo(arr[i].history[j].x, arr[i].history[j].y); } } context.stroke(); } if(show_points.length > 0) { context.beginPath(); context.arc(arr[i].x, arr[i].y, 3, 0, 2 * Math.PI); context.fill(); } } yield context.canvas; } return context.canvas; }2f:[] 2c:{"id":"b468aed1eee29397","slug":"avoidance","title":"Avoidance","thumbnail":"7f939c6653a21f3c759af59e9854b08562d02c65bc264093491b9d942afd7e1e","access_level":"public","create_time":"$D2022-11-08T00:04:44.175Z","update_time":"$D2022-11-08T21:18:05.862Z","view_time":null,"first_public_time":"$D2022-11-08T17:26:42.941Z","has_unpublished_edits":null,"fork":{"id":"7a0980291ec2d753","slug":"interactive-html-canvas","title":"Interactive HTML Canvas","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"a848bf10c248efb2","login":"herbps10","name":"Herb Susmann","avatar_url":"https://avatars-next.observableusercontent.com/3d8000aa2ff6515179603ce3451b0104272bd8b602dd87bb09f033573d6fa6a5","tier":"starter_2024"},"version":446,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"069af68ad7bd402a","login":"herbps10","name":"Herb Susmann","avatar_url":"https://avatars-next.observableusercontent.com/3d8000aa2ff6515179603ce3451b0104272bd8b602dd87bb09f033573d6fa6a5","tier":null}],"members":[{"type":"individual","id":"069af68ad7bd402a","login":"herbps10","name":"Herb Susmann","avatar_url":"https://avatars-next.observableusercontent.com/3d8000aa2ff6515179603ce3451b0104272bd8b602dd87bb09f033573d6fa6a5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Avoidance","cells":[{"id":0,"value":"# Avoidance","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"viewof N = Inputs.range([2, 2000], {label: \"N\", step: 1, value: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"viewof trail_length = Inputs.range([0, 400], { label: \"Trail length\", step: 1, value: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"viewof max_speed = Inputs.range([0.5, 3], {label: \"Max speed\", step: 0.1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"viewof show_points = Inputs.checkbox([\"Draw points\"], {label: \"\", value: [\"Draw points\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"random_scale = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"bias_x = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"bias_y = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"