Last active
April 19, 2023 01:50
-
-
Save stepjue/ab15dcf7b21b5d7217c486061bb350a2 to your computer and use it in GitHub Desktop.
Animated GIF made for Genuary 2021 Day 9: Interference patterns https://genuary2021.github.io/prompts#jan8. Uses the canvas-sketch framework: https://github.com/mattdesl/canvas-sketch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const canvasSketch = require('canvas-sketch'); | |
| const settings = { | |
| dimensions: [ 800, 800 ], | |
| animate: true, | |
| duration: 7.5, | |
| fps: 24 | |
| }; | |
| const sketch = () => { | |
| /** | |
| * @param {{context: CanvasRenderingContext2D}} | |
| */ | |
| const render = ({ context, width, height, playhead }) => { | |
| context.fillStyle = 'black' | |
| context.fillRect(0, 0, width, height) | |
| context.globalCompositeOperation = 'screen' | |
| const sinPi = (freq) => Math.sin(freq * Math.PI * playhead) | |
| const drawCurves = (freq, cp1Factor, cp2Factor, color) => { | |
| const numExtraCurves = 3 | |
| const numCurves = 8 | |
| for (let i = -numExtraCurves; i < numCurves + numExtraCurves; i++) { | |
| const frac = i / numCurves | |
| const anchorX = frac * width | |
| const yOffset = height/2 + (height/5 * sinPi(freq)) + 60 | |
| const curviness = 200 | |
| const yPadding = 35 | |
| const controlPointSpread = 20 | |
| const start = { x: anchorX, y: yPadding } | |
| const cp1 = { x: anchorX + cp1Factor * curviness * sinPi(2), y: yOffset} | |
| const cp2 = { x: anchorX + cp2Factor * curviness * sinPi(4), y: yOffset + controlPointSpread } | |
| const end = { x: anchorX, y: height - yPadding } | |
| context.strokeStyle = color | |
| context.lineWidth = 40 | |
| context.lineCap = 'round' | |
| context.beginPath() | |
| context.moveTo(start.x, start.y) | |
| context.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y) | |
| context.stroke() | |
| } | |
| } | |
| drawCurves(3, 2, 3, "#ff0000") | |
| drawCurves(2, 4, 2, "#00ff00") | |
| drawCurves(2, 4, 4, "#0000ff") | |
| }; | |
| return render; | |
| }; | |
| canvasSketch(sketch, settings); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment