30:T94e,{ // const width = 300; const height = width/4; const context = DOM.context2d(width, height); function calcSineY(x, f, p) { // This is the meat (unles you are vegan) // Note that: // h is the amplitude of the wave // x is the current x value we get every time interval // 2 * PI is the length of one cycle (full circumference) // f/w is the frequency fraction const mH = width/2 return mH - mH * Math.sin( x * 2 * Math.PI * (f/width) + p*.05); } const myF = (x, p) => 0.1*calcSineY(x, a1, p) + 0.05*calcSineY(x, a1*mult, p); let t = 0; var stop = false; var frameCount = 0; var fpsInterval, startTime, now, then, elapsed; function render(t) { //clear context.fillStyle = "rgb(255, 255, 255,1)" context.fillRect(0,0 , width, height) context.save() context.beginPath(); // Draw a new path context.moveTo(0,myF(0, t)); // Where to start drawing context.strokeStyle = "gray"; // Pick a color for(var i=1;i fpsInterval) { then = now - (elapsed % fpsInterval); render(t) t++; } } function startAnimating(fps) { fpsInterval = 1000 / fps; then = Date.now(); startTime = then; animate(); } startAnimating(60) // render(0) return context.canvas; }31:Ta81,{ // const width = 300; const height = width/4; const xScale = d3.scaleLinear() .domain([0, 1]) .range([0, width]) const yScale = d3.scaleLinear() .domain([-1, 1]) .range([height, 0]) const context = DOM.context2d(width, height); let t = 0; var stop = false; var frameCount = 0; var fpsInterval, startTime, now, then, elapsed; function render(t) { //clear context.fillStyle = "rgb(255, 255, 255,1)" context.fillRect(0,0 , width, height) const data = genData({f:object.f1, amp:object.a1, phase:object.p1, t: t*.02}) context.save() context.beginPath(); // Draw a new path context.moveTo(0,xScale(data[0].x), yScale(data[0].y)); // Where to start drawing context.strokeStyle = "gray"; // Pick a color data.forEach(d => { context.lineTo(xScale(d.x), yScale(d.y)) }) // for(var i=1;i { context.lineTo(xScale(d.x), yScale(d.y)) }) // const A2 = 0.8 // context.beginPath(); // Draw a new path // context.moveTo(0,A2 * myF(0, t*.8)); // Where to start drawing // context.strokeStyle = "gray"; // Pick a color // for(var i=1;i fpsInterval) { then = now - (elapsed % fpsInterval); render(t) t++; } } function startAnimating(fps) { fpsInterval = 1000 / fps; then = Date.now(); startTime = then; animate(); } startAnimating(60) // render(0) return context.canvas; }32:T5f2,chart = { const width = 400; const height = 300 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) const baseline = genData({}) const d1 = genData({f:object.f1, amp:object.a1, phase:object.p1}) const d2 = genData({f:object.f2, amp:object.a2, phase:object.p2}) const xScale = d3.scaleLinear() .domain([0, 1]) .range([0, width]) const yScale = d3.scaleLinear() .domain([-1, 1]) .range([height, 0]) const area = d3.area() // .curve(curve) .x(d => xScale(d.x)) .y0(height/2) .y1(d => yScale(d.y)) console.log(xScale(300)) const xAxis = g => g .attr("transform", `translate(0,${height/2})`) .call(d3.axisBottom(xScale).ticks(width / 80)) const yAxis = g => g .attr("transform", `translate(${width/2},0)`) .call(d3.axisLeft(yScale).ticks(height / 100)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold")) svg.append("path") .datum(baseline) .attr("fill", "#F7FAFC") .attr("d", area); svg.append("path") .datum(d1) .attr("fill", "#63B3ED") .attr("d", area); svg.append("path") .datum(d2) .attr("fill", "#2C5282") .attr("d", area); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }33:[] 2e:{"title":"Waves","cells":[{"id":0,"value":"md`# Waves\n\nInspired by: https://reactweek.nyc/`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof a1 = slider({\n min: 0.1,\n max: 2,\n step: .1,\n value: 1,\n description:\n \"a1\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"viewof mult = slider({\n min: 0.1,\n max: 10,\n step: .1,\n value: 4,\n description:\n \"mult\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"viewof object = new View({a1: 0.3, f1: 1.1, p1: 0.08, a2: 0.1, f2: 2.7, p2: 0.27})","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"object","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"bindForm(html``, viewof object)","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"genData = ({f=1, phase=0, amp=1, t=0}) => {\n return Array.from({length: N_PTS}).map((_,d) => { \n return {\n x: d/N_PTS,\n y: amp*Math.sin(d*f*2*Math.PI/N_PTS + phase*2*Math.PI + t)\n }\n })\n \n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"N_PTS = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"function bindForm(form, view) {\n \n for (const input of form.elements) {\n if (input.disabled || !input.hasAttribute(\"name\")) continue;\n \n const name = input['name'];\n \n input.value = view.value[name];\n input.oninput = () => {\n view.setProp(name, input.valueAsNumber)\n }; \n }\n \n function update({prop, value}) {\n // if (!isNaN(value) && input.valueAsNumber !== value) {\n // input.value = e.value;\n // }\n }\n\n view.addEventListener(\"input\", update);\n \n \n \n return Generators.disposable(form, () => {\n view.removeEventListener(\"input\", update);\n });\n}\n\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"class View {\n constructor(value) {\n Object.defineProperties(this, {\n _list: {value: [], writable: true},\n _value: {value, writable: true}\n });\n }\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent({type: \"input\", value});\n }\n setProp(prop, value) {\n this._value[prop] = value\n this.dispatchEvent({type: \"input\", prop, value});\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}

Signal 1

Signal 2