4.2 added

week 4 recursion
Upldated gitignore
2026-03-23 23:44:26 +09:00 · 2026-03-20 16:39:59 +09:00 · 2026-03-17 10:01:49 +09:00 · 2026-03-17 10:00:59 +09:00 · 2026-03-14 12:08:37 +09:00
13 changed files with 418 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 **/.DS_Store
 todo/**
 _*.js
-solution-*.js
+solution-*
+old
--- a/w3_1_arrays/arrays.js
+++ b/w3_1_arrays/arrays.js
@@ -0,0 +1,6 @@
+const paragraph = `Call me Ishmael. Some years ago- never mind how long precisely- having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off- then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.`;
+
+// Print a frequency counter of all the letters of the alphabet appearing in the paragraph
+// Ignore case
+
+console.log('Frequency Counter: ...');
--- a/w3_1_arrays/index.html
+++ b/w3_1_arrays/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Types</title>
+</head>
+
+<body>
+  <script src="arrays.js" defer></script>
+  <script src="objects.js" defer></script>
+</body>
+
+</html>
--- a/w3_1_arrays/objects.js
+++ b/w3_1_arrays/objects.js
@@ -0,0 +1,48 @@
+/**
+ * typedef {{name:string, age:number, job:string}} Person
+ *
+ */
+const persons = [
+  { name: 'John', age: 30, job: 'Developer' },
+  { name: 'Mary', age: 25, job: 'Designer' },
+  { name: 'Peter', age: 27, job: 'Developer' },
+  { name: 'Jane', age: 22, job: 'Designer' },
+  { name: 'Bob', age: 33, job: 'Developer' },
+  { name: 'Alice', age: 35, job: 'Manager' },
+  { name: 'Tim', age: 32, job: 'Designer' },
+  { name: 'Sara', age: 21, job: 'Designer' },
+  { name: 'Tom', age: 34, job: 'Developer' },
+  { name: 'Alex', age: 24, job: 'Manager' },
+  { name: 'John', age: 30, job: 'Manager' },
+  { name: 'Mary', age: 25, job: 'Designer' },
+  { name: 'Peter', age: 27, job: 'Developer' },
+  { name: 'Jane', age: 22, job: 'Designer' },
+  { name: 'Bob', age: 33, job: 'Developer' },
+  { name: 'Alice', age: 35, job: 'Manager' },
+  { name: 'Tim', age: 32, job: 'Designer' },
+  { name: 'Sara', age: 21, job: 'Designer' },
+  { name: 'Tom', age: 34, job: 'Developer' },
+  { name: 'Alex', age: 24, job: 'Developer' },
+];
+
+/**
+ * averageAge.
+ *
+ * @param {Person[]} persons
+ */
+function averageAge(persons) {
+  // placehlder
+}
+
+console.log('Average age:', averageAge(persons));
+
+/**
+ * listJobs.
+ *
+ * @param {Person[]} persons
+ */
+function listJobs(persons) {
+  // placehlder
+}
+
+console.log('List of jobs:', listJobs(persons));
--- a/w3_2_functions/index.html
+++ b/w3_2_functions/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/2.0.5/p5.min.js'
+    integrity='sha512-jOTg6ikYiHx1LvbSOucnvZi4shXbaovZ91+rfViIiUFLgAJK+k1oQtGEaLvDB8rsZwEfUksTgmhrxdvEDykuzQ=='
+    crossorigin='anonymous'></script>
+
+  <meta charset="utf-8" />
+  <style>
+    /* Center the canvas */
+    canvas {
+      display: block;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<script defer src="./sorting.js"></script>
+<!-- <script defer src="./solution-sorting.js"></script> -->
+
+<body></body>
+
+</html>
--- a/w3_2_functions/sorting.js
+++ b/w3_2_functions/sorting.js
@@ -0,0 +1,55 @@
+// Main
+const N = 10;
+let strips = [];
+
+function setup() {
+  createCanvas(400, 300);
+  strips = createStrips(N);
+
+  // TODO sort the strips by luminance
+}
+
+function draw() {
+  background(0);
+  noStroke();
+  const h = height / strips.length;
+
+  // TODO draw the strips
+}
+
+// HELPERS
+
+/**
+ *
+ * @typedef {{red:number, green:number, blue:number}}  Color
+ */
+
+/**
+ * createRndColorStrip
+ * @returns Color
+ */
+function createRndColorStrip() {
+  return {
+    red: Math.floor(Math.random() * 255),
+    green: Math.floor(Math.random() * 255),
+    blue: Math.floor(Math.random() * 255),
+  };
+}
+
+/**
+ * getLuminance -- get luminance given an array of Color
+ * @param {Color} strip
+ * @returns number
+ */
+function getLuminance(strip) {
+  // TODO
+}
+
+/**
+ * createStrips -- create an array of random colors
+ * @param {number} n
+ * @returns Color[]
+ */
+function createStrips(n) {
+  // TODO
+}
--- 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);
+  }
+}
--- a/w4_2_recursion_countdown/index.html
+++ b/w4_2_recursion_countdown/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/js-confetti@latest/dist/js-confetti.browser.js"></script>
+
+    <script defer src="index.js"></script>
+
+    <h1 id="countdown">x</h1>
+</body>
+
+</html>
--- a/w4_2_recursion_countdown/index.js
+++ b/w4_2_recursion_countdown/index.js
@@ -0,0 +1,25 @@
+function countDown(n) {
+  if (n == 0) {
+    celebrate();
+    setText('Happy New Year!');
+  } else {
+    setText(n);
+    setTimeout(() => {
+      countDown(n - 1);
+    }, 1000);
+  }
+}
+
+const n = 10;
+setText(n);
+countDown(n);
+
+// Helpers
+function setText(n) {
+  document.getElementById('countdown').textContent = n;
+}
+
+function celebrate() {
+  const jsConfetti = new JSConfetti();
+  jsConfetti.addConfetti();
+}
--- a/w4_2_recursion_countdown/style.css
+++ b/w4_2_recursion_countdown/style.css
@@ -0,0 +1,15 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f0f0;
+  font-family: Arial, sans-serif;
+  margin: auto;
+}
+
+#countdown {
+  font-size: 10rem;
+  color: #333;
+  text-align: center;
+}
Author	SHA1	Message	Date
Andrea Bianchi	a869f49907	4.2 added	2026-03-23 23:44:26 +09:00
Andrea Bianchi	a5b0cc7b8f	week 4 recursion	2026-03-20 16:39:59 +09:00
Andrea Bianchi	07d83842d7	Upldated gitignore	2026-03-17 10:01:49 +09:00
Andrea Bianchi	158a3d0784	Week 3.2. exercise	2026-03-17 10:00:59 +09:00
Andrea Bianchi	9a4b251976	w3 exercises	2026-03-14 12:08:37 +09:00