Difference between revisions of "Test"
From 2628Climator
Apsyllidis (Talk | contribs) |
Apsyllidis (Talk | contribs) |
||
Line 57: | Line 57: | ||
</style> | </style> | ||
+ | <button onclick="transition()">Update</button> | ||
+ | <script src="http://d3js.org/d3.v3.min.js"></script> | ||
+ | <script> | ||
+ | |||
+ | var n = 20, // number of layers | ||
+ | m = 200, // number of samples per layer | ||
+ | stack = d3.layout.stack().offset("wiggle"), | ||
+ | layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })), | ||
+ | layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); })); | ||
+ | |||
+ | var width = 960, | ||
+ | height = 500; | ||
+ | |||
+ | var x = d3.scale.linear() | ||
+ | .domain([0, m - 1]) | ||
+ | .range([0, width]); | ||
+ | |||
+ | var y = d3.scale.linear() | ||
+ | .domain([0, d3.max(layers0.concat(layers1), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })]) | ||
+ | .range([height, 0]); | ||
+ | |||
+ | var color = d3.scale.linear() | ||
+ | .range(["#aad", "#556"]); | ||
+ | |||
+ | var area = d3.svg.area() | ||
+ | .x(function(d) { return x(d.x); }) | ||
+ | .y0(function(d) { return y(d.y0); }) | ||
+ | .y1(function(d) { return y(d.y0 + d.y); }); | ||
+ | |||
+ | var svg = d3.select("body").append("svg") | ||
+ | .attr("width", width) | ||
+ | .attr("height", height); | ||
+ | |||
+ | svg.selectAll("path") | ||
+ | .data(layers0) | ||
+ | .enter().append("path") | ||
+ | .attr("d", area) | ||
+ | .style("fill", function() { return color(Math.random()); }); | ||
+ | |||
+ | function transition() { | ||
+ | d3.selectAll("path") | ||
+ | .data(function() { | ||
+ | var d = layers1; | ||
+ | layers1 = layers0; | ||
+ | return layers0 = d; | ||
+ | }) | ||
+ | .transition() | ||
+ | .duration(2500) | ||
+ | .attr("d", area); | ||
+ | } | ||
+ | |||
+ | // Inspired by Lee Byron's test data generator. | ||
+ | function bumpLayer(n) { | ||
+ | |||
+ | function bump(a) { | ||
+ | var x = 1 / (.1 + Math.random()), | ||
+ | y = 2 * Math.random() - .5, | ||
+ | z = 10 / (.1 + Math.random()); | ||
+ | for (var i = 0; i < n; i++) { | ||
+ | var w = (i / n - y) * z; | ||
+ | a[i] += x * Math.exp(-w * w); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var a = [], i; | ||
+ | for (i = 0; i < n; ++i) a[i] = 0; | ||
+ | for (i = 0; i < 5; ++i) bump(a); | ||
+ | return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; }); | ||
+ | } | ||
+ | |||
+ | </script> | ||
</html> | </html> |
Revision as of 03:03, 22 February 2014
Media Studies course introduction and first lecture with Mark Hemel take place
on Monday, 9th September, 9:45 in room C !
tallest TV tower (610 meter) in Guangzhou, China.
Hyperbody students are welcome to attend eCAADe presentations in protoSPACE!
Wednesday 18 Sep: 11:00 Crowdsourcing and Sensing; 14:00 Performative and Interactive Architecture; 16:30 Algorithmic Design Generation
Thursday 19 Sep: 10:30 Digital Fabrication; 14:00 Models of Computation: Form Studies; 16:15 Biomimetics and Bio-Inspiration
Friday 20 Sep: 11:00 Material Studies; 14:00 Performative Design