31:T406,element = { let element = html`

` // create renderer var render = Matter.Render.create({ element: element, engine: engine, options: { width: width, height: height, showAngleIndicator: false, showCollisions: false, showVelocity: true, gravity: { x: 0, y: 0, scale: 0} } }); Matter.Render.run(render); // create runner let runner = Matter.Runner.create(); Matter.Runner.run(runner, engine); // add mouse control let mouse = Matter.Mouse.create(render.canvas); let mouseConstraint = Matter.MouseConstraint.create(engine, { mouse: mouse, constraint: { stiffness: 0.2, render: { visible: true } } }); Matter.World.add(world, mouseConstraint); // keep the mouse in sync with rendering render.mouse = mouse; // fit the render viewport to the scene Matter.Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: width, y: height } }); return element }32:T575,pullDownEvent = { pullDown let target = { x: width/2, y: height/2 } console.log('pulldown check') if(pullDown) { console.log('pulling down') let firstPass = true let passes = 0 //Matter.Events.off(engine, 'beforeUpdate') Matter.Events.on(engine, 'beforeUpdate', function(event) { const startOfString = ropeCopy.bodies[0] const startX = startOfString.position.x; const startY = startOfString.position.y; if(firstPass) { drawingContextLight.clearRect(0, 0, drawingContextLight.canvas.width, drawingContextLight.canvas.height); } const endX = target.x; const endY = target.y; const speed = 50; const elapsed = 4; const distance = Math.sqrt(Math.pow(endX-startX,2)+Math.pow(endY-startY,2)); const directionX = (endX-startX) / distance; const directionY = (endY-startY) / distance; Matter.Body.setPosition(startOfString, { x: startOfString.position.x + directionX * speed * elapsed, y: startOfString.position.y + directionY * speed * elapsed, dist: distance, }); target.y += speed * (elapsed + Math.pow(passes, 2)); const trail = ropeCopy.bodies.map((body, i) => ({ position: Matter.Vector.clone(body.position), speed: body.speed, })) draw(trail) firstPass = false; passes++; }) } }33:T56b,path = [{"x":329,"y":347},{"x":345,"y":334},{"x":355,"y":331},{"x":370,"y":331},{"x":394,"y":332},{"x":435,"y":338},{"x":469,"y":345},{"x":508,"y":354},{"x":545,"y":357},{"x":577,"y":353},{"x":607,"y":336},{"x":626,"y":311},{"x":634,"y":293},{"x":636,"y":270},{"x":630,"y":256},{"x":611,"y":236},{"x":588,"y":219},{"x":572,"y":214},{"x":553,"y":213},{"x":538,"y":217},{"x":523,"y":226},{"x":510,"y":238},{"x":498,"y":251},{"x":475,"y":262},{"x":438,"y":271},{"x":391,"y":277},{"x":359,"y":278},{"x":310,"y":278},{"x":256,"y":271},{"x":224,"y":258},{"x":211,"y":243},{"x":209,"y":216},{"x":215,"y":180},{"x":217,"y":176},{"x":228,"y":154},{"x":239,"y":146},{"x":253,"y":144},{"x":268,"y":144},{"x":282,"y":144},{"x":296,"y":144},{"x":300,"y":144},{"x":302,"y":144},{"x":309,"y":144},{"x":331,"y":149},{"x":341,"y":153},{"x":345,"y":156},{"x":353,"y":162},{"x":366,"y":173},{"x":379,"y":183},{"x":396,"y":194},{"x":432,"y":211},{"x":486,"y":225},{"x":548,"y":223},{"x":597,"y":200},{"x":618,"y":173},{"x":623,"y":148},{"x":616,"y":129},{"x":596,"y":113},{"x":568,"y":97},{"x":539,"y":87},{"x":522,"y":85},{"x":506,"y":85},{"x":493,"y":87},{"x":482,"y":92},{"x":477,"y":97},{"x":470,"y":112},{"x":465,"y":128},{"x":464,"y":135},{"x":463,"y":139},{"x":461,"y":145},{"x":458,"y":151},{"x":445,"y":186},{"x":436,"y":234},{"x":436,"y":278},{"x":436,"y":302},{"x":437,"y":312},{"x":437,"y":314}]34:[{"id":"7b8157a0b13c359e9ef342faec232afadb19f1f45025c94841d72f46aec0835971a256ab883cdb9aedc4ccfdc7b21560ee4d680382bb01e67ef1d525020d10e4","href":"https://static.observableusercontent.com/files/7b8157a0b13c359e9ef342faec232afadb19f1f45025c94841d72f46aec0835971a256ab883cdb9aedc4ccfdc7b21560ee4d680382bb01e67ef1d525020d10e4","name":"paint3_step1.gif","type":"image/gif","lastModified":1597309954350.55,"size":1231328},{"id":"e95cec0376c3d31168e9feb9f82902535df4492ef65d1e64eda38575b1dbab8a9dcb4d2566c6ea404e98786d0628f631a869a8aa6b0f135bda7f1bed431ead90","href":"https://static.observableusercontent.com/files/e95cec0376c3d31168e9feb9f82902535df4492ef65d1e64eda38575b1dbab8a9dcb4d2566c6ea404e98786d0628f631a869a8aa6b0f135bda7f1bed431ead90","name":"paint3_step2.gif","type":"image/gif","lastModified":1597309957261.535,"size":1250419}] 2f:{"title":"Pull string art simulation","cells":[{"id":0,"value":"md`# Pull string art simulation\n\nThis is an attempt to programatically recreate the effect of the pull string art technique in order to generate generative art\n\nThe main library used to achieve this is a 2D rigid body physics engine called [Matter.js](https://brm.io/matter-js/index.html)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"html`

Gif source: itsblossom

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"md`**Instructions**: *The white line you see bellow on the black canvas is your string, move it around to create a curved pattern. When satisfied with your shape scroll down and activate the **pull down the string** switch. The final output will be displayed below it on the white canvas. Click the 3 littles dots menu en the top left side of the cell to export the image. Click the **reset** button to restart. Enjoy!*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"viewof pullDown = {\n reset\n return toggle({ title: 'Pull down the string' })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"drawingContextLight.canvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"viewof reset = button({value: \"Reset\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":712,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"engine = Matter.Engine.create();","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"world = {\n engine.world;\n engine.world.gravity.scale = 0;\n return engine.world\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"rope = {\n var group = Matter.Body.nextGroup(true);\n var rope = Matter.Composites.stack(1, height/2, numberOfLinks, 1, 1, 1, function(x, y) {\n return Matter.Bodies.circle(x, y, 2, { collisionFilter: { group: group } });\n });\n Matter.Composites.chain(rope, 0.5, 0, -0.5, 0, { stiffness: 1, length: 2, render: { type: 'line' } }); \n return rope;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"ropeCopy = {\n reset \n return _.cloneDeep(rope)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"numberOfLinks = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"function draw(nodes) {\n nodes.forEach((node, i) => {\n const point = node.position;\n const speed = node.speed;\n const hue = 250 + Math.round((1 - Math.min(1, speed / 20)) * 170);\n const radius = speed < 0.1 ? 0 : 2 / (Math.pow(speed + 1, 2));\n \n drawingContextLight.beginPath();\n drawingContextLight.arc(point.x, point.y, radius, 0, 2 * Math.PI);\n drawingContextLight.fill();\n drawingContextLight.closePath();\n })\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"drawingContextLight = {\n const context = DOM.context2d(width, height);\n const canvas = context.canvas;\n \n canvas.style.background = \"#ffffff\";\n canvas.style.display = \"block\";\n canvas.style.margin = \"0 auto\";\n \n return context;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"clearingCanvas = {\n reset;\n //Matter.World.clear(world)\n //Matter.Events.off(engine, 'beforeUpdate')\n \n Matter.World.add(world, [ropeCopy]);\n drawingContextLight.clearRect(0, 0, drawingContextLight.canvas.width, drawingContextLight.canvas.height);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"Matter = require('matter-js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":733,"value":"import { toggle } from '@kelleyvanevert/little-things'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}