30:T17d5,canvas = { let landscape = (orientation == "landscape"); let canvas = DOM.canvas (960, 960/16*9); let context = canvas.getContext("2d"); // module aliases let Engine = Matter.Engine, Render = Matter.Render, World = Matter.World, Bodies = Matter.Bodies, Composite = Matter.Composite, Runner = Matter.Runner; // create an engine and a runner var world = World.create({gravity: landscape ? {x: 0, y:gravity} : {x:gravity, y: 0} }); var engine = Engine.create({world: world}); var runner = Runner.create(); // Variables configured by setup let w, h, scaleFactor, ground, lwall, rwall, ceiling; // Setup to be done on resize function setup () { w = canvas.width, h = canvas.height; scaleFactor = w / 964; var bodies = Composite.allBodies(engine.world); for (let obj of bodies) { World.remove(engine.world, obj); } // create two walls and a ground ground = Bodies.rectangle(w/2, h, w, 20, { isStatic: true }); lwall = Bodies.rectangle(0, h/2, 20, 2*h, { isStatic: true }); rwall = Bodies.rectangle(w, h/2, 20, 2*h, { isStatic: true }); ceiling = Bodies.rectangle(w/2, 0, w, 20, { isStatic: true }); // add all of the bodies to the world World.add(engine.world, landscape ? [ground,lwall,rwall] : [ceiling, ground, rwall]); } // Function to add a new box / name to the world at x,y function addName (x,y) { if (x == undefined || y == undefined) { // Random position [x, y] = landscape ? [w*0.1+Math.random()*w*0.8,(-0.4-0.4*Math.random())*h] : [(-0.4-0.4*Math.random())*w, h*0.15+Math.random()*h*0.7]; } let [name,size,picture] = randomName(); let font = size*scaleFactor+"px "+fonts[~~(Math.random()*fonts.length)]; context.font = font; let metrics = context.measureText(name); let angle = Math.PI / 8 - Math.random()* Math.PI / 4; if (!landscape) angle -= Math.PI / 2; let [dx,dy,delta] = [metrics.width+padding*scaleFactor, size*scaleFactor+padding*scaleFactor,0]; if (picture) { dx = picture.width*pictureScale; //dx = Math.max(dx,picture.width); //delta = dy; dy = picture.height*pictureScale; //dy += picture.height; } let box = Bodies.rectangle(x, y, dx, dy, { angle: angle, friction: friction, frictionAir: frictionAir } ); box.text = name; box.delta = delta; box.font = font; if (picture) box.img = picture; World.add(engine.world, [box]); } // First setup setup(); //Callback to resize canvas function onresize () { console.log ("resize"); console.log (canvas); let fs = document.webkitFullscreenElement || document.mozFullscreenElement; console.log ("fullscreen=", fs); if (fs == canvas) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } else { canvas.width = 960; canvas.height = 960/16*9; } setup(); } // Arrange for resize window.addEventListener('resize', onresize, false); // Interaction to add another box canvas.onmousedown = function (event) { let mouse = Matter.Vector.create(event.offsetX, event.offsetY); let bodies = Composite.allBodies(engine.world); let picked = Matter.Query.point(bodies,mouse); if (picked.length == 0) { addName(event.offsetX,event.offsetY); } else { for (let box of picked) { World.remove(engine.world, box); } } }; // Holds the animationFrame id let frame; // The main render function function render () { var bodies = Composite.allBodies(engine.world); if (Math.random() < changeProbability || bodies.length < minBodies) { // Do a random change to the scene if (Math.random() > bodies.length / maxBodies) { // Add a new name addName (); } else { // Remove bottom names for (let obj of bodies) { if (obj != ground && obj != lwall && obj != rwall && obj != ceiling) { for (let vtx of obj.vertices) { if (landscape ? (vtx.y > h-30) : (vtx.x > w-30)) { World.remove (engine.world, obj); break; } } } } } bodies = Composite.allBodies(engine.world); } context.fillStyle = backgroundColor; context.fillRect(0, 0, w, h); context.lineWidth = 1; context.strokeStyle = foregroundColor; context.fillStyle = foregroundColor; context.textBaseline="middle"; context.textAlign = "center"; for (var i = 0; i < bodies.length; i += 1) { context.beginPath(); if (drawboxes) { var vertices = bodies[i].vertices; context.moveTo(vertices[0].x, vertices[0].y); for (var j = 1; j < vertices.length; j += 1) { context.lineTo(vertices[j].x, vertices[j].y); } context.lineTo(vertices[0].x, vertices[0].y); context.stroke(); } if (bodies[i].text) { let x = bodies[i].position.x; let y = bodies[i].position.y; let delta = bodies[i].delta; let rot = bodies[i].angle; let img = bodies[i].img; context.save(); context.font = bodies[i].font; context.translate(x, y); context.rotate(rot); if (img) { let imgh = img.height * pictureScale; let imgw = img.width * pictureScale; context.drawImage(img,-imgw/2,-(imgh+delta)/2,imgw,imgh); } else { context.fillText(bodies[i].text,0,0); } context.restore(); } } frame = requestAnimationFrame(render); } // run the engine but stop on invalidation Runner.start(runner,engine); // Cancel the runner and the renderer invalidation.then (function() { Runner.stop(runner); cancelAnimationFrame(frame); window.removeEventListener('resize', onresize); }); // First render render(); return canvas; }31:[] 2e:{"title":"Name pool","cells":[{"id":0,"value":"md`# Name pool\n\nUses [matter.js](http://brm.io/matter-js) to physically animate a pool of names taken from a Brazilian survey. Names are added and removed randomically, although you can also add (and remove) names with the mouse.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"// Get the canvas element form the page\nfullScreen = { \n function fullScreen(element) {\n if(element.requestFullScreen) {\n element.requestFullScreen();\n console.log ('standard');\n } else if(element.webkitRequestFullScreen ) {\n element.webkitRequestFullScreen();\n console.log ('webkit');\n } else if(element.mozRequestFullScreen) {\n console.log ('mozilla');\n element.mozRequestFullScreen();\n }\n }\n \n let button = html``;\n button.style[\"font-size\"] = \"25px\";\n button.style[\"padding\"] = \"10px\";\n button.onclick = function () { fullScreen (canvas) };\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"viewof pictureScale = slider ({\n title: \"Picture Scale Factor\",\n min: 0.5,\n max: 1.5,\n step : 0.05,\n value: 0.8\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"fonts = [\"Fira Sans Condensed\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"viewof backgroundColor = color({\n value: \"#222222\",\n title: \"Background Color\",\n //description: \"This color picker starts out blue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof foregroundColor = color({\n value: \"#ffffee\",\n title: \"Foreground Color\",\n //description: \"This color picker starts out blue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"viewof drawboxes = checkbox({\n title: 'Draw boxes around names',\n options: ['On']})","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"viewof orientation = radio({\n title: 'Orientation',\n description: 'Whether visualization is to be projected in landscape or portrait mode',\n options: [\n { label: 'Landscape', value: 'landscape' },\n { label: 'Portrait', value: 'portrait' }\n ],\n value: 'portrait'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof minBodies = slider ({\n title: \"Minimum body count\",\n min: 20,\n max: 200,\n step : 1,\n value: 80,\n description: \"Maintain at least this many names on screen at a time\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"viewof maxBodies = slider ({\n title: \"Maximum body count\",\n min: 40,\n max: 1000,\n step : 1,\n value: 300,\n description: \"Bigger values make more crowded displays\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof gravity = slider({\n title: \"Gravity\",\n min: 0.01,\n max: 0.5,\n precision: 3,\n value: 0.2,\n description: \"bigger values make things fall faster\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"viewof friction = slider({\n title: \"Friction\",\n min: 0.001,\n max: 0.5,\n precision: 3,\n value: 0.05,\n description: \"smaller values make things slide more\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"viewof frictionAir = slider({\n title: \"Air friction\",\n min: 0.001,\n max: 0.5,\n precision: 3,\n value: 0.03,\n description: \"bigger values make things fall slower\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"viewof changeProbability = slider({\n title: \"Name pool change probability\",\n min: 0.0001,\n max: 0.1,\n precision: 4,\n value: 0.05,\n description: \"bigger values make names be recycled faster\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"padding = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"minFontSize = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"maxFontSize = 120","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"cardRecycleCount = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"mutable lastUserCard = ({ name:\"\", picture: null }) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"mutable allUserCards = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"pollUserCards = {\n while (true) {\n yield Promises.tick(1000, function () {\n let item = window.localStorage.getItem('KioskUserCard');\n if (item) {\n let usercard = JSON.parse(item);\n if (usercard.name!=lastUserCard.name || usercard.picture != lastUserCard.picture) {\n usercard.count = 0;\n usercard.img = html`

`;\n mutable lastUserCard = usercard;\n mutable allUserCards = [usercard].concat(mutable allUserCards);\n }\n return usercard;\n }\n else {\n return html`No Data Yet`\n }\n }());\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"mutable nameDrawCount = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"function randomName() {\n let freq, name;\n let n = mutable nameDrawCount;\n mutable nameDrawCount = n+1;\n if (mutable allUserCards.length>0 && (mutable allUserCards[0].count == 0 || n % minBodies == 1)) {\n let usercard = mutable allUserCards [0];\n mutable allUserCards = mutable allUserCards.splice(1);\n usercard.count++;\n if (usercard.count < cardRecycleCount) {\n mutable allUserCards = mutable allUserCards.concat(usercard);\n }\n [name, freq] = [usercard.name,nameFreq[usercard.name] || 0]; \n return [usercard.name,maxFontSize/2,usercard.img]\n }\n else { \n let i = ~~(Math.random()*allNames.length);\n if (mutable nameDrawCount == 10) i = 0;\n let d = allNames[i];\n [name,freq] = [d.Nome,d.ate2010];\n }\n let max = allNames[0].ate2010;\n //let m = Math.pow(2,Math.sqrt(freq/max))-1;\n let m = Math.pow(freq,0.3)/Math.pow(max,0.3);\n return [name,minFontSize+m*(maxFontSize-minFontSize)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"allNames = {\n let tmp = [];\n for (let d of data) {\n if (d.ate2010 > 0) tmp.push (d);\n }\n return tmp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"nameFreq = {\n let nameFreq = new Map();\n for (let d of allNames) {\n nameFreq.set(d.Nome,d.ate2010);\n }\n return nameFreq;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"Matter =require('matter-js@0.14.2/build/matter.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import { data } from \"@esperanc/nomes-populares-no-brasil\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"import {slider,color,radio,checkbox} from \"@esperanc/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`## Fonts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"fontStylesheets = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"html`Fira Sans Condensed
`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}