timmaffett · April 5, 2022 15:48
diff --git a/readme.md b/readme.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sunflower</title>
    <link rel="stylesheet" href="styles.css">
    <script type="application/dart" src="main.dart"></script>
  </head>

  <body>
    <!-- Copyright 2011 the Dart project authors. All rights reserved.
     Use of this source code is governed by a BSD-style license
     that can be found in the LICENSE file. -->

 <h2>Dr. Fibonacci's Sunflower Spectacular</h2>
 <br/>
 <div>
  <label>0</label>
  <input id="slider" type="range" max="9000" value="500" />
  <label>9000</label>
  <div id="currentSlider">0</div>
 </div>
 <div>
  <canvas id="canvas" width="800" height="800"></canvas>
 </div>


  </body>
 </html>
diff --git a/main.dart b/main.dart
 // Copyright 2011 the Dart project authors. 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' as math;

 void main() {
  new Sunflower();
 }

 class Sunflower {
  static const String ORANGE = "orange";

  static const SEED_RADIUS = 2;
  static const SCALE_FACTOR = 4;
  static const TAU = math.pi * 2;
  static const MAX_D = 800;

  late final CanvasRenderingContext2D ctx;
  late final num xc;
  late final num yc;
  num seeds = 0;
  late final num PHI;

  Sunflower() {
    PHI = (math.sqrt(5) + 1) / 2;
    DivElement curValSpan = querySelector("#currentSlider") as DivElement;
    CanvasElement canvas = querySelector("#canvas")! as CanvasElement;
    xc = yc = MAX_D / 2;
    ctx = canvas.getContext("2d")! as CanvasRenderingContext2D;

    InputElement slider = querySelector("#slider")! as InputElement;
    slider.onInput.listen((Event e) {
      seeds = int.parse(slider.value!);
      curValSpan.text = slider.value!.toString();
      drawFrame();
    });

    seeds = int.parse(slider.value!);
    drawFrame();
  }

  // Draw the complete figure for the current number of seeds.
  void drawFrame() {
    print('seed value = ${seeds}');

    ctx.clearRect(0, 0, MAX_D, MAX_D);

    for (var i = 0; i < seeds; i++) {
      var theta = i * TAU / PHI;
      var r = math.sqrt(i) * SCALE_FACTOR;
      var x = xc + r * math.cos(theta);
      var y = yc - r * math.sin(theta);
      drawSeed(x, y);
    }
  }

  // Draw a small circle representing a seed centered at (x,y).
  void drawSeed(num x, num y) {
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.fillStyle = ORANGE;
    ctx.strokeStyle = ORANGE;
    ctx.arc(x, y, SEED_RADIUS, 0, TAU, false);
    ctx.fill();
    ctx.closePath();
    ctx.stroke();
  }
 }
diff --git a/styles.css b/styles.css
 /* Copyright 2011 the Dart project authors. All rights reserved. */
 /* Use of this source code is governed by a BSD-style license */
 /* that can be found in the LICENSE file. */

 h2 {
  margin-bottom: 0;
  text-align: center;
 }

 div {
  text-align: center;
 }

 #currentSlider {
  text-align: center;
  color: yellow;
  font-size: 14px;
 }
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sunflower</title>
	<link rel="stylesheet" href="styles.css">
	<script type="application/dart" src="main.dart"></script>
	</head>

	<body>
	<!-- Copyright 2011 the Dart project authors. All rights reserved.
	Use of this source code is governed by a BSD-style license
	that can be found in the LICENSE file. -->

	<h2>Dr. Fibonacci's Sunflower Spectacular</h2>
	<br/>
	<div>
	<label>0</label>
	<input id="slider" type="range" max="9000" value="500" />
	<label>9000</label>
	<div id="currentSlider">0</div>
	</div>
	<div>
	<canvas id="canvas" width="800" height="800"></canvas>
	</div>


	</body>
	</html>
	// Copyright 2011 the Dart project authors. 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' as math;

	void main() {
	new Sunflower();
	}

	class Sunflower {
	static const String ORANGE = "orange";

	static const SEED_RADIUS = 2;
	static const SCALE_FACTOR = 4;
	static const TAU = math.pi * 2;
	static const MAX_D = 800;

	late final CanvasRenderingContext2D ctx;
	late final num xc;
	late final num yc;
	num seeds = 0;
	late final num PHI;

	Sunflower() {
	PHI = (math.sqrt(5) + 1) / 2;
	DivElement curValSpan = querySelector("#currentSlider") as DivElement;
	CanvasElement canvas = querySelector("#canvas")! as CanvasElement;
	xc = yc = MAX_D / 2;
	ctx = canvas.getContext("2d")! as CanvasRenderingContext2D;

	InputElement slider = querySelector("#slider")! as InputElement;
	slider.onInput.listen((Event e) {
	seeds = int.parse(slider.value!);
	curValSpan.text = slider.value!.toString();
	drawFrame();
	});

	seeds = int.parse(slider.value!);
	drawFrame();
	}

	// Draw the complete figure for the current number of seeds.
	void drawFrame() {
	print('seed value = ${seeds}');

	ctx.clearRect(0, 0, MAX_D, MAX_D);

	for (var i = 0; i < seeds; i++) {
	var theta = i * TAU / PHI;
	var r = math.sqrt(i) * SCALE_FACTOR;
	var x = xc + r * math.cos(theta);
	var y = yc - r * math.sin(theta);
	drawSeed(x, y);
	}
	}

	// Draw a small circle representing a seed centered at (x,y).
	void drawSeed(num x, num y) {
	ctx.beginPath();
	ctx.lineWidth = 2;
	ctx.fillStyle = ORANGE;
	ctx.strokeStyle = ORANGE;
	ctx.arc(x, y, SEED_RADIUS, 0, TAU, false);
	ctx.fill();
	ctx.closePath();
	ctx.stroke();
	}
	}
	/* Copyright 2011 the Dart project authors. All rights reserved. */
	/* Use of this source code is governed by a BSD-style license */
	/* that can be found in the LICENSE file. */

	h2 {
	margin-bottom: 0;
	text-align: center;
	}

	div {
	text-align: center;
	}

	#currentSlider {
	text-align: center;
	color: yellow;
	font-size: 14px;
	}