31:T87d,sinWave = whenVisible(async function({ bias = 0, amp = 1, period = 1, phase = 0, yRange, yScale = 1, axes = true }) { const lineWidth = 2; const range = yRange || [-100, 100]; const height = range[1] - range[0] + 10; const xd = -range[1] + lineWidth; const fn = x => bias + amp * sin(x / period + phase); const y = x => yScale * fn(x); const data = Array(width) .fill() .map((_, x) => [x, y(x)]); const path = data .map(p => `L${p.join(' ')}`) .join(' ') .replace('L', 'M'); function createSvg() { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const g = svg.append("g").attr("transform", `translate(50, ${height / 2})`); if (axes) { const xscale = d3 .scaleLinear() .domain([0, width]) .range([0, width]); const x_axis = d3 .axisBottom() .scale(xscale) .ticks(); svg .append("g") .attr("transform", `translate(50, ${height / 2})`) .call(x_axis); const yscale = d3 .scaleLinear() .domain([range[0] / yScale, range[1] / yScale]) .range(range); const y_axis = d3 .axisLeft() .scale(yscale) .ticks(); g.call(y_axis); } g.append("path").attr("fill", "none"); return svg; } const svg = thisCached('svg', createSvg); svg .select("g") .select("path") .attr("d", path) .attr("stroke-width", lineWidth) .attr("stroke", "blue"); const fmt = d3.format("0.1f"); const phaseStr = d3.format("0.0f")( phase ); const eqn = `${fmt(amp)} * \\sin (x° / ${fmt(period)} + ${phaseStr}°) + ${fmt(bias)}`; const code = `${fmt(amp)} * sin(x / ${fmt(period)} + ${phaseStr}) + ${fmt(bias)}`; return md` ${svg.node()}

	Math	Code
	${tex`y = ${simplifyEqn(eqn).replace(' * ', '')}`}	${md`\`\`\`javascript let y = ${simplifyEqn(code)} \`\`\``}

`; })32:T6b6,bouncingBallsWithTrails = phases => p5(sketch => { const height = 100; const radius = 20; const toObject = n => typeof n === 'number' || n.hasOwnProperty("value") ? { phase: n } : n; const circles = phases.map(objOrValue => ({ period: 10, phase: 0, ...toObject(objOrValue) })); let pg; let pmillis; const resolve = value => value.hasOwnProperty("value") ? value.value : value; sketch.setup = () => { sketch.createCanvas(width, height); sketch.angleMode(sketch.DEGREES); sketch.colorMode(sketch.HSB); sketch.noStroke(); pg = sketch.createGraphics(width, height); pg.background(255); pg.colorMode(sketch.HSB); pg.noStroke(); circles.forEach((obj, i) => { obj.hue = obj.hue || circles.length === 1 ? 240 : sketch.map(i, 0, circles.length - 1, 0, 240); }); pmillis = sketch.millis(); }; sketch.draw = () => { const scroll = sketch.max( -1, sketch.round((sketch.millis() - pmillis) / (1000 / 30)) ); pmillis = sketch.millis(); pg.image(pg, -scroll, 0); sketch.image(pg, 0, 0); for (const { period, phase, hue, x } of circles) { const x = width - radius; const y = sketch.map( sketch.sin(sketch.millis() / period + resolve(phase)), -1, 1, radius, height - radius ); pg.fill(hue, 100, 100, .005); pg.circle(x, y, radius); pg.fill(hue, 100, 100, .005); pg.circle(x, y, radius * .8); sketch.fill(hue, 100, 100); sketch.circle(x, y, radius); } }; })33:[] 2f:{"title":"sin() basics for Creative Coding","cells":[{"id":0,"value":"md`# \\`sin()\\` basics for Creative Coding\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"md`This is a sine wave.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"sinWave({ yScale: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"md`In [p5.js](https://p5js.org), it is produced by plotting \\`y = sin(x)\\`:\n\n\\`\\`\\`javascript\nfor (let x = 0; x < width; x++) {\n let y = 100 + 100 * sin(x);\n circle(x, y, 1);\n}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"md`It\\'s useful for drawing, for example, a wave shape:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"sinWaveFill()","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"md`\\`sin()\\` can also be used to add smooth periodic motion to an object:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"bouncingBallWithEqn()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"md`You can see the relationship between the motion (where \\`sin()\\` is a function of time), and the wave shape (where \\`sin()\\` is a function of horizontal position), by tracing the shape's position.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1111,"value":"bounceTrail()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"md`(You may see holes in the trail. This is where the browser is not keeping up with the animation frame rate, and the ball skips animation frames.\nIf the code used \\`frameCount\\` instead of \\`millis()\\`, it would not leave these gaps. Instead, the animation itself would speed up and slow down.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"md`You even add periodic motion to a wave shape, by making each *y* position depend on both _x_ **and** _time_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"sinWaveFill(now / 10, \" + millis() / 10\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":799,"value":"md`Other uses of sine are not covered in this notebook. Sine can be used to arrange items in a circle, as well as for a variety of more complex uses such as generating a field that can be used to vary the color, size, or other properties of shapes, or influence the paths of objects as they move through the field. See the course notes, the course readings, and the materials from Prof. Moon's workshop, for more on some of these uses.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"md`# Scaling the wave vertically`","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"md`The sine wave at the top of this page has a range from -1 to 1. (Note the labels on the _y_ axis.) This graph is scaled so that a unit change to y is 100 pixels on the screen.\n\nDrawn at a 1:1 scale, the sine wave looks like the image below. Note that we can just barely see the blue line. It wobbles up and down by two pixels. (This is the difference between the maximum value ${tex`\\sin(90\\degree) = 1`} and the minimum value ${tex`\\sin(270\\degree) = -1`}.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"sinWave({ yRange: [-10, 10], axes: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"md`To scale the the graph vertically, multiply \\`sin()\\`'s return value by the scaling factor:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"sinWave({amp: periodic(0, 100)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"{\n const amp = periodic(0, 100).toFixed(0);\n return md`We could also use \\`map()\\`, to map the return value of \\`sin()\\` from the ${tex`\\sin`} function's range of -1…1 to a target range of, for example, -${amp}…${amp}:\n\n\\`\\`\\`javascript\nlet y = ${amp} * sin(x);\nlet y = map(sin(x), -1, 1, -${amp}, ${amp}); // 👈 equivalently\nlet y = map(sin(x), 0, 1, 0, ${amp}); // 👈 equivalently\n\\`\\`\\`\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"md`# Stretching the wave horizontally\n\nIn order to stretch the wave out horizontally, divide x by a number before taking its sine.\nThe larger the number, the greater the distance from peak to peak.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"sinWave({amp: 100, period: periodic(1, 5)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1213,"value":"md`You can also think of this as _slowing down_ the wave – or the motion of an object that is moving with the wave.\nThe larger the divisor, the slower the motion.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"bouncingBallWithEqn({ period: stretch })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1271,"value":"viewof stretch = Range([1, 40], {step: 1, value: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"md`# Sliding the wave horizontally`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"sinWave({ amp: 100, phase: (now / 10) % 360 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"md`Often you do this when you have two waves, in get them out of sync with each other.\n\nThis is especially useful when the waves are used to animate different objects.\nUsing different phases moves at the same rate, but they reach their maximum and minimum positions at different times.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1806,"value":"{\n return md` `;\n // const b1 = bouncingBall({ phase: phase1, color: \"red\", width: 20 });\n // const b2 = bouncingBall({ phase: phase2, width: width / 2 });\n // for (const b of b1) {\n // await visibility();\n // yield md`

${b}

`;\n // }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1845,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"bouncingBallsWithTrails([viewof phase1, viewof phase2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"viewof phase1 = Range([0, 360], {step: 1, value: 0, label: \"Red phase\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"viewof phase2 = Range([0, 360], {step: 1, value: 90, label: \"Blue phase\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"md`# Sliding the wave vertically\n\nAdd a constant to \\`sin()\\`'s result, in order to translate the wave vertically.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"sinWave({bias: periodic(-100,100), amp: 100, yRange: [-200, 200]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":765,"value":"md`In order to scale and translate the wave simultaneously, for example to map its output into a range that is specified by its minimum and maximum values, you can use \\`map()\\` instead of multiplying and adding. For example, to create a wave that fills the canvas from top to bottom, you could write any of the following:\n\n\\`\\`\\`javascript\ny = height / 2 + height / 2 * sin(x);\ny = height * (sin(x) + 1) / 2;\ny = height * map(sin(x), -1, 1, 0, 1);\ny = map(sin(x), -1, 1, 0, height);\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"md`# Everything at once`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"md`The general form of the equation is\n\n\n\n\n\n\n\n

Math	${tex`y = A \\sin(x / B + C) + D`}
Code	\n\\`\\`\\`\ny = amp * sin(x / periodish + scaledPhase) + bias\n\\`\\`\\`\n

\n\nPlay around with the sliders below, and see how they affect the size and shape of the wave.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"sinWave({bias: biasSlider, amp: ampSlider, phase: phaseSlider, period: periodSlider, yRange: [-200, 200]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"viewof ampSlider = Range([-100, 100], {step: 1, value: 100, label: \"Amplitude (A)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1420,"value":"viewof periodSlider = Range([0.5, 10], { step: 0.1, value: 1, label: \"Period / 360° (B)\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"viewof phaseSlider = Range([0, 360], {step: 1, value: 0, label: \"Phase-ish (C)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"viewof biasSlider = Range([-100,100], {step: 1, label: \"Bias (D)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"md`# Deets\n\n## Other Forms of the sin equation\n\nThe code above uses the equation:\n\n> ${tex`y = A \\sin(x / B + C) + D`}\n\nI will call this the _**exploratory form**_ of the equation. It is convenient in creative coding, where the parameters (the values of _A_, _B_, _C_, and _D_) are generally arrived at through trial and error – exploration – in order to _create an effect_, rather than _derived from a physical model_. It is common in this context to start with a sine of the frame count or milliseconds and then _slow it down_.\n\nIn math and physics, you will often see this form:\n\n> ${tex`y = A \\sin(Bx - C) + D`}\n\nThe physics form of the equation is of course equivalent to the exploratory form, where ${tex`B_{\\textrm{exploratory}} = 1/B_{\\textrm{physics}}`} and ${tex`C_{\\textrm{exploratory}} = -C_{\\textrm{physics}}`}.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"md`\n## Why it works\n\n(Under construction.)\n\nConsider this hybrid form:\n\n> ${tex`y = A \\sin(x/B-C)+D`}\n\nIt can be rearranged:\n\n> ${tex`y/A - D' = sin(x/B-C)`}, where ${tex`D' = D/A`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"md`These are the functions that implement the illustrations and animations above.\n\nSince I developed this page incrementally, without a clear roadmap in mind, these use a variety of different strategies. There are functions that do almost the same thing, that haven't been consolidated.\n\nSome functions use SVG, via the D3 SVG API. Other's are in P5, using the Tom MacWright's p5 -> Observable adaptor.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1397,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"import { p5 } from \"@tmcw/p5\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1263,"value":"import {debounce} from \"@mbostock/debouncing-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1272,"value":"import {Range} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1401,"value":"md`## Utility Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1518,"value":"sin = x => Math.sin(x * Math.PI / 180)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1118,"value":"map = (x, a, b, c, d) => ((x - a) / (b - a)) * (d - c) + c;","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":" periodic = {\n const rec = (a, b) => b ? a + rec(b-a) : a/2 + a/2 * Math.sin(now / 2000);\n return rec;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1405,"value":"md`## Graphing and Animation Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1625,"value":"// Return a function that runs fn() immediately, the first time. This handles thumbnails.\n// Then run it only once the cell is visible.\nasync function whenVisible(fn) {\n return async function(...args) {\n if (this) await visibility();\n return fn(...args);\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1634,"value":"function thisCached(key, thunk) {\n if (!this) return thunk();\n let cache = this.__thisCache;\n if (!cache) {\n this.__thisCache = cache = new Map();\n }\n if (cache.has(key)) {\n return cache.get(key);\n } else {\n let value = thunk();\n this.set(key, value);\n return value;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1650,"value":"sinWave({ amp: 100, bias: -10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":802,"value":"function sinWaveFill(phase = 0, suffix = \"\") {\n const period = 1;\n const height = 100;\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n const fn = x => 25 + 25 * sin(x / period + phase);\n const pts = [\n [0, height],\n ...Array(width)\n .fill()\n .map((_, x) => [x, fn(x)]),\n [width, height]\n ];\n const path = pts\n .map(([x, y]) => `L${x},${y}`)\n .join(\" \")\n .replace(\"L\", \"M\");\n svg\n .append(\"path\")\n .attr(\"d\", path)\n .attr(\"fill\", \"blue\");\n const eqn = `map(sin(x / ${period.toFixed(\n 0\n )}${suffix}), -1, 1, 0, ${height.toFixed(0)})`.replace(/ \\/ 1(?=[^\\d.])/, '');\n return md`${svg.node()}\n${`\\`\\`\\`javascript\nlet y = ${eqn}\n\\`\\`\\``}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":883,"value":"async function* bouncingBalls(ballSpecs = [{}, {}]) {\n const specs = ballSpecs.map(spec => ({\n period: 10,\n phase: 0,\n radius: 20,\n color: \"blue\",\n amp: 75,\n ...spec\n }));\n const height = Math.max(\n ...specs.map(({ radius, amp }) => 2 * (radius + amp))\n );\n const fn = ({ period, phase, amp }) =>\n map(sin(new Date() / period + phase), 0, 1, height / 2, height / 2 + amp);\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n const circles = svg\n .selectAll(\"circle\")\n .data(specs)\n .enter()\n .append(\"circle\")\n .attr(\"cx\", (_, i) => ((i + 1) * width) / (specs.length + 1))\n .attr(\"r\", d => d.radius)\n .attr(\"fill\", d => d.color);\n\n while (true) {\n svg\n .selectAll(\"circle\")\n .data(specs)\n .attr(\"cy\", fn);\n yield svg.node();\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1855,"value":"async function* bouncingBallWithEqn({\n amp = 150,\n period = 10,\n radius = 20\n} = {}) {\n const eqn = md`\\`\\`\\`javascript\n let y = map(sin(millis() / ${period.toFixed(0)}), -1, 1, 0, ${amp.toFixed(\n 0\n )})\\`\\`\\``;\n const bs = await bouncingBalls([{ radius, period, amp }]);\n const div = md`${(await bs.next()).value}\\n${eqn}}`;\n\n while (true) {\n await bs.next();\n yield div;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1822,"value":"false &&\n bouncingBalls([\n { phase: phase1, color: \"red\" },\n { phase: phase1, color: \"blue\" }\n ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1083,"value":"function* bounceTrail({ period = 10, radius = 10, height = 200 } = {}) {\n const eqn = `\\`\\`\\`javascript\nmap(sin(millis() / ${period.toFixed(0)}), -1, 1, 0, ${(\n height -\n 2 * radius\n ).toFixed(0)})\\`\\`\\``;\n for (let elt of bouncingBallsWithTrails([{ period }])) {\n yield md`${elt}\nlet y = ${eqn}\n`;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1229,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1753,"value":"bouncingBallsWithTrails([0, { period: 90 }])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1503,"value":"function simplifyEqn(eqn) {\n return eqn\n .replace(/\\.0+(?=[^\\d]|$)/g, '')\n .replace(/ 1 \\* /, ' ')\n .replace(/^1 \\* /, '')\n .replace(' / 1 ', ' ')\n .replace(/^0 \\+ /, '')\n .replace(/ \\+ [−-]/g, ' - ')\n .replace(/ \\+ 0$/, '')\n .replace(/ \\+ 0°?(?=[^0-9.])/, '')\n .replace(/sin \$([^\\+/]+?)\$/, 'sin $1');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1505,"value":"simplifyEqn(\"100.0 * sin(x / 1.0 + 0) + −10.0\")\n// simplifyEqn(\"x + −10.0\")\n// \"x + 10.0\".replace(\"-\", \" x-x \")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}