Tower of Hanoi Animation by Y. Daniel Liang

From 44097da7288042e988bcb89f1c6cc817a8e1eec9 Mon Sep 17 00:00:00 2001 From: zhang Date: Sat, 4 Jun 2022 08:48:54 +0800 Subject: 0604 --- ...ower of Hanoi Animation by Y. Daniel Liang.html | 762 +++++++++++++++++++++ web/bigai/canvas_layering.html | 116 ++++ web/bigai/myrender.py | 109 +++ web/bigai/test.html | 52 ++ web/canvas-transforms.html | 82 +++ web/canvas_animation.html | 73 ++ web/canvas_layering.html | 113 +++ web/layers/CanvasStack-2v01.js | 207 ++++++ web/layers/index.html | 13 + web/layers/main.js | 15 + web/learn_canvas/bar_canvas.html | 50 ++ web/learn_canvas/basics/index.html | 11 + web/learn_canvas/basics/main.js | 60 ++ web/learn_canvas/canvas_btns/example.js | 121 ++++ web/learn_canvas/canvas_btns/index.html | 43 ++ web/learn_canvas/canvas_btns/main.js | 11 + web/learn_canvas/canvas_btns/style.css | 18 + web/learn_canvas/canvas_btns/test.html | 77 +++ web/learn_canvas/canvas_btns/test2.html | 47 ++ web/multi_layers.html | 24 + web/multi_layers/index.html | 11 + web/multi_layers/main.js | 60 ++ 22 files changed, 2075 insertions(+) create mode 100644 web/Tower of Hanoi Animation by Y. Daniel Liang.html create mode 100644 web/bigai/canvas_layering.html create mode 100644 web/bigai/myrender.py create mode 100644 web/bigai/test.html create mode 100644 web/canvas-transforms.html create mode 100644 web/canvas_animation.html create mode 100644 web/canvas_layering.html create mode 100644 web/layers/CanvasStack-2v01.js create mode 100644 web/layers/index.html create mode 100644 web/layers/main.js create mode 100644 web/learn_canvas/bar_canvas.html create mode 100644 web/learn_canvas/basics/index.html create mode 100644 web/learn_canvas/basics/main.js create mode 100644 web/learn_canvas/canvas_btns/example.js create mode 100644 web/learn_canvas/canvas_btns/index.html create mode 100644 web/learn_canvas/canvas_btns/main.js create mode 100644 web/learn_canvas/canvas_btns/style.css create mode 100644 web/learn_canvas/canvas_btns/test.html create mode 100644 web/learn_canvas/canvas_btns/test2.html create mode 100644 web/multi_layers.html create mode 100644 web/multi_layers/index.html create mode 100644 web/multi_layers/main.js (limited to 'web') diff --git a/web/Tower of Hanoi Animation by Y. Daniel Liang.html b/web/Tower of Hanoi Animation by Y. Daniel Liang.html new file mode 100644 index 0000000..3014467 --- /dev/null +++ b/web/Tower of Hanoi Animation by Y. Daniel Liang.html @@ -0,0 +1,762 @@ + + + + Tower of Hanoi Animation by Y. Daniel Liang + + + + + + + + + + + + + + + + + + + + + + + + + + +

Tower of Hanoi Animation by + Y. Daniel Liang

+ Usage: Click the Start button to move all the discs from Tower A to Tower B. Click the Reset button to reset to the initial state. +

+ +

+
+      

+      

+      

+      

+      

+      

+      Tower A

+      Tower B

+      Tower C

+      

+      

+      

+      

+      

+      

+
+
+
+

+ + Discs: + ▲▼ + + + + +

+ +

+ + + + +

\ No newline at end of file diff --git a/web/bigai/canvas_layering.html b/web/bigai/canvas_layering.html new file mode 100644 index 0000000..669fdf9 --- /dev/null +++ b/web/bigai/canvas_layering.html @@ -0,0 +1,116 @@ + + + + + Canvas Layers Test + + +

+ +

+ + + +

+ + \ No newline at end of file diff --git a/web/bigai/myrender.py b/web/bigai/myrender.py new file mode 100644 index 0000000..d49e69b --- /dev/null +++ b/web/bigai/myrender.py @@ -0,0 +1,109 @@ +import gym +from gym.envs.classic_control import rendering +import math +from pyglet.gl import * +import pyglet + +class Attr(object): + def enable(self): + raise NotImplementedError + def disable(self): + pass + + +class Color(Attr): + def __init__(self, vec4): + self.vec4 = vec4 + def enable(self): + glColor4f(*self.vec4) +p +class Geom(object): + def __init__(self): + self._color=Color((0, 0, 0, 1.0)) + self.attrs = [self._color] + def render(self): + for attr in reversed(self.attrs): + attr.enable() + self.render1() + for attr in self.attrs: + attr.disable() + def render1(self): + raise NotImplementedError + def add_attr(self, attr): + self.attrs.append(attr) + def set_color(self, r, g, b, alpha=1): + self._color.vec4 = (r, g, b, alpha) + + +class FilledPolygon(Geom): + def __init__(self, v): + Geom.__init__(self) + self.v = v + def render1(self): + if len(self.v) == 4 : glBegin(GL_QUADS) + elif len(self.v) > 4 : glBegin(GL_POLYGON) + else: glBegin(GL_TRIANGLES) + for p in self.v: + glVertex3f(p[0], p[1],0) # draw each vertex + glEnd() + + color = (self._color.vec4[0] * 0.5, self._color.vec4[1] * 0.5, self._color.vec4[2] * 0.5, self._color.vec4[3] * 0.5) + glColor4f(*color) + glBegin(GL_LINE_LOOP) + for p in self.v: + glVertex3f(p[0], p[1],0) # draw each vertex + glEnd() + + +class MyEnv(gym.Env): + metadata = { + 'render.modes': ['human', 'rgb_array'], + 'videos.frames_per_second': 2 + } + + def __init__(self): + self.viewer = rendering.Viewer(800, 600) + + # def render(self, mode='human', close=False): + # line1 = rendering.Line((100, 300), (500, 300)) + # line2 = rendering.Line((100, 200), (500, 200)) + # line1.set_color(0, 0, 0) + # line2.set_color(0, 0, 0) + # self.viewer.add_geom(line1) + # self.viewer.add_geom(line2) + # return self.viewer.render(return_rgb_array=mode == 'rgb_array') + + def make_agent(self): + radius = 10 + res = 30 + WORLD_WIDTH = 10 + visual_distance = 100 + points = [] + for i in range(res): + ang = 2*math.pi*i/res + points.append([math.cos(ang)*radius, math.sin(ang)*radius]) + for i in range(9): + ang = 2 * math.pi * (i - 4) / res + points.append((math.cos(ang) * visual_distance + radius, math.sin(ang) * visual_distance)) + return points + + + # def render(self, mode='human', close=False): + # circle = rendering.make_circle(30) + # circle_transform = rendering.Transform(translation=(100, 100)) + # circle.add_attr(circle_transform) + # self.viewer.add_geom(circle) + # return self.viewer.render(return_rgb_array=mode == 'rgb_array') + + def render(self, mode='human'): + agent_points = self.make_agent() + agent = FilledPolygon(agent_points) + trans = rendering.Transform(translation=(200, 200)) + agent.add_attr(trans) + self.viewer.add_geom(agent) + return self.viewer.render(return_rgb_array=mode == 'rgb_array') + +if __name__ == '__main__': + env = MyEnv() + while True: + env.render() diff --git a/web/bigai/test.html b/web/bigai/test.html new file mode 100644 index 0000000..abc1d15 --- /dev/null +++ b/web/bigai/test.html @@ -0,0 +1,52 @@ + + + + + + +

+ + \ No newline at end of file diff --git a/web/canvas-transforms.html b/web/canvas-transforms.html new file mode 100644 index 0000000..bfdbe80 --- /dev/null +++ b/web/canvas-transforms.html @@ -0,0 +1,82 @@ + + + + + + + Canvas Rotation + + + +

+ + + \ No newline at end of file diff --git a/web/canvas_animation.html b/web/canvas_animation.html new file mode 100644 index 0000000..205f8fe --- /dev/null +++ b/web/canvas_animation.html @@ -0,0 +1,73 @@ + + + + + Canvas Test + + +

+ + + +

+ + \ No newline at end of file diff --git a/web/canvas_layering.html b/web/canvas_layering.html new file mode 100644 index 0000000..6214009 --- /dev/null +++ b/web/canvas_layering.html @@ -0,0 +1,113 @@ + + + + + Canvas Layers Test + + +

+ +

+ + +

+ + \ No newline at end of file diff --git a/web/layers/CanvasStack-2v01.js b/web/layers/CanvasStack-2v01.js new file mode 100644 index 0000000..1d8b328 --- /dev/null +++ b/web/layers/CanvasStack-2v01.js @@ -0,0 +1,207 @@ +/*============================================================= + Filename: CanvasStack-2v01.js + Rev: 2 + By: A.R.Collins + Description: Utilities to create multiple transparent + canvas layers suitable for animation. + License: Released into the public domain + latest version at + + + Date |Description |By + ------------------------------------------------------------- + 30Oct09 Rev 1.00 First release ARC + 08Sep12 bugfix: test for emulator failed in IE9 ARC + 02Mar13 Re-write to use screen canvas as background ARC + 28Jul13 remove getOverlayCanvas (use getElementById) + Tidy for JSLint ARC + 20Jul14 Setup a resize handler for layers, required when + canvas size changes on window resize (width in %). + Dropped excanvas support ARC + 18Sep19 Re-factor to simplify ARC + 21Sep19 Convert to Classes etc ARC + 30Sep19 Added addResizeCallback method + Released as Rev 2v00 ARC + 01Jan20 Add Layer.dragObjects to match Cango Layer ARC + =============================================================*/ + +var CanvasStack; + +(function() +{ + "use strict"; + + class Layer + { + constructor(canvasID, canvasElement) + { + this.id = canvasID; + this.cElem = canvasElement; + this.dragObjects = []; + } + } + + CanvasStack = class{ + constructor(cvsID, stackLimit){ + const savThis = this; + + function setResizeHandler(resizeLayers, timeout){ + let timer_id = undefined; + window.addEventListener("resize", ()=>{ + if(timer_id != undefined) + { + clearTimeout(timer_id); + timer_id = undefined; + } + timer_id = setTimeout(()=>{ + timer_id = undefined; + resizeLayers(); + savThis.bkgCanvas.resizeFns.forEach((currFn)=>currFn()); + }, timeout); + }); + } + + function resizeLayers(){ + const t = savThis.bkgCanvas.offsetTop + savThis.bkgCanvas.clientTop, + l = savThis.bkgCanvas.offsetLeft + savThis.bkgCanvas.clientLeft, + w = savThis.bkgCanvas.offsetWidth, + h = savThis.bkgCanvas.offsetHeight; + + // check if canvas size changed when window resized, allow some rounding error in layout calcs + if ((Math.abs(w - savThis.rawWidth)/w < 0.01) && (Math.abs(h - savThis.rawHeight)/h < 0.01)) + { + // canvas size didn't change so return + return; + } + // canvas has been resized so resize all the overlay canvases + for (let j=1; j= this.stackLimit) + { + console.error("CanvasStack: too many layers"); + return; + } + this.bkgCanvas.unique += 1; // a private static variable + const uniqueTag = this.bkgCanvas.unique.toString(); + const ovlId = this.cId+"_ovl_"+uniqueTag; + const ovlHTML = "

"; + const topCvs = this.bkgCanvas.layers[nLyrs-1].cElem; + topCvs.insertAdjacentHTML('afterend', ovlHTML); + const newCvs = document.getElementById(ovlId); + newCvs.style.backgroundColor = "transparent"; + newCvs.style.left = (this.bkgCanvas.offsetLeft+this.bkgCanvas.clientLeft)+'px'; + newCvs.style.top = (this.bkgCanvas.offsetTop+this.bkgCanvas.clientTop)+'px'; + // make it the same size as the background canvas + newCvs.style.width = this.bkgCanvas.offsetWidth+'px'; + newCvs.style.height = this.bkgCanvas.offsetHeight+'px'; + let newL = new Layer(ovlId, newCvs); + // save the ID in an array to facilitate removal + this.bkgCanvas.layers.push(newL); + + return ovlId; // return the new canvas id + } + + deleteLayer(ovlyId){ + // check background canvas is still there + if (!(this.bkgCanvas && this.bkgCanvas.layers)) + { + console.log("CanvasStack: missing background canvas"); + return; + } + for (let i=1; i0; i--) // don't delete layers[0] its the bakg canavs + { + let ovlNode = this.bkgCanvas.layers[i].cElem; + if (ovlNode) + { + let orphan = ovlNode.parentNode.removeChild(ovlNode); + orphan = null; + } + // now delete layers array element + this.bkgCanvas.layers.splice(i,1); + } + // clear any resize callbacks, the layers are gone + this.bkgCanvas.resizeFns.length = 0; // remove any added handlers, leave the basic + } + + addResizeCallback(callbackFn){ + this.bkgCanvas.resizeFns.push(callbackFn); + } + }; + +}()); diff --git a/web/layers/index.html b/web/layers/index.html new file mode 100644 index 0000000..e30c96a --- /dev/null +++ b/web/layers/index.html @@ -0,0 +1,13 @@ + + + + + Document + + + + +

+ + + \ No newline at end of file diff --git a/web/layers/main.js b/web/layers/main.js new file mode 100644 index 0000000..6bab236 --- /dev/null +++ b/web/layers/main.js @@ -0,0 +1,15 @@ + +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + +var stack = new CanvasStack(); +var layer1 = stack.createLayer(); +var ctx1 = document.getElementById(layer1).getContext("2d"); + +ctx1.fillRect(0, 0, 100, 100); + + + diff --git a/web/learn_canvas/bar_canvas.html b/web/learn_canvas/bar_canvas.html new file mode 100644 index 0000000..c2d7518 --- /dev/null +++ b/web/learn_canvas/bar_canvas.html @@ -0,0 +1,50 @@ + + + + + + + + + Enter the values seperated by a comma
+
+ +

+

+ + + diff --git a/web/learn_canvas/basics/index.html b/web/learn_canvas/basics/index.html new file mode 100644 index 0000000..3c0cfb8 --- /dev/null +++ b/web/learn_canvas/basics/index.html @@ -0,0 +1,11 @@ + + + + + Title + + +

+ + + \ No newline at end of file diff --git a/web/learn_canvas/basics/main.js b/web/learn_canvas/basics/main.js new file mode 100644 index 0000000..5aa6458 --- /dev/null +++ b/web/learn_canvas/basics/main.js @@ -0,0 +1,60 @@ +let canvas = document.getElementById("canvas"); +let ctx = canvas.getContext("2d"); + +var win_height = window.innerHeight; +var win_width = window.innerWidth; + +canvas.height = win_height; +canvas.width = win_width; +console.log(canvas.width, canvas.height); + +canvas.style.background = "#bbf"; + + +class Circle { + constructor(context, xpos, ypos, radius, color) { + this.context = context; + this.xpos = xpos; + this.ypos = ypos; + this.radius = radius; + this.color = color; + } + draw() { + this.context.beginPath(); + this.context.arc(this.xpos, this.ypos, this.radius, 0, Math.PI*2, this.color); + this.context.strokeStyle = "grey"; + this.context.lineWidth = 15; + this.context.fillStyle = this.color; + this.context.fill(); + this.context.stroke(); + this.context.closePath(); + } + clickCircle(xmouse, ymouse) { + const distance = Math.sqrt((xmouse - this.xpos) * (xmouse - this.xpos) + (ymouse - this.ypos) * (ymouse - this.ypos)); + if (distance <= this.radius) { + return true; + } + return false; + } + changeColor (newColor) { + this.color = newColor; + this.draw(); + } +} + + +let circle = new Circle(ctx, 200, 200, 100, "blue"); +circle.draw(ctx); +canvas.addEventListener("click", (event) => { +// console.log(event); +// console.log("clicked canvas"); + const rect = canvas.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + if (circle.clickCircle(x, y)) { + circle.changeColor("red"); + } else { + circle.changeColor("blue"); + } +// console.log(rect); +}); diff --git a/web/learn_canvas/canvas_btns/example.js b/web/learn_canvas/canvas_btns/example.js new file mode 100644 index 0000000..0722613 --- /dev/null +++ b/web/learn_canvas/canvas_btns/example.js @@ -0,0 +1,121 @@ +var canvas = document.getElementById('canvas'), + context = canvas.getContext('2d'), + rubberbandDiv = document.getElementById('rubberbandDiv'), + resetButton = document.getElementById('resetButton'), + image = new Image(), + mousedown = {}, + rubberbandRectangle = {}, + dragging = false; + +// Functions.......................................................... + +function rubberbandStart(x, y) { + mousedown.x = x; + mousedown.y = y; + + rubberbandRectangle.left = mousedown.x; + rubberbandRectangle.top = mousedown.y; + + moveRubberbandDiv(); + showRubberbandDiv(); + + dragging = true; +} + +function rubberbandStretch(x, y) { + rubberbandRectangle.left = x < mousedown.x ? x : mousedown.x; + rubberbandRectangle.top = y < mousedown.y ? y : mousedown.y; + + rubberbandRectangle.width = Math.abs(x - mousedown.x), + rubberbandRectangle.height = Math.abs(y - mousedown.y); + + moveRubberbandDiv(); + resizeRubberbandDiv(); +} + +function rubberbandEnd() { + var bbox = canvas.getBoundingClientRect(); + + try { + context.drawImage(canvas, + rubberbandRectangle.left - bbox.left, + rubberbandRectangle.top - bbox.top, + rubberbandRectangle.width, + rubberbandRectangle.height, + 0, 0, canvas.width, canvas.height); + } + catch (e) { + // Suppress error message when mouse is released + // outside the canvas + } + + resetRubberbandRectangle(); + + rubberbandDiv.style.width = 0; + rubberbandDiv.style.height = 0; + + hideRubberbandDiv(); + + dragging = false; +} + +function moveRubberbandDiv() { + rubberbandDiv.style.top = rubberbandRectangle.top + 'px'; + rubberbandDiv.style.left = rubberbandRectangle.left + 'px'; +} + +function resizeRubberbandDiv() { + rubberbandDiv.style.width = rubberbandRectangle.width + 'px'; + rubberbandDiv.style.height = rubberbandRectangle.height + 'px'; +} + +function showRubberbandDiv() { + rubberbandDiv.style.display = 'inline'; +} + +function hideRubberbandDiv() { + rubberbandDiv.style.display = 'none'; +} + +function resetRubberbandRectangle() { + rubberbandRectangle = { top: 0, left: 0, width: 0, height: 0 }; +} + +// Event handlers..................................................... + +canvas.onmousedown = function (e) { + var x = e.clientX, + y = e.clientY; + + e.preventDefault(); + rubberbandStart(x, y); +}; + +window.onmousemove = function (e) { + var x = e.clientX, + y = e.clientY; + + e.preventDefault(); + if (dragging) { + rubberbandStretch(x, y); + } +}; + +window.onmouseup = function (e) { + e.preventDefault(); + rubberbandEnd(); +}; + +image.onload = function () { + context.drawImage(image, 0, 0, canvas.width, canvas.height); +}; + +resetButton.onclick = function(e) { + context.clearRect(0, 0, context.canvas.width, + context.canvas.height); + context.drawImage(image, 0, 0, canvas.width, canvas.height); +}; + +// Initialization..................................................... + +image.src = 'curved-road.png'; \ No newline at end of file diff --git a/web/learn_canvas/canvas_btns/index.html b/web/learn_canvas/canvas_btns/index.html new file mode 100644 index 0000000..9509727 --- /dev/null +++ b/web/learn_canvas/canvas_btns/index.html @@ -0,0 +1,43 @@ + + + + + Title + + + + + + + + + + + + +

+ + + + + + \ No newline at end of file diff --git a/web/learn_canvas/canvas_btns/main.js b/web/learn_canvas/canvas_btns/main.js new file mode 100644 index 0000000..be07ddb --- /dev/null +++ b/web/learn_canvas/canvas_btns/main.js @@ -0,0 +1,11 @@ +let canvas = document.getElementById("viewport"); +let ctx = canvas.getContext("2d"); + +//var win_height = 600; +//var win_width = 800; + +canvas.height = 600; +canvas.width = 800; +console.log(canvas.width, canvas.height); + +canvas.style.background = "#bbf"; \ No newline at end of file diff --git a/web/learn_canvas/canvas_btns/style.css b/web/learn_canvas/canvas_btns/style.css new file mode 100644 index 0000000..c9b2bbf --- /dev/null +++ b/web/learn_canvas/canvas_btns/style.css @@ -0,0 +1,18 @@ +#container +{ + height: 400px; + position: relative; + width: 400px; +} +#viewport +{ + height: 100%; + width: 100%; +} +#controls +{ + bottom: 0; + left: 0; + position: absolute; + width: 100%; +} \ No newline at end of file diff --git a/web/learn_canvas/canvas_btns/test.html b/web/learn_canvas/canvas_btns/test.html new file mode 100644 index 0000000..9de2318 --- /dev/null +++ b/web/learn_canvas/canvas_btns/test.html @@ -0,0 +1,77 @@ + + + + Bouncing Balls + + + + + +

Bouncing Balls

+ +

One hundred balls bouncing

+ + Start +

+ +

+ + + + diff --git a/web/learn_canvas/canvas_btns/test2.html b/web/learn_canvas/canvas_btns/test2.html new file mode 100644 index 0000000..b456738 --- /dev/null +++ b/web/learn_canvas/canvas_btns/test2.html @@ -0,0 +1,47 @@ + + + + Rubber bands with layered elements + + + + + +

+ +

+ + + + \ No newline at end of file diff --git a/web/multi_layers.html b/web/multi_layers.html new file mode 100644 index 0000000..1311a77 --- /dev/null +++ b/web/multi_layers.html @@ -0,0 +1,24 @@ + + + + + Title + + + + + +

+ + + \ No newline at end of file diff --git a/web/multi_layers/index.html b/web/multi_layers/index.html new file mode 100644 index 0000000..3c0cfb8 --- /dev/null +++ b/web/multi_layers/index.html @@ -0,0 +1,11 @@ + + + + + Title + + +

+ + + \ No newline at end of file diff --git a/web/multi_layers/main.js b/web/multi_layers/main.js new file mode 100644 index 0000000..5aa6458 --- /dev/null +++ b/web/multi_layers/main.js @@ -0,0 +1,60 @@ +let canvas = document.getElementById("canvas"); +let ctx = canvas.getContext("2d"); + +var win_height = window.innerHeight; +var win_width = window.innerWidth; + +canvas.height = win_height; +canvas.width = win_width; +console.log(canvas.width, canvas.height); + +canvas.style.background = "#bbf"; + + +class Circle { + constructor(context, xpos, ypos, radius, color) { + this.context = context; + this.xpos = xpos; + this.ypos = ypos; + this.radius = radius; + this.color = color; + } + draw() { + this.context.beginPath(); + this.context.arc(this.xpos, this.ypos, this.radius, 0, Math.PI*2, this.color); + this.context.strokeStyle = "grey"; + this.context.lineWidth = 15; + this.context.fillStyle = this.color; + this.context.fill(); + this.context.stroke(); + this.context.closePath(); + } + clickCircle(xmouse, ymouse) { + const distance = Math.sqrt((xmouse - this.xpos) * (xmouse - this.xpos) + (ymouse - this.ypos) * (ymouse - this.ypos)); + if (distance <= this.radius) { + return true; + } + return false; + } + changeColor (newColor) { + this.color = newColor; + this.draw(); + } +} + + +let circle = new Circle(ctx, 200, 200, 100, "blue"); +circle.draw(ctx); +canvas.addEventListener("click", (event) => { +// console.log(event); +// console.log("clicked canvas"); + const rect = canvas.getBoundingClientRect(); + const x = event.clientX - rect.left; + const y = event.clientY - rect.top; + if (circle.clickCircle(x, y)) { + circle.changeColor("red"); + } else { + circle.changeColor("blue"); + } +// console.log(rect); +}); -- cgit v1.2.3