First step/part of sketch to apply parametric equations and sinusoidal functions in generative art—based of this great video Recreating Vintage Computer Art with Processing
Last active
May 23, 2017 11:13
-
-
Save eesur/48438950054932863cd85d1d7fa090ca to your computer and use it in GitHub Desktop.
d3 | parametric equations
This file contains 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
| var s = d3.select('#vis') //selection | |
| var t = 0 // increment | |
| var w = 960 | |
| var h = 400 | |
| var reps = 1500 // number of repetitions | |
| var colorRainbow = d3.scaleSequential() | |
| .domain([0, reps]) | |
| .interpolator(d3.interpolateRainbow) | |
| function update(_t) { | |
| s.append('circle') | |
| .attrs({ | |
| cx: x(_t), | |
| cy: y(_t) + (h/2), | |
| r: d3.randomUniform(2, 7)(), | |
| fill: colorRainbow(_t) | |
| }) | |
| } | |
| // parametric equations | |
| function x(n) { | |
| return Math.sin(n / 10) * 100 + Math.sin(n / 15) * 100 | |
| } | |
| function y(n) { | |
| return Math.cos(n / 10) * 100 | |
| } | |
| // update | |
| d3.interval(function() { | |
| if (t < reps) { | |
| t++ | |
| update(t) | |
| } | |
| }, d3.randomUniform(8, 24)()); | |
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <svg width="960" height="400"> | |
| <g id="vis" transform="translate(450, 10)"></g> | |
| </svg> | |
| <script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script> | |
| <script src="//d3js.org/d3-selection-multi.v1.min.js"></script> | |
| <!-- d3 code --> | |
| <script src=".script-compiled.js" charset="utf-8"></script> | |
| </body> | |
| </html> | |
This file contains 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 s = d3.select('#vis') //selection | |
| let t = 0 // increment | |
| const w = 960 | |
| const h = 400 | |
| const reps = 1500 // number of repetitions | |
| const colorRainbow = d3.scaleSequential() | |
| .domain([0, reps]) | |
| .interpolator(d3.interpolateRainbow) | |
| function update(_t) { | |
| s.append('circle') | |
| .attrs({ | |
| cx: x(_t), | |
| cy: y(_t) + (h/2), | |
| r: d3.randomUniform(2, 7)(), | |
| fill: colorRainbow(_t) | |
| }) | |
| } | |
| // parametric equations | |
| function x(n) { | |
| return Math.sin(n / 10) * 100 + Math.sin(n / 15) * 100 | |
| } | |
| function y(n) { | |
| return Math.cos(n / 10) * 100 | |
| } | |
| // update | |
| d3.interval(function() { | |
| if (t < reps) { | |
| t++ | |
| update(t) | |
| } | |
| }, d3.randomUniform(8, 24)()); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment