week4_1_recursion
This commit is contained in:
parent
270d7c5bfe
commit
40cbdfff58
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -3,5 +3,5 @@ node_modules/**
|
||||||
.git/**
|
.git/**
|
||||||
.DS_Store
|
.DS_Store
|
||||||
todo
|
todo
|
||||||
*/*_solution.*
|
*/*_solution*
|
||||||
TODO/**
|
TODO/**
|
3
libs/js/p5.dom.min.js
vendored
3
libs/js/p5.dom.min.js
vendored
File diff suppressed because one or more lines are too long
90025
libs/js/p5.js
90025
libs/js/p5.js
File diff suppressed because one or more lines are too long
28
libs/js/p5.sound.min.js
vendored
28
libs/js/p5.sound.min.js
vendored
File diff suppressed because one or more lines are too long
12
w4_1_recursion/TowerHanoi/index.html
Normal file
12
w4_1_recursion/TowerHanoi/index.html
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.2/p5.min.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<script defer src="sketch.js"></script>
|
||||||
|
|
||||||
|
<body></body>
|
||||||
|
</html>
|
72
w4_1_recursion/TowerHanoi/sketch.js
Normal file
72
w4_1_recursion/TowerHanoi/sketch.js
Normal file
|
@ -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(innerWidth, 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));
|
||||||
|
}
|
13
w4_1_recursion/Turtle/index.html
Normal file
13
w4_1_recursion/Turtle/index.html
Normal file
|
@ -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>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<script defer src="sketch.js"></script>
|
||||||
|
|
||||||
|
<body></body>
|
||||||
|
</html>
|
109
w4_1_recursion/Turtle/sketch.js
Normal file
109
w4_1_recursion/Turtle/sketch.js
Normal file
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user