25:["$","title",null,{"children":"WebGL Chladni | inoculate_media | Observable"}] 49:T430,

4a:T27a7,function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);} class CopyToClipboard extends React.Component { copy() { const textarea = this.textarea; let { text, onCopy, silent } = this.props; silent = typeof silent === "boolean" || silent.toLowerCase() == "true" || silent == "1"; textarea.value = onCopy.call(this, text); textarea.select(); width; try { const successful = document.execCommand("copy"); const msg = successful ? "successful" : "unsuccessful"; if (!silent) { prompt("Copying text command was " + msg, textarea.value); } } catch (err) { alert(`Oops, unable to copy (${err.message})`); } } render() { const { label } = this.props; const attr = { style: this.props.style, className: this.props.className }; return /*#__PURE__*/( React.createElement("p", null, /*#__PURE__*/ React.createElement("button", _extends({ onClick: () => this.copy() }, attr), label), /*#__PURE__*/ React.createElement("textarea", { ref: textarea => { this.textarea = textarea; }, style: { position: "absolute", top: "-1000px" } }))); }} CopyToClipboard.defaultProps = { label: "Copy", silent: false, text: "Set prop 'text' to your text to copy, or add call back function 'onCopy' which returns the value to copy", onCopy: txt => { // return "Nothing to copy "+new Date(); return txt; } }; CopyToClipboard.propTypes = { className: React.PropTypes.string, style: React.PropTypes.object, label: React.PropTypes.string, text: React.PropTypes.string, onCopy: React.PropTypes.func, silent: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.boolean]) }; class MySVG extends React.Component { toRadians(angle) { return angle * (Math.PI / 180); } inverse() { document.body.classList.toggle("inverse"); } getSvg(text) { return this.refs.svg.innerHTML; } render() { var canvas = { width: document.body.clientWidth * 1.2, height: document.body.clientHeight * 1.2 - 50 }; if (canvas.width < canvas.height) { canvas.height = canvas.width; } else { canvas.width = canvas.height; } var rx = canvas.width / 2, ry = canvas.height / 2, sub = 1, angle = 0, subtract = parseFloat(this.props.subtract), accelerate = parseFloat(this.props.accelerate), maxrun = 20160, timeout = false, count = 0, d = ""; var graphData = [], startTime = new Date(); var controlledTimeout = setTimeout(function runForMaxTime() { timeout = true; }, 2000); do { sub += subtract; angle += parseFloat(this.props.step); var x = Math.cos(this.toRadians(angle)) * (rx - sub) + rx; var y = Math.sin(this.toRadians(angle)) * (ry - sub) + ry; d += d == "" ? "M " + x + " " + y + " " + this.props.type + " " : x + " " + y + " "; subtract = subtract + accelerate; maxrun--; count++; } while (!timeout && sub - subtract < rx && maxrun > 0); clearTimeout(controlledTimeout); var renderTime = new Date() - startTime; return /*#__PURE__*/( React.createElement("div", null, /*#__PURE__*/ React.createElement("div", { className: "info" }, /*#__PURE__*/ React.createElement("div", null, "Click to change colors"), /*#__PURE__*/ React.createElement(CopyToClipboard, { label: "Copy SVG", onCopy: this.getSvg.bind(this) }), /*#__PURE__*/ React.createElement("div", null, "Rendered in ", renderTime, " ms")), /*#__PURE__*/ React.createElement("div", { ref: "svg" }, /*#__PURE__*/ React.createElement("svg", { onTouchstart: this.inverse, onClick: this.inverse, width: canvas.width, height: canvas.height, viewBox: `0 0 ${canvas.width} ${canvas.height}`, version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlns_xlink: "http://www.w3.org/1999/xlink" }, /*#__PURE__*/ React.createElement("path", { d: d, "stroke-width": ".01px", stroke: maxrun > 0 ? "rgba(200,66,0,.4)" : "rgba(255,0,1,.4)", fill: "none" }))))); }} class App extends React.Component { constructor(props) { super(props); this.state = { type: this.props.type || "L", step: parseFloat(this.props.step), subtract: parseFloat(this.props.subtract), accelerate: parseFloat(this.props.accelerate) }; this.update.bind(this); } update(example) { let type = this.refs.type.value; let step = this.refs.step.value; let subtract = this.refs.subtract.value; let accelerate = this.refs.accelerate.value; var temp = example.target.value.split(","); if (temp.length === 4) { type = temp[0] || "L"; step = parseFloat(temp[1]); subtract = parseFloat(temp[2]); accelerate = parseFloat(temp[3]); } this.setState({ type: type, step: step, subtract: subtract, accelerate: accelerate }); } toggle() { document.body.classList.toggle("inverse"); } render() { return /*#__PURE__*/( React.createElement("div", null, /*#__PURE__*/ React.createElement("div", { className: "controls" }, /*#__PURE__*/ React.createElement("label", { class: "select" }, /*#__PURE__*/ React.createElement("select", { onChange: this.update.bind(this) }, /*#__PURE__*/ React.createElement("option", { value: "L,226.75,0.14,0.002" }, "Flower"), /*#__PURE__*/ React.createElement("option", { value: "C,90,0.362,0" }, "Curve 1"), /*#__PURE__*/ React.createElement("option", { value: "C,225,-0.011,0.002" }, "Curve 2"), /*#__PURE__*/ React.createElement("option", { value: "C,120,-0.088,0.067" }, "Curve 3"), /*#__PURE__*/ React.createElement("option", { value: "Q,252,-4.928,.2" }, "Quadratic 1"), /*#__PURE__*/ React.createElement("option", { value: "Q,90.75,0.362,0" }, "Quandratic 2"), /*#__PURE__*/ React.createElement("option", { value: "Q25.75,0.351,0" }, "Quandratic 3"), /*#__PURE__*/ React.createElement("option", { value: "L,225,-0.011,0.002" }, "Line 1"), /*#__PURE__*/ React.createElement("option", { value: "L,166.5,0,0.05" }, "Beautiful 1"), /*#__PURE__*/ React.createElement("option", { value: "L,127,0.193,0" }, "A.S.Hansen"), /*#__PURE__*/ React.createElement("option", { value: "L,306.75,0.197,0" }, "Beautiful 2"), /*#__PURE__*/ React.createElement("option", { value: "L,206.75,2.061,0" }, "Beautiful 3"), /*#__PURE__*/ React.createElement("option", { value: "L,185.75,0.14,0.002" }, "Beautiful 4"), /*#__PURE__*/ React.createElement("option", { value: "L,130.75,0.247,0" }, "Beautiful 5"), /*#__PURE__*/ React.createElement("option", { value: "L,288.25,0.14,0.002" }, "Beautiful 6"), /*#__PURE__*/ React.createElement("option", { value: "L,44.5,0,0.022" }, "Classic 1"), /*#__PURE__*/ React.createElement("option", { value: "L,157.5,0.237,0" }, "Classic 2"), /*#__PURE__*/ React.createElement("option", { value: "L,188.5,0.247,0" }, "Intense 1"), /*#__PURE__*/ React.createElement("option", { value: "L,179.5,0.19,0" }, "Intense 2"), /*#__PURE__*/ React.createElement("option", { value: "L,215.25,-3.003,0.004" }, "Very intense 1"), /*#__PURE__*/ React.createElement("option", { value: "L,226.75,-1.308,0.002" }, "Very intense 2"), /*#__PURE__*/ React.createElement("option", { value: "L,188.5,-5,0" }, "Very intense 3"), /*#__PURE__*/ React.createElement("option", { value: "L,190,0.085,0" }, "Awesomeeeee"), /*#__PURE__*/ React.createElement("option", { value: "L,225,-0.011,0.002" }, "Optical Illusion"))), /*#__PURE__*/ React.createElement("label", { class: "select" }, /*#__PURE__*/ React.createElement("select", { ref: "type", onChange: this.update.bind(this), value: this.state.type }, /*#__PURE__*/ React.createElement("option", { value: "L" }, "Line"), /*#__PURE__*/ React.createElement("option", { value: "Q" }, "Quadratic"), /*#__PURE__*/ React.createElement("option", { value: "C" }, "Curveto"))), /*#__PURE__*/ React.createElement("label", null, "step (", this.state.step, ")", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/ React.createElement("input", { ref: "step", onChange: this.update.bind(this), type: "range", min: "1", max: "355", step: ".025", autoInput:(2600), value: this.state.step })), /*#__PURE__*/ React.createElement("label", null, "Subtract (", this.state.subtract, ")", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/ React.createElement("input", { ref: "subtract", onChange: this.update.bind(this), type: "range", min: "-5", max: "5", step: ".001", value: this.state.subtract })), /*#__PURE__*/ React.createElement("label", null, "Accelerate (", this.state.accelerate, ")", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/ React.createElement("input", { ref: "accelerate", onChange: this.update.bind(this), type: "range", min: "0", max: ".9", step: ".001", value: this.state.accelerate }))), /*#__PURE__*/ React.createElement(MySVG, { type: this.state.type, step: this.state.step, subtract: this.state.subtract, accelerate: this.state.accelerate }))); }} const draw = () => { ReactDOM.render( /*#__PURE__*/ React.createElement(App, { step: "426.75", subtract: ".004", accelerate: ".002" }), document.querySelector(".app")); }; window.onresize = draw; document.onresize = draw; draw(); 4b:T55c,function drawScene(gl, programInfo, buffers) { // Convert from the clip space values (gl_Position) to back into screen space (pixels). gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); // Set the specified WebGLProgram as part of the current rendering state gl.useProgram(programInfo.program); // Set the shader uniforms gl.uniform2f( programInfo.uniformLocations.resolutionUniformLocation, gl.canvas.width, gl.canvas.height ); // Set the shader position attribute gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer()); // bind position buffer to ARRAY_BUFFER gl.enableVertexAttribArray( programInfo.attribLocations.positionAttributeLocation ); // enable individual attributes const size = 2; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.vertexAttribPointer( programInfo.attribLocations.positionAttributeLocation, 2, type, normalize, 0, 0 ); // Binds the buffer currently bound to gl.ARRAY_BUFFER to a generic vertex attribute setRectangle(gl, 0, 0, width, width); // The rectangle covers the whole space. const primitiveType = gl.TRIANGLES; // Draws a triangle for a group of three vertices const count = 6; // Specify the number of indices (vertices) to be rendered gl.drawArrays(primitiveType, 0, 6); // Render primitives from array data }4c:[] 29:{"id":"55200c059faa5d6a","slug":null,"title":"WebGL Chladni","thumbnail":"9341bc595ded23d0ae8dcf1b5253db42dc260746cf50994f6d0727b03f529f45","access_level":"public","create_time":"$D2023-08-17T12:01:40.258Z","update_time":"$D2023-08-17T13:40:47.385Z","view_time":null,"first_public_time":"$D2023-08-17T12:01:40.258Z","has_unpublished_edits":null,"fork":{"id":"ff8dd55b20553c17","slug":null,"title":"WebGL Chladni","owner":{"id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","bio":"Video artist and data nerd,","following":false},"version":456,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"bio":"I make art, code and applications that integrate ai and machine learning for musicians and artists. My own music project is Les Barons | The Barons","following":false}],"members":[{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","role":"editor"},{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"WebGL Chladni","cells":[{"id":0,"value":"md`# WebGL Chladni`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof gl = {\n const canvas = DOM.canvas(width, width);\n const gl = (canvas.value = canvas.getContext(\"webgl\"));\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"$49","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"viewof a = autoInput(2600)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof b = autoInput(5000)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"viewof m = autoInput(6100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"viewof n = autoInput(4100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"function* autoInput(cycle) {\n let ui = html``;\n let auto = true;\n ui.oninput = () => {\n auto = false;\n };\n while (auto) {\n ui.value = (Math.sin(Date.now() / cycle) + 1) * 10;\n yield ui;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"{\n gl.uniform1f(u_a, a);\n gl.uniform1f(u_b, b);\n gl.uniform1f(u_m, m);\n gl.uniform1f(u_n, n);\n gl.drawArrays(gl.TRIANGLES, 0, 6);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"u_a = gl.getUniformLocation(program, \"u_a\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"u_b = gl.getUniformLocation(program, \"u_b\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"u_m = gl.getUniformLocation(program, \"u_m\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"u_n = gl.getUniformLocation(program, \"u_n\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"fsSource = `\n// Fragment shader provides colors (gl_FragColor)\n\nprecision mediump float;\nvarying vec2 v_position;\n\nuniform float u_a;\nuniform float u_b;\nuniform float u_m;\nuniform float u_n;\nhighp float pi = 3.14159256358979323;\n\nvoid main() {\n gl_FragColor = vec4(0., 0., 0., u_a * sin(pi * u_n * v_position.x)\n * sin(pi * u_m * v_position.y) + u_b\n * sin(pi * u_m * v_position.x)\n * sin(pi * u_n * v_position.y));\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"vsSource = `\n// Vertex shader provides clipspace coordinates (gl_Position)\n\nattribute vec2 a_position;\nuniform vec2 u_resolution;\nvarying vec2 v_position;\n\nvoid main() {\n // Attribute a_position is in screen space coordinates so we need to convert them into clip space,\n // clip space values belong to [-1, 1].\n gl_Position = vec4((a_position / u_resolution * 2. - 1.) * vec2(1, -1), 0., 1.);\n\n v_position = gl_Position.xy;\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"sceneRenderingBlock = {\n // Create program, load shaders and link them.\n\n const programInfo = {\n program: program,\n attribLocations: {\n // Look up attributes, `getAttribLocation` returns the location\n // of an attribute variable in a given program.\n positionAttributeLocation: gl.getAttribLocation(program, \"a_position\")\n },\n uniformLocations: {\n // Look up uniforms, `getUniformLocation` returns the location\n // of a specific uniform variable in a given program.\n resolutionUniformLocation: gl.getUniformLocation(program, \"u_resolution\")\n }\n };\n\n drawScene(gl, programInfo);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"function setRectangle(gl, x, y, width, height) {\n const x1 = x;\n const x2 = x + width;\n const y1 = y;\n const y2 = y + height;\n\t\n // Initialize and create the buffer object's data store, a rectangle is draw by means of two triangles.\n gl.bufferData(\n gl.ARRAY_BUFFER, // Set the buffer containing vertex attributes as the target\n new Float32Array([\n\t x1, y1,\n x2, y1,\n x1, y2,\n x1, y2,\n x2, y1,\n x2, y2]), // Data copied into the data store\n gl.STATIC_DRAW // Contents of the buffer are likely to be used often and not change often\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"program = {\n const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);\n const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);\n\n const shaderProgram = gl.createProgram();\n gl.attachShader(shaderProgram, vertexShader);\n gl.attachShader(shaderProgram, fragmentShader);\n gl.linkProgram(shaderProgram);\n\n const success = gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);\n if (!success) {\n console.log(gl.getProgramInfoLog(shaderProgram));\n throw new Error(`Couldn't link shader`);\n gl.deleteProgram(shaderProgram);\n }\n\n return shaderProgram;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"function loadShader(gl, type, source) {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n\n const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)\n if (!success) {\n console.log(gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n throw new Error(`Couldn't compile shader`);\n }\n\n return shader;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null