Built with blockbuilder.org
Last active
August 23, 2019 23:07
-
-
Save mforando/6b69446f491b42c6bd4e9f8ea2ff1f73 to your computer and use it in GitHub Desktop.
300 Node Orbit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; | |
| background:black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| const t = d3.timer(tick, 1000); | |
| var stopped = true; | |
| var width = 800; | |
| var height = 800; | |
| var radius = 250; | |
| var canvas = d3.select("body").append("canvas") | |
| .attr("width", width) | |
| .attr("height", height) | |
| var context = canvas.node().getContext("2d") | |
| var measures = d3.range(300).map(function(d,i){return {"id":"measure" + i,"type":"measure", "measure_index":i}}) | |
| var reports = d3.range(8).map(function(d,i){return {"id":"report" + i,"type":"report"}}) | |
| var combined = d3.merge([measures,reports]) | |
| combined.forEach(function(d){ | |
| if(d.type=="measure"){ | |
| d.speed = 1 + Math.random(); | |
| } | |
| else{ | |
| d.speed = Math.random()/2 + .5; | |
| } | |
| d.angle = Math.random()*Math.PI*2; | |
| d.radius = radius + 40*Math.random() | |
| d.curAngle = d.angle; | |
| if(d.type == "measure"){d.circleRadius = 1} | |
| else{d.circleRadius = 2 + Math.random()*8} | |
| }) | |
| /* | |
| var nodes = svg.selectAll("circle").data(combined) | |
| nodes.enter() | |
| .append("circle") | |
| .attr("cx", function(d){ | |
| if(d.type=="measure"){ | |
| d.speed = 1 + Math.random(); | |
| } | |
| else{ | |
| d.speed = Math.random()/2 + .5; | |
| } | |
| d.angle = Math.random()*Math.PI*2; | |
| d.radius = radius + 30*Math.random() | |
| return Math.cos(d.angle)*d.radius + width/2; | |
| }) | |
| .attr("cy", function(d){ | |
| return Math.sin(d.angle)*d.radius + width/2; | |
| }) | |
| .attr("r", function(d){ | |
| if(d.type == "measure"){return 2} | |
| else{return 8 + Math.random()*5} | |
| }) | |
| .style("fill","white") | |
| .attr("font-family", "monospace") | |
| */ | |
| function tick(elapsed) { | |
| //console.log(elapsed) | |
| redraw(elapsed) | |
| /* | |
| d3.selectAll("circle").attr("cx", function(d){ | |
| d.curAngle = d.angle + elapsed/30000*AnglePer1000*d.speed; | |
| return Math.cos(d.curAngle)*d.radius + width/2; | |
| }) | |
| .attr("cy", function(d){ | |
| return Math.sin(d.curAngle)*d.radius + width/2; | |
| }) | |
| */ | |
| } | |
| function redraw(elapsed) { | |
| var AnglePer1000 = Math.PI*2; | |
| // Update canvas | |
| context.clearRect(0, 0, width, height); | |
| combined.forEach(function(d,i){ | |
| d.curAngle = d.angle + elapsed/30000*AnglePer1000*d.speed; | |
| context.fillStyle = "rgb(200,200,200)"; | |
| context.strokeStyle = "white"; | |
| context.beginPath(); | |
| context.arc(Math.cos(d.curAngle)*d.radius + width/2,Math.sin(d.curAngle)*d.radius + width/2, d.circleRadius, 0, 2 * Math.PI); | |
| context.fill(); | |
| }); | |
| } | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment