A Pen by Jacob Foster on CodePen.
Created
June 23, 2018 15:24
-
-
Save rampol/202c975e1b8025e3472d2d4b346b371c to your computer and use it in GitHub Desktop.
oZLyyJ
This file contains hidden or 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
| <script> | |
| let githubDataCache = [{comments:0,created_at:"2016-06-24T14:22:16Z",labels:[{name:"Question",color:"cc317c"}],number:2,user:{login:"Evilmulle"}},{comments:1,created_at:"2016-06-24T19:29:32Z",number:3,user:{login:"Bamboy"}},{comments:1,created_at:"2016-06-24T20:15:47Z",number:4,user:{login:"DarthTorus"}},{comments:1,created_at:"2016-06-24T22:53:12Z",labels:[{name:"Question",color:"cc317c"}],number:5,user:{login:"elongielink"}},{comments:6,created_at:"2016-06-24T22:55:41Z",labels:[{name:"Challenge",color:"fbca04"}],number:6,user:{login:"Flameingo"}},{comments:0,created_at:"2016-06-24T23:10:58Z",labels:[{name:"Challenge",color:"fbca04"}],number:7,user:{login:"shiffman"}},{comments:0,created_at:"2016-06-24T23:11:09Z",labels:[{name:"Challenge",color:"fbca04"}],number:8,user:{login:"shiffman"}},{comments:1,created_at:"2016-06-24T23:11:45Z",number:9,user:{login:"shiffman"}},{comments:2,created_at:"2016-06-24T23:14:11Z",labels:[{name:"Challenge",color:"fbca04"}],number:14,user:{login:"shiffman"}},{comments:0,created_at:"2016-06-24T23:14:23Z",labels:[{name:"Challenge",color:"fbca04"}],number:15,user:{login:"shiffman"}},{comments:5,created_at:"2016-06-24T23:14:32Z",labels:[{name:"Challenge",color:"fbca04"},{name:"Patron Recommended",color:"0e8a16"}],number:16,user:{login:"shiffman"}},{comments:3,created_at:"2016-06-24T23:14:38Z",labels:[{name:"Challenge",color:"fbca04"}],number:17,user:{login:"shiffman"}},{comments:0,created_at:"2016-06-24T23:14:48Z",labels:[{name:"Challenge",color:"fbca04"}],number:18,user:{login:"shiffman"}},{comments:0,created_at:"2016-06-24T23:15:04Z",number:19,user:{login:"shiffman"}},{comments:18,created_at:"2016-06-24T23:15:49Z",labels:[{name:"Mathematically Involved",color:"e99695"},{name:"Patron Recommended",color:"0e8a16"},{name:"Planned",color:"d4c5f9"}],number:20,user:{login:"shiffman"}},{comments:0,created_at:"2016-06-24T23:15:59Z",number:21,user:{login:"shiffman"}},{comments:2,created_at:"2016-06-24T23:16:04Z",number:22,user:{login:"shiffman"}},{comments:0,created_at:"2016-06-24T23:16:55Z",number:23,user:{login:"shiffman"}},{comments:1,created_at:"2016-06-24T23:17:31Z",number:24,user:{login:"shiffman"}},{comments:14,created_at:"2016-06-24T23:18:01Z",number:25,user:{login:"shiffman"}},{comments:1,created_at:"2016-06-24T23:18:43Z",number:26,user:{login:"shiffman"}},{comments:1,created_at:"2016-06-25T00:52:04Z",number:27,user:{login:"shiffman"}},{comments:0,created_at:"2016-06-25T02:02:54Z",number:29,user:{login:"shiffman"}},{comments:0,created_at:"2016-06-25T19:47:41Z",number:32,user:{login:"cambertian"}},{comments:1,created_at:"2016-06-26T05:54:38Z",number:33,user:{login:"RazOmry"}},{comments:0,created_at:"2016-06-27T08:36:58Z",number:34,user:{login:"elongielink"}},{comments:0,created_at:"2016-06-27T10:17:33Z",number:35,user:{login:"liquidzym"}},{comments:0,created_at:"2016-06-27T15:37:05Z",labels:[{name:"Guest",color:"0052cc"}],number:36,user:{login:"msbrown"}},{comments:0,created_at:"2016-06-27T22:01:17Z",number:37,user:{login:"ANyanCatFan"}},{comments:0,created_at:"2016-06-28T16:09:37Z",number:38,user:{login:"ANyanCatFan"}},{comments:3,created_at:"2016-06-28T16:54:28Z",labels:[{name:"Patron Recommended",color:"0e8a16"}],number:39,user:{login:"slowizzm"}},{comments:0,created_at:"2016-06-28T19:17:58Z",number:44,user:{login:"prmondal"}},{comments:0,created_at:"2016-06-28T19:18:11Z",number:45,user:{login:"prmondal"}},{comments:2,created_at:"2016-06-29T04:40:48Z",number:47,user:{login:"washlake"}},{comments:0,created_at:"2016-06-30T12:15:40Z",number:52,user:{login:"rik-brown"}},{comments:1,created_at:"2016-06-30T15:43:41Z",number:53,user:{login:"Coderoversially"}},{comments:1,created_at:"2016-07-01T07:15:15Z",number:55,user:{login:"jaycody"}},{comments:2,created_at:"2016-07-01T08:45:10Z",number:59,user:{login:"rubychilds"}},{comments:0,created_at:"2016-07-01T10:59:08Z",number:60,user:{login:"rubychilds"}},{comments:1,created_at:"2016-07-01T13:08:26Z",number:61,user:{login:"majman"}},{comments:2,created_at:"2016-07-01T13:12:02Z",number:62,user:{login:"majman"}},{comments:1,created_at:"2016-07-04T03:29:56Z",number:64,user:{login:"jrc03c"}},{comments:0,created_at:"2016-07-06T14:04:04Z",number:65,user:{login:"jrc03c"}},{comments:0,created_at:"2016-07-07T14:49:15Z",number:67,user:{login:"joezcool02"}},{comments:2,created_at:"2016-07-07T15:07:34Z",number:68,user:{login:"shiffman"}},{comments:3,created_at:"2016-07-07T22:06:28Z",labels:[{name:"Challenge",color:"fbca04"}],number:70,user:{login:"rubychilds"}},{comments:3,created_at:"2016-07-09T05:15:01Z",number:71,user:{login:"booomji"}},{comments:0,created_at:"2016-07-09T05:18:21Z",number:72,user:{login:"JustinLincoln"}},{comments:0,created_at:"2016-07-12T07:46:28Z",labels:[{name:"Guest",color:"0052cc"}],number:74,user:{login:"fredericpierron"}},{comments:0,created_at:"2016-07-12T07:50:25Z",labels:[{name:"Question",color:"cc317c"}],number:75,user:{login:"fredericpierron"}},{comments:1,created_at:"2016-07-12T14:11:39Z",number:76,user:{login:"enxaneta"}},{comments:2,created_at:"2016-07-12T17:01:01Z",number:77,user:{login:"Alvalol"}},{comments:5,created_at:"2016-07-12T23:00:02Z",number:78,user:{login:"CharlesFr"}},{comments:1,created_at:"2016-07-13T05:46:54Z",number:81,user:{login:"slowizzm"}},{comments:2,created_at:"2016-07-13T14:13:30Z",number:82,user:{login:"Duroktar"}},{comments:0,created_at:"2016-07-13T21:34:10Z",labels:[{name:"Guest",color:"0052cc"}],number:84,user:{login:"slowizzm"}},{comments:6,created_at:"2016-07-14T18:10:00Z",number:85,user:{login:"Coderoversially"}},{comments:1,created_at:"2016-07-14T22:07:47Z",number:86,user:{login:"rubychilds"}},{comments:3,created_at:"2016-07-15T00:01:05Z",number:87,user:{login:"niklaseeeee"}},{comments:0,created_at:"2016-07-15T03:01:03Z",number:88,user:{login:"Alvalol"}},{comments:0,created_at:"2016-07-15T15:22:33Z",number:90,user:{login:"Dan-Ritchie"}},{comments:0,created_at:"2016-07-15T15:24:23Z",number:91,user:{login:"Dan-Ritchie"}},{comments:0,created_at:"2016-07-15T15:27:28Z",number:92,user:{login:"Dan-Ritchie"}},{comments:0,created_at:"2016-07-15T15:45:43Z",labels:[{name:"Guest",color:"0052cc"}],number:93,user:{login:"x13420x"}},{comments:0,created_at:"2016-07-16T15:57:05Z",number:95,user:{login:"Dan-Ritchie"}},{comments:0,created_at:"2016-07-16T18:24:54Z",number:97,user:{login:"Dan-Ritchie"}},{comments:4,created_at:"2016-07-19T02:03:45Z",number:100,user:{login:"shiffman"}},{comments:0,created_at:"2016-07-20T07:15:06Z",labels:[{name:"Patron Recommended",color:"0e8a16"}],number:103,user:{login:"Martin-Winter"}},{comments:0,created_at:"2016-07-20T13:12:29Z",labels:[{name:"Challenge",color:"fbca04"},{name:"Patron Recommended",color:"0e8a16"}],number:104,user:{login:"patryk1303"}},{comments:3,created_at:"2016-07-20T19:16:57Z",labels:[{name:"Question",color:"cc317c"}],number:105,user:{login:"Frank-Rodriguez"}},{comments:0,created_at:"2016-07-21T17:33:07Z",labels:[{name:"Guest",color:"0052cc"}],number:106,user:{login:"slowizzm"}},{comments:4,created_at:"2016-07-21T19:46:29Z",labels:[{name:"Challenge",color:"fbca04"}],number:107,user:{login:"DeveloperITA"}},{comments:1,created_at:"2016-07-22T02:38:17Z",number:108,user:{login:"slowizzm"}},{comments:0,created_at:"2016-07-22T04:50:26Z",number:109,user:{login:"FrankenSteinxD"}},{comments:0,created_at:"2016-07-22T14:20:45Z",number:112,user:{login:"SetupandDraw"}},{comments:0,created_at:"2016-07-23T05:18:23Z",number:113,user:{login:"camille-004"}},{comments:0,created_at:"2016-07-24T13:35:41Z",number:114,user:{login:"DrTeaSpoon"}},{comments:1,created_at:"2016-07-24T18:06:54Z",number:115,user:{login:"Granipouss"}},{comments:0,created_at:"2016-07-25T06:36:24Z",number:116,user:{login:"Martialis39"}},{comments:0,created_at:"2016-07-25T13:10:21Z",number:117,user:{login:"auzal"}},{comments:1,created_at:"2016-07-25T15:02:17Z",number:118,user:{login:"Kunjung"}},{comments:8,created_at:"2016-07-26T06:54:15Z",number:119,user:{login:"sinclairzx81"}},{comments:1,created_at:"2016-07-26T14:58:32Z",number:121,user:{login:"shiffman"}},{comments:0,created_at:"2016-07-26T16:53:25Z",labels:[{name:"Patron Recommended",color:"0e8a16"}],number:122,user:{login:"Burans"}},{comments:0,created_at:"2016-07-26T17:11:17Z",number:123,user:{login:"OldGamerNowDev"}},{comments:0,created_at:"2016-07-27T12:20:16Z",number:125,user:{login:"AkashGutha"}},{comments:0,created_at:"2016-07-27T16:26:33Z",number:126,user:{login:"MentalBrink"}},{comments:6,created_at:"2016-07-28T01:12:59Z",number:127,user:{login:"AdamHordines"}},{comments:1,created_at:"2016-07-28T16:28:33Z",number:129,user:{login:"GuidoSchmidt"}},{comments:3,created_at:"2016-08-01T14:20:32Z",number:130,user:{login:"shiffman"}},{comments:0,created_at:"2016-08-02T12:59:27Z",number:132,user:{login:"KassaBarks"}},{comments:0,created_at:"2016-08-02T15:40:49Z",number:134,user:{login:"meiamsome"}},{comments:1,created_at:"2016-08-03T09:16:12Z",number:137,user:{login:"Atlas98"}},{comments:7,created_at:"2016-08-03T14:33:36Z",labels:[{name:"Mathematically Involved",color:"e99695"}],number:139,user:{login:"bradfichter"}},{comments:1,created_at:"2016-08-03T18:55:04Z",number:140,user:{login:"jhubley"}},{comments:0,created_at:"2016-08-04T00:09:02Z",number:141,user:{login:"Sharkou"}},{comments:0,created_at:"2016-08-04T15:42:59Z",number:142,user:{login:"tommyneumann"}},{comments:0,created_at:"2016-08-04T16:43:28Z",number:143,user:{login:"zascal"}},{comments:1,created_at:"2016-08-05T11:07:20Z",number:144,user:{login:"sam46"}},{comments:4,created_at:"2016-08-05T14:05:54Z",labels:[{name:"Guest",color:"0052cc"}],number:145,user:{login:"alvarobyrne"}}]; | |
| </script> |
This file contains hidden or 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
| const { | |
| Bodies, Body, Constraint, Engine, | |
| Mouse, MouseConstraint, Runner, World | |
| } = Matter; | |
| let canvas; | |
| let githubData = githubDataCache;//[]; | |
| let particles = []; | |
| let mouse; | |
| let mConstraint; | |
| let engine; | |
| let world; | |
| let runner; | |
| let boundaries = {}; | |
| function setup() { | |
| Matter.use('matter-attractors'); | |
| canvas = createCanvas(windowWidth, windowHeight); | |
| engine = Engine.create(); | |
| world = engine.world; | |
| runner = Runner.create(); | |
| Runner.run(runner, engine); | |
| world.gravity.y = 0; | |
| mouse = Mouse.create(canvas.elt); | |
| Mouse.setOffset(mouse, { x: -width / 2, y: -height / 2 }); | |
| mConstraint = MouseConstraint.create(engine, { | |
| mouse, constraint: { stiffness: 0.1 } | |
| }); | |
| World.add(world, mConstraint); | |
| if(githubData.length === 0) { | |
| loadJSON( | |
| 'https://api.github.com/' + | |
| 'repos/CodingTrain/Rainbow-Topics/issues' + | |
| '?state=open&per_page=100&direction=asc', | |
| data => { | |
| githubData = data; | |
| createParticlesFromData(data); | |
| } | |
| ); | |
| } | |
| else { | |
| console.log('Cache hit'); | |
| createParticlesFromData(githubData); | |
| } | |
| let boundaryThickness = 60; | |
| let boundaryHalfThickness = boundaryThickness / 2; | |
| let halfWidth = width / 2; | |
| let halfHeight = height / 2; | |
| let doubleWidth = width * 2; | |
| let doubleHeight = height * 2; | |
| boundaries.floor = Bodies.rectangle( | |
| 0, halfHeight + boundaryHalfThickness, | |
| doubleWidth, boundaryThickness, | |
| { isStatic: true } | |
| ); | |
| boundaries.ceiling = Bodies.rectangle( | |
| 0, -halfHeight - boundaryHalfThickness, | |
| doubleWidth, boundaryThickness, | |
| { isStatic: true } | |
| ); | |
| boundaries.leftWall = Bodies.rectangle( | |
| -halfWidth - boundaryHalfThickness, 0, | |
| boundaryThickness, doubleHeight, | |
| { isStatic: true } | |
| ); | |
| boundaries.rightWall = Bodies.rectangle( | |
| halfWidth + boundaryHalfThickness, 0, | |
| boundaryThickness, doubleHeight, | |
| { isStatic: true } | |
| ); | |
| addBody(...Object.values(boundaries)); | |
| boundaries.thickness = boundaryThickness; | |
| } | |
| class Particle { | |
| constructor(opts = {}) { | |
| let { | |
| radius = 20, | |
| x = random(-width / 2, width / 2) * 0.875, | |
| y = random(-height / 2, height / 2) * 0.875, | |
| options = {}, | |
| } = opts; | |
| this.opts = opts; | |
| this.radius = radius; | |
| this.body = Bodies.circle(x, y, radius, options); | |
| } | |
| show() { | |
| push(); | |
| if(this.opts.color) { | |
| fill(this.opts.color); | |
| } | |
| let pos = this.body.position; | |
| translate(pos.x, pos.y); | |
| rotate(this.body.angle); | |
| ellipse( | |
| 0, | |
| 0, | |
| this.radius * 2 | |
| ); | |
| line(0, 0, 0, this.radius); | |
| pop(); | |
| } | |
| } | |
| function addBody(...bodies) { | |
| World.add(engine.world, bodies); | |
| } | |
| function createParticle(opts) { | |
| let particle = new Particle(opts); | |
| particles.push(particle); | |
| addBody(particle.body); | |
| } | |
| function createParticlesFromData(data) { | |
| let largest = data.slice(0).sort((a, b) => a.comments - b.comments).pop().comments; | |
| data.forEach(n => { | |
| let area = n.comments || 0.1; | |
| let radius = sqrt(area / PI) * 30; | |
| let opts = { options: {} }; | |
| if(largest === area) { | |
| opts.color = 'green'; | |
| // opts.options.isStatic = true; | |
| opts.x = 0; | |
| opts.y = 0; | |
| opts.options.plugin = { | |
| attractors: [ | |
| (bodyA, bodyB) => { | |
| let force = { | |
| x: (bodyA.position.x - bodyB.position.x) * 1e-6, | |
| y: (bodyA.position.y - bodyB.position.y) * 1e-6 | |
| }; | |
| Body.applyForce(bodyA, bodyA.position, Matter.Vector.neg(force)); | |
| Body.applyForce(bodyB, bodyB.position, force); | |
| }, | |
| // MatterAttractors.Attractors.gravity | |
| ] | |
| } | |
| } | |
| opts.radius = radius; | |
| createParticle(opts); | |
| }); | |
| } | |
| function draw() { | |
| background(0); | |
| stroke(255); | |
| noFill(); | |
| // text(githubData.length === 0 ? 'LOADING' : 'Loaded', 20, 30); | |
| translate(width / 2, height / 2); | |
| // if(githubData.length) { | |
| // githubData.forEach(n => { | |
| // let area = n.comments; | |
| // let r = sqrt(area / PI) * 30; | |
| // ellipse(0, 0, r * 2); | |
| // }); | |
| // } | |
| particles.forEach(p => p.show()); | |
| if(mConstraint.body) { | |
| let pos = mConstraint.body.position; | |
| let offset = mConstraint.constraint.pointB; | |
| let m = mConstraint.mouse.position; | |
| stroke(0, 255, 0); | |
| line(pos.x + offset.x, pos.y + offset.y, m.x, m.y); | |
| } | |
| } | |
| function windowResized() { | |
| resizeCanvas(windowWidth, windowHeight); | |
| } | |
| function compactDataForTempCache() { | |
| function formatObj(obj) { | |
| return '{' + Object.keys(obj).map(key => { | |
| let val = obj[key], out; | |
| if(typeof val === 'string') out = `"${val.replace(/"/g, '\\"')}"`; | |
| else if(typeof val === 'number') out = val; | |
| else if(Array.isArray(val)) { | |
| if(val.length === 0) { | |
| return null; | |
| } | |
| out = `[${val.map(formatObj).join(',')}]`; | |
| } | |
| else if(val === null) { | |
| return null; | |
| } | |
| else out = `${formatObj(val)}`; | |
| return `${key}:${out}`; | |
| }).filter(n => n).join(',') + '}'; | |
| } | |
| return '[' + githubData.map(({ | |
| comments, created_at, labels, number, title, user: { login } | |
| }) => ({ | |
| comments, created_at, | |
| labels: labels.map(({ name, color }) => ({ name, color })), | |
| number, user: { login } | |
| })) | |
| .map(formatObj).join(',') + ']'; | |
| } |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js"></script> | |
| <script src="https://cdn.rawgit.com/liabru/matter-attractors/4cf28e1d/build/matter-attractors.min.js"></script> | |
| <script src="https://cdn.rawgit.com/liabru/matter-js/2560a681/build/matter.min.js"></script> |
This file contains hidden or 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
| html,body { | |
| background: black; | |
| margin: 0; | |
| overflow: hidden; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment