These are some cool or fun gizmos you can put on your browser bookmarks bar. Just click it to run it!
For all of these, highlight all the text in a text field, then copy it, paste it as the address of a bookmark.
Space Tool
javascript:(function(){const script=document.createElement('script');script.src='https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js';document.head.appendChild(script);script.onload=()=>{const style=document.createElement('style');style.innerHTML='*{user-select:none!important;-webkit-user-select:none!important;cursor:grab!important;}*:active{cursor:grabbing!important;}body{overflow:hidden!important;}';document.head.appendChild(style);const{Engine,Runner,Bodies,Composite,Mouse,MouseConstraint,Body,Vector}=Matter;const engine=Engine.create();engine.world.gravity.y=0;const elements=document.querySelectorAll('p,h1,h2,h3,button,a,img,li,span,input,.btn');const bodiesMap=[];elements.forEach(el=>{const rect=el.getBoundingClientRect();if(rect.width>5&&rect.height>5){const body=Bodies.rectangle(rect.left+rect.width/2,rect.top+rect.height/2,rect.width,rect.height,{restitution:0.8,frictionAir:0.01,friction:0.1,density:0.001});bodiesMap.push({element:el,body:body});Composite.add(engine.world,body);el.style.cssText+=`;position:fixed!important;left:0!important;top:0!important;width:${rect.width}px!important;height:${rect.height}px!important;margin:0!important;z-index:99999!important;pointer-events:none!important;transition:none!important;transform-origin:center center!important;`;}});const wallOptions={isStatic:true,restitution:1};const walls=[Bodies.rectangle(window.innerWidth/2,-25,window.innerWidth,50,wallOptions),Bodies.rectangle(window.innerWidth/2,window.innerHeight+25,window.innerWidth,50,wallOptions),Bodies.rectangle(-25,window.innerHeight/2,50,window.innerHeight,wallOptions),Bodies.rectangle(window.innerWidth+25,window.innerHeight/2,50,window.innerHeight,wallOptions)];Composite.add(engine.world,walls);const mouse=Mouse.create(document.body);const mouseConstraint=MouseConstraint.create(engine,{mouse:mouse,constraint:{stiffness:0.2,damping:0.05}});Composite.add(engine.world,mouseConstraint);let keys={};window.onkeydown=(e)=>keys[e.key.toLowerCase()]=true;window.onkeyup=(e)=>keys[e.key.toLowerCase()]=false;Runner.run(Runner.create(),engine);(function update(){if(keys['r']){bodiesMap.forEach(({body})=>{const delta=Vector.sub(mouse.position,body.position);Body.applyForce(body,body.position,Vector.mult(Vector.normalise(delta),0.00005*body.mass));});}bodiesMap.forEach(({element,body})=>{const{x,y}=body.position;element.style.transform=`translate3d(${x-element.offsetWidth/2}px,${y-element.offsetHeight/2}px,0) rotate(${body.angle}rad)`;});requestAnimationFrame(update);})();};})();
Post a Comment
No comments:
Post a Comment