29:null 2a:["$","title",null,{"children":"InfoVis Final Project - Social Distance Simulation | zheng100 | Observable"}] 2f:T5f1,// A loop cell to update state info // This is the main function that runs the stimulation... stimuloop = { let i = 0; const one_series = new Array() // initiated to capture number of infected balls for plots or graphs... const time_series = new Array() // initiated to capture time takes to infect balls for plots or graphs... // A timer for the stimulus // delay_count_sec = how many i++ counts per second // stimus_secs = seconds of stimulation if delay_count_sec set up as 60 while (i < (stimu_secs * delay_count_sec)){ //Bounce off the wall and rectangle container // Loop through each ball eachBall(balls,(ball,i) => { ball.x += ball.dx; // move the ball ball.y += ball.dy; // move the ball ball = bounce_wall(ball); // another fuction to check against wall ball = bounce_rect(ball, con_rect); // another fuction to check against rectangle }); // Bounce off other balls. nested_balls(balls); // Update rectangle positions update_rect(con_rect); //show current i yield Promises.delay(delay_count_sec, ++i); // count the number of infected balls if (i % delay_count_sec == 0){ one_series.push(count_infct_balls(balls)); time_series.push(i/delay_count_sec); } } // Update cells named series and time_line to capture data for graph... series.push(one_series); time_line.push(time_series); }30:T61d,// draw cell // This cell basically update the canvas and draw the most updated objects... draw = { stimuloop // makes draw cell depend on loop (AKA the main function // Draw the background c.fillStyle = "white"; c.fillRect(0,0, w, h + top_bar_height); // give margin some color c.fillStyle = "#C4820F"; // that dividing bar c.fillRect(scale, top_bar_height - scale , w, scale); // top left x,y and width & length // give wall some color c.fillStyle = "#C4820F"; c.fillRect(0, 0, w, scale); //top bar c.fillRect(0, 0, scale, top_bar_height + h); //left side bar c.fillRect(w - scale, 0 , scale, h + top_bar_height); //right side bar c.fillRect(0, top_bar_height + h - scale, w, h + top_bar_height); //bottom bar // Draw the balls eachBall(balls, (ball) => { c.beginPath(); c.fillStyle = ball.color; c.arc(ball.x,ball.y, ball.r, 0, 2 * Math.PI); c.fill() }); // To draw the interactive circles // array helps for the drag animation for (const {x, y, r, color, dx, dy, active} of interactive_circles_2) { c.beginPath(); c.moveTo(x + r, y); c.arc(x, y, r, 0, 2 * Math.PI); c.fillStyle = color; c.fill(); // selected effect on the dragable circle if (active) { c.lineWidth = 2; c.stroke(); } } // redraw canvas once ball is moved c.canvas.dispatchEvent(new CustomEvent("input")); // Draw the rectangele c.strokeStyle = "#7DCEA0" c.lineWidth = scale * 0.4 c.strokeRect(con_rect.x,con_rect.y,con_rect.wid, con_rect.height); }31:T80c,// Function to bounce balls against rectangle function bounce_rect(ball, rect) { let ul_corner = [rect.x, rect.y] let lr_corner = [rect.x + rect.wid, rect.y + rect.height] let half_scale = scale * 0.5 // if ball inside of rectangle if ( (ball.x - ball.r) > ul_corner[0] && (ball.y - ball.r) > ul_corner[1] && (ball.x + ball.r) < lr_corner[0] && (ball.y + ball.r) < lr_corner[1]) { // if a hit from right side --> move right if (ball.x - ball.r < rect.x + half_scale){ ball.dx = Math.abs(ball.dx) } // if a hit from left side --> move left if (ball.x + ball.r > lr_corner[0] - half_scale){ ball.dx = - Math.abs(ball.dx) } // if a hit from bottom side --> move down if (ball.y - ball.r < rect.y + half_scale){ ball.dy = speed } // if a hit from top side --> move up if (ball.y + ball.r > lr_corner[1] - half_scale){ ball.dy = -speed } } // When outside and hitting from top or bottom else if ((ball.x - ball.r > rect.x && ball.x + ball.r < lr_corner[0])){ // move up if (ball.y + ball.r > rect.y - half_scale&& ball.y < rect.y){ ball.dy = -speed } // move down if (ball.y - ball.r < lr_corner[1] + half_scale && ball.y > lr_corner[1]){ ball.dy = speed } } // when it's outside of the rectangle and on the same horizontal level else if (ball.y + ball.r < lr_corner[1] && ball.y - ball.r > rect.y) { // if a hit from right side --> move right if (ball.x - ball.r < lr_corner[0] + half_scale && ball.x > lr_corner[1]){ ball.dx = Math.abs(ball.dx) } // if a hit from left side --> move left if (ball.x + ball.r > rect.x && ball.x < rect.x) { ball.dx = - Math.abs(ball.dx) } } return ball }32:T5a1,// Nested ball funtion for colludsion and infection... function nested_balls(balls){ // Double loop to go through all balls for (let i = 0; i < balls.length ; i++){ let ball1 = balls[i] // here is the second loop for (let j = 0; j < balls.length ; j++){ // if second ball is same as the first ball next let ball2 = balls[j]; if (ball1 == ball2) continue; // check collision if ball2 hits ball1 if (CheckCollision(ball2, ball1) ) { if (ball1.color == infectColor && Math.random() < infect_prob){ ball2.color = infectColor;} if (ball2.color == infectColor && Math.random() < infect_prob){ ball1.color = infectColor;} } // check collision if ball1 hits ball2 if (CheckCollision(ball1, ball2) ) { if (ball2.color == infectColor && Math.random() < infect_prob ){ ball1.color = infectColor;} if (ball1.color == infectColor && Math.random() < infect_prob ){ ball2.color = infectColor;} //set velocities for both balls ball1.dx = -ball1.dx; ball1.dy = -ball1.dy; ball2.dx = -ball2.dx; ball2.dy = -ball2.dy; //ensure one ball is not inside others. distant apart till not colliding while (CheckCollision(ball1, ball2)) { ball1.x += ball1.dx; ball1.y += ball1.dy; ball2.x += ball2.dx; ball2.y += ball2.dy; } } } } return balls }33:T589,// for drag animation... // borrowed directly from https://observablehq.com/@d3/hello-d3-drag drag_circles = subjects => { // Choose the circle that is closest to the pointer for dragging. function dragsubject() { let subject = null; let distance = maxDistance; for (const c of subjects) { let d = Math.hypot(d3.event.x - c.x, d3.event.y - c.y); if (d < distance) { distance = d; subject = c; } } return subject; } // When starting a drag gesture, move the subject to the top and mark it as active. function dragstarted() { subjects.push(d3.event.subject); d3.event.subject.active = true; } // When dragging, update the subject’s position. function dragged() { d3.event.subject.x = Math.max(0, Math.min(w, d3.event.x)); d3.event.subject.y = Math.max(0, Math.min(h + top_bar_height, d3.event.y)); } // When ending a drag gesture, mark the subject as inactive again. function dragended() { d3.event.subject.active = false; if (d3.event.subject.color == infectColor){ d3.event.subject.dx = speed * Math.random() - speed * Math.random(); d3.event.subject.dy = speed * Math.random() - speed * Math.random(); balls.push(d3.event.subject); } } return d3.drag() .subject(dragsubject) .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }34:[] 2d:{"id":"89c241b7a74b5e62","slug":"infovis-final-project-social-distance-simulation","title":"InfoVis Final Project - Social Distance Simulation","thumbnail":"0ee63573564d1496610be6de7802200ecb9b4db2d4f435fa959d1b59965c9be6","access_level":"public","create_time":"$D2020-04-15T05:06:14.152Z","update_time":"$D2020-04-27T23:18:49.588Z","view_time":null,"first_public_time":"$D2020-04-21T05:09:05.948Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b4f0f1a695feeb79","login":"zheng100","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9abca037fc2b25ed82dde900b8944cd903d349bd4b50cd99ec380cf60a61a85b","tier":"starter_2024"},"version":750,"publish_version":750,"role":null,"authored":false,"authors":[{"type":"individual","id":"6bf66a0f2c913b07","login":"zheng100","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9abca037fc2b25ed82dde900b8944cd903d349bd4b50cd99ec380cf60a61a85b","tier":null}],"members":[{"type":"individual","id":"6bf66a0f2c913b07","login":"zheng100","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9abca037fc2b25ed82dde900b8944cd903d349bd4b50cd99ec380cf60a61a85b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"InfoVis Final Project - Social Distance Simulation","cells":[{"id":0,"value":"md`# InfoVis Final Project - Social Distance Simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof numofballs = slider({min: 2, max: 500, value: 50, step: 1, title: \"Number of Balls\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// Canvas width\nviewof w = slider({min: 500, max: width, value: 800, step: 1, title: \"Canvas width\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"// Speed of ball\nviewof speed = slider({min: 0.1, max: 10, value: 5, step: 0.1, title: \"Speed of Ball\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// Scale of balls\nviewof scale = slider({min: 2, max: 20, value: 12, step: 1, title: \"Scale of balls\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"// Scale of balls\nviewof infect_prob = slider({min: 0.1, max: 1, value: 0.25, step: 0.05, title: \"infection probability\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"viewof infectColor = color({\n 'title': 'infected color',\n 'value': '#ea4833',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof newsti = button(\"New Stimuluation\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof c = {\n var content = DOM.context2d(w, top_bar_height + h); // content that contains canvas\n var canvas = content.canvas;\n content.canvas.value = content;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"// define the main balls object as an Array\nballs = {\n newsti; // this should depend on newsti button on top\n let balls = new Array(numofballs).fill(0)\n \n // loop through all ball to assign some random starting point\n eachBall(balls,(ball,i) => {\n balls[i] = {\n r: scale * 0.7,\n x: x_start2[i],\n y: y_start2[i],\n dx: speed * Math.random() - speed * Math.random(),\n dy: speed * Math.random() - speed * Math.random(),\n color: \"#003262\"\n };\n });\n return balls\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"// Collision checking function\nfunction CheckCollision(ball1, ball2) {\n var absx = Math.abs(ball2.x - ball1.x);\n var absy = Math.abs(ball2.y - ball1.y);\n\n // find distance between two balls.\n var distance = (absx * absx) + (absy * absy);\n distance = Math.sqrt(distance);\n // check if distance is less than sum of two radius - if yes, collision\n if (distance < (ball1.r + ball2.r)) {\n return true;\n }\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"// Function to check ball against wall...\nfunction bounce_wall(ball) {\n // if position is less than radius move right\n if (ball.x < ball.r + scale)\n {ball.dx = Math.abs(ball.dx)}; \n // if position + radius is beyond width of screen move left\n if (ball.x + ball.r > w - scale)\n {ball.dx = - Math.abs(ball.dx)}; \n // if ball position is less than radius (aka hitting the ceiling) move down\n if (ball.y < ball.r + top_bar_height) \n {ball.dy = speed} ; \n // if ball hits bottom move up\n if (ball.y + ball.r > h + top_bar_height - scale) \n {ball.dy = -speed}; \n \n return ball\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"// d3 function that combines the user input into action\n// drag_circles is a seperate function\nd3_action = {d3.select(c.canvas).call(drag_circles(interactive_circles_2).on(\"start.render drag.render end.render\", draw));}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"// these are the interactive circles that we can move around for interactive features\n\ninteractive_circles_2 = new Array(\n ({ r: scale * 0.7, x: infect_ball_start_cor[0], y: infect_ball_start_cor[1], dx: 0, dy: 0, color: infectColor}), // that infected ball\n ({ r: scale * 0.4, x: infect_ball_start_cor[0] + scale * 20, y: infect_ball_start_cor[1] - scale, dx: 0, dy: 0, color: \"blue\"}), // top left corner of rectangle container \n ({ r: scale * 0.4, x: infect_ball_start_cor[0] + scale * 40, y: infect_ball_start_cor[1] + scale, dx: 0, dy: 0, color: \"red\"}) // bottom right corner of rectangle container \n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"// rectangle container object\ncon_rect = ({x: Math.min(interactive_circles_2[1].x, interactive_circles_2[2].x),\n y: Math.min(interactive_circles_2[1].y, interactive_circles_2[2].y),\n wid: Math.abs(interactive_circles_2[1].x - interactive_circles_2[2].x),\n height: Math.abs(interactive_circles_2[1].y - interactive_circles_2[2].y)\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"// function to update rectangle positions\nfunction update_rect(con_rect){\n con_rect.x = Math.min(interactive_circles_2[1].x, interactive_circles_2[2].x)\n con_rect.y = Math.min(interactive_circles_2[1].y, interactive_circles_2[2].y)\n con_rect.wid = Math.abs(interactive_circles_2[1].x - interactive_circles_2[2].x)\n con_rect.height = Math.abs(interactive_circles_2[1].y - interactive_circles_2[2].y)\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"// function to loop through the Balls ( For a single loop)\n\nfunction eachBall(balls, cb){//call back function\n for (let i = 0 ; i < balls.length; i++){\n let ball = balls[i];\n if (cb(ball,i)) return;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"//Made this to for graphs but feel free to change...\nchart_data = ({\n growth: series,\n growth_time: time_line,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"series = new Array()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"// Small function to count number of infected balls in array of balls\nfunction count_infct_balls(balls){\n var count = 0;\n for(var i = 0; i < balls.length; ++i){\n if(balls[i].color == infectColor)\n count++;}\n return count\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"time_line = new Array()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"maxDistance = Infinity","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"top_bar_height = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"h = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"delay_count_sec = 60","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"// how long the stimulation lasts...in seconds\nstimu_secs = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"// infected ball starting position\ninfect_ball_start_cor = { \n newsti; \n let infect_ball_cor = [width / 4, top_bar_height/2];\n return infect_ball_cor}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"x_start2 = { \n newsti; \n let x_start2 = new Array(numofballs);\n \n for (let i = 0; i < x_start2.length; i++) {\n x_start2[i] = scale * 2 + Math.random() *(w - 4 * scale)\n }\n return x_start2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"// we may not need this any more\ninteractive_circles = \n // Initiated an infected ball (It's an array with only one element in case we need more\n d3.range(1).map(i => ({\n r: scale * 0.7, x: infect_ball_start_cor[0], y: infect_ball_start_cor[1], \n dx: 0, dy: 0, color: infectColor}));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"y_start2 = { \n newsti; \n let y_start2 = new Array(numofballs);\n \n for (let i = 0; i < y_start2.length; i++) {\n y_start2[i] = scale * 2 + top_bar_height + Math.random() * ( h + top_bar_height - 4 * scale)\n }\n return y_start2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"import {color, slider, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"