Skip to content

Instantly share code, notes, and snippets.

Created January 1, 2015 21:07
Show Gist options
  • Save anonymous/c839b9674de34ec37b41 to your computer and use it in GitHub Desktop.
Save anonymous/c839b9674de34ec37b41 to your computer and use it in GitHub Desktop.
Sunflower
{
"origin": "dartlab.org",
"url": "http://dartlab.org/#:gistId",
"history": [
"cacbc451489a9d4bf940"
]
}
<h1>drfibonacci's Sunflower Spectacular</h1>
<p>A canvas 2D demo.</p>
<div id="container">
<canvas id="canvas" width="300" height="300" class="center"></canvas>
<form class="center">
<input id="slider" type="range" max="1000" value="500"/>
</form>
<br/>
<img id="math_png" width="350px" height="42px" class="center">
</div>
<footer>
<p id="summary"> </p>
<p id="notes"> </p>
</footer>
// Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
library sunflower;
import "dart:html";
import "dart:math";
const String SEED_COLOR = "orange";
const int SEED_RADIUS = 2;
const int SCALE_FACTOR = 4;
const num TAU = PI * 2;
const int MAX_D = 300;
const num centerX = MAX_D / 2;
const num centerY = centerX;
final InputElement slider = query("#slider");
final Element notes = query("#notes");
final num PHI = (sqrt(5) + 1) / 2;
int seeds = 0;
final CanvasRenderingContext2D context =
(query("#canvas") as CanvasElement).context2D;
void main() {
ImageElement img = document.querySelector("#math_png");
img.src = MATH_PNG;
slider.onChange.listen((e) => draw());
draw();
}
/// Draw the complete figure for the current number of seeds.
void draw() {
seeds = int.parse(slider.value);
context.clearRect(0, 0, MAX_D, MAX_D);
for (var i = 0; i < seeds; i++) {
final num theta = i * TAU / PHI;
final num r = sqrt(i) * SCALE_FACTOR;
drawSeed(centerX + r * cos(theta), centerY - r * sin(theta));
}
notes.text = "${seeds} seeds";
}
/// Draw a small circle representing a seed centered at (x,y).
void drawSeed(num x, num y) {
context..beginPath()
..lineWidth = 2
..fillStyle = SEED_COLOR
..strokeStyle = SEED_COLOR
..arc(x, y, SEED_RADIUS, 0, TAU, false)
..fill()
..closePath()
..stroke();
}
const String MATH_PNG =
"https://dart.googlecode.com/svn/trunk/dart/samples/sunflower/web/math.png";
body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
p {
color: #333;
}
#container {
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
}
#summary {
float: left;
}
#notes {
float: right;
width: 120px;
text-align: right;
}
.error {
font-style: italic;
color: red;
}
img {
border: 1px solid #ccc;
margin: auto;
}
.center {
display: block;
margin: 0px auto;
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment