week 4 recursion

2026-03-20 16:39:59 +09:00
parent 07d83842d7
commit a5b0cc7b8f
5 changed files with 209 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,5 +3,5 @@ node_modules
 **/.DS_Store
 todo/**
 _*.js
-solution-*.js
+solution-*
 old
--- a/w4_1_recursion/TowerHanoi/index.html
+++ b/w4_1_recursion/TowerHanoi/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/p5.min.js"></script>
+  <meta charset="utf-8" />
+</head>
+
+<script defer src="sketch.js"></script>
+
+<body></body>
+
+</html>
--- a/w4_1_recursion/TowerHanoi/sketch.js
+++ b/w4_1_recursion/TowerHanoi/sketch.js
@@ -0,0 +1,72 @@
+const DISK_WIDTH = 30;
+const DISK_HEIGHT = 20;
+const DELAY_MS = 500;
+const NUMBER_OF_DISKS = 3;
+
+let pole1, pole2, pole3;
+let A = generateDisks(NUMBER_OF_DISKS); // bottom up, from large to small, like [4,3,2,1]
+let B = [];
+let C = [];
+
+// Solving the Tower of Hanoi
+async function solveTower(n, from, to, helper) {
+  // todo
+}
+
+async function move(from, to) {
+  to.push(from.pop());
+  await sleep(DELAY_MS);
+}
+
+// Main program
+
+function setup() {
+  createCanvas(windowWidth, 600); // full width
+  pole1 = (1 * width) / 5;
+  pole2 = width / 2;
+  pole3 = (4 * width) / 5;
+}
+
+function draw() {
+  background(200);
+
+  // draw three poles
+  stroke(0);
+  strokeWeight(5);
+  line(pole1, height, pole1, height / 3);
+  line(pole2, height, pole2, height / 3);
+  line(pole3, height, pole3, height / 3);
+
+  fill(255, 0, 0);
+  drawDisks(pole1, A);
+  drawDisks(pole2, B);
+  drawDisks(pole3, C);
+}
+
+function drawDisks(poleLocation, disks) {
+  let y = height - DISK_HEIGHT / 2;
+
+  rectMode(CENTER);
+  stroke(0);
+  strokeWeight(2);
+  for (let disk of disks) {
+    rect(poleLocation, y, DISK_WIDTH * disk, DISK_HEIGHT);
+    y -= DISK_HEIGHT;
+  }
+}
+
+function mousePressed() {
+  solveTower(A.length, A, B, C);
+}
+
+// Helpers
+
+function generateDisks(n) {
+  return Array(n)
+    .fill()
+    .map((_, i) => n - i);
+}
+
+function sleep(milliseconds) {
+  return new Promise((resolve) => setTimeout(resolve, milliseconds));
+}
--- a/w4_1_recursion/Turtle/index.html
+++ b/w4_1_recursion/Turtle/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/p5.min.js"></script>
+
+  <meta charset="utf-8" />
+</head>
+
+<script defer src="sketch.js"></script>
+
+<body></body>
+
+</html>
--- a/w4_1_recursion/Turtle/sketch.js
+++ b/w4_1_recursion/Turtle/sketch.js
@@ -0,0 +1,109 @@
+let t;
+const len = 1000;
+
+function setup() {
+  // createCanvas(400, 300);
+  createCanvas(window.innerWidth, window.innerHeight);
+  noLoop(); // will draw only once
+  t = new Turtle(); // getting ready to draw
+  // green
+  stroke(0, 200, 0);
+  strokeWeight(5);
+}
+
+function draw() {
+  background(240);
+
+  // getting ready
+  t.setxy(-len / 2, 0);
+  t.right(90);
+
+  // draw Koch line
+  koch(5, len);
+}
+
+function koch(order, length) {
+  // PLACEHOLDER
+  t.forward(200);
+}
+
+// Don't write underneath this line
+
+class Turtle {
+  constructor() {
+    this.oldx = int(width / 2);
+    this.oldy = int(height / 2);
+    this.x = this.oldx;
+    this.y = this.oldy;
+    this.tcolor = 0;
+    this.angle = 0;
+    stroke(this.tcolor);
+  }
+
+  forward(step) {
+    this.x = this.oldx - step * cos(radians(this.angle + 90));
+    this.y = this.oldy - step * sin(radians(this.angle + 90));
+    line(this.oldx, this.oldy, this.x, this.y);
+    this.oldx = this.x;
+    this.oldy = this.y;
+  }
+
+  back(step) {
+    this.x = this.oldx + step * cos(radians(this.angle + 90));
+    this.y = this.oldy + step * sin(radians(this.angle + 90));
+    line(this.oldx, this.oldy, this.x, this.y);
+    this.oldx = this.x;
+    this.oldy = this.y;
+  }
+
+  home() {
+    this.oldx = int(width / 2);
+    this.oldy = int(height / 2);
+    line(this.oldx, this.oldy, this.x, this.y);
+    this.oldx = this.x;
+    this.oldy = this.y;
+    this.angle = 0.0;
+  }
+
+  setx(step) {
+    this.x = this.oldx + step;
+    this.oldx = this.x;
+  }
+
+  sety(step) {
+    this.y = this.oldy + step;
+    this.oldy = this.y;
+  }
+
+  setxy(stepx, stepy) {
+    this.x = this.oldx + stepx;
+    this.y = this.oldy + stepy;
+    this.oldx = this.x;
+    this.oldy = this.y;
+  }
+
+  left(dangle) {
+    this.angle -= dangle;
+  }
+
+  right(dangle) {
+    this.angle += dangle;
+  }
+
+  setheading(nangle) {
+    this.angle = nangle;
+  }
+
+  pencolor(ncolor) {
+    this.tcolor = ncolor;
+    stroke(this.tcolor);
+  }
+
+  penup() {
+    noStroke();
+  }
+
+  pendown() {
+    stroke(this.tcolor);
+  }
+}