ggirou/.gitignore

## .gitignore
*.dart.js
*.js.deps
*.js.map
.buildlog
pubspec.lock

.pub/
.settings/
build/
packages

## README.md

      
    Raw
  

              README.md
            
          
    Drfibonacci's Sunflower Spectacular

Created using DartLab.org.

  
## index.html
<!DOCTYPE html>

<html>
<head>
  <script src="packages/browser/dart.js"></script>
  <script type="application/dart" src="main.dart" async></script>
  <link href="styles.css" rel="stylesheet" media="screen">
</head>
<body><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></body>
</html>

## main.dart
// 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://raw.githubusercontent.com/dart-lang/sample-sunflower/master/web/math.png";

## pubspec.yaml
name: drfibonacci_s_sunflower_spectacular
dependencies:
  browser: any

## style.css
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;
}
	*.dart.js
	*.js.deps
	*.js.map
	.buildlog
	pubspec.lock

	.pub/
	.settings/
	build/
	packages
	<!DOCTYPE html>

	<html>
	<head>
	<script src="packages/browser/dart.js"></script>
	<script type="application/dart" src="main.dart" async></script>
	<link href="styles.css" rel="stylesheet" media="screen">
	</head>
	<body><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></body>
	</html>
	// 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://raw.githubusercontent.com/dart-lang/sample-sunflower/master/web/math.png";
	name: drfibonacci_s_sunflower_spectacular
	dependencies:
	browser: any
	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;
	}