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
