31:T835, experiment ={ var element = html`

` //var Example = Example || {}; var Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, Composites = Matter.Composites, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, World = Matter.World, Bodies = Matter.Bodies; // create engine var engine = Engine.create(), world = engine.world; // create renderer var render = Render.create({ // element: document.body, element: element, engine: engine, options: { width: 400, height: 400, showAngleIndicator: true, wireframes: false }}) Render.run(render); // create runner var runner = Runner.create(); Runner.run(runner, engine); // add bodies var stack = Composites.stack(35, 35, 7, nbr/7, 5, 0, function(x, y) { return Bodies.circle(x, y, 21.5,{restitution: 0.5, frictionStatic: 10, frictionAir: 0.01, render:{fillStyle:'yellow', opacity: 0.7}}) }); World.add(world, [ // walls Bodies.rectangle(400, 0, 800, 50, { isStatic: true} ), Bodies.rectangle(400, 400, 800, 50, { isStatic: true}), Bodies.rectangle(400, 300, 50, 600, { isStatic: true }), Bodies.rectangle(0, 300, 50, 600, { isStatic: true }), stack ]); engine.world.gravity.y = 0; // add mouse control var mouse = Mouse.create(render.canvas), mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { stiffness: 0.2, render: { visible: false } } }); World.add(world, mouseConstraint); // keep the mouse in sync with rendering render.mouse = mouse; // fit the render viewport to the scene Render.lookAt(render, { min: { x: 0, y: 0 }, max: { x: 400, y: 400 } }); return element; }; 32:T8dd,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }33:[] 2f:{"title":"Why Do Two Liquids Behave as a Solid?","cells":[{"id":0,"value":"md`# Why Do Two Liquids Behave as a Solid?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`*Move the slide bar to change the number of oil particles in the system. Play around the system by dragging the oil droplets.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`OBSERVE: The more oil particles there are, the system acts more like a solid state, which explains why mayonnaise has a solid-like texture.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"md`Therefore, you must add enough oil into water when making mayonnaise, so that the oil droplets cannot move past one another. This gives the mayonnaise a network of oil droplets, which subsequently gives the mayonnaise a solid behavior.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"viewof nbr = slider({\n min: 7, \n max: 56, \n step: 7, \n value: 56, \n title: \"Number of Oil Particles in the System\", \n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"md`## Imports and References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"function slider(config = {}) {\n let {\n min = 0,\n max = 1,\n value = (max + min) / 2,\n step = \"any\",\n precision = 2,\n title,\n description,\n disabled,\n getValue,\n format,\n display,\n submit\n } = typeof config === \"number\" ? { value: config } : config;\n precision = Math.pow(10, precision);\n if (!getValue)\n getValue = input => Math.round(input.valueAsNumber * precision) / precision;\n return input({\n type: \"range\",\n title,\n description,\n submit,\n format,\n display,\n attributes: { min, max, step, disabled, value },\n getValue\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"Matter = require('matter-js@0.14.2/build/matter.js')//Matter = require('matter-js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}