summaryrefslogtreecommitdiff
path: root/web/bigai
diff options
context:
space:
mode:
Diffstat (limited to 'web/bigai')
-rw-r--r--web/bigai/canvas_layering.html116
-rw-r--r--web/bigai/myrender.py109
-rw-r--r--web/bigai/test.html52
3 files changed, 277 insertions, 0 deletions
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 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="UTF-8"/>
+ <title>Canvas Layers Test</title>
+</head>
+<body>
+<section>
+ <!--<div id="canvasesdiv" style="position:relative; width:400px; height:300px">-->
+ <canvas id="layer1"
+ style="z-index: 1;
+ position:absolute;
+ left:0px;
+ top:0px;
+ border: 5px, solid;
+ "
+ height="200px" width="300">
+ This text is displayed if your browser does not support HTML5 Canvas.
+ </canvas>
+
+ <canvas id="layer2"
+ style="z-index: 2;
+ position:absolute;
+ left:100px;
+ top:0px;
+ border: 5px, solid;
+ "
+ height="50px" width="50">
+ This text is displayed if your browser does not support HTML5 Canvas.
+ </canvas>
+
+ <canvas id="layer3"
+ style="z-index: 3;
+ position:absolute;
+ left:0px;
+ top:0px;
+ border: 5px, solid;
+ "
+ height="100px" width="200">
+ This text is displayed if your browser does not support HTML5 Canvas.
+ </canvas>
+ <!--</div>-->
+
+ <script type="text/javascript">
+ var layer1; var ctx1;
+ var layer2; var ctx2;
+ var layer3; var ctx3;
+
+ var x = 400;
+ var y = 300;
+ var dx = 2;
+ var dy = 4;
+ var WIDTH = 400;
+ var HEIGHT = 300;
+ var city = new Image();
+
+ function init() {
+ city.src ="city.png";
+ layer1 = document.getElementById("layer1");
+ ctx1 = layer1.getContext("2d");
+ layer2 = document.getElementById("layer2");
+ ctx2 = layer2.getContext("2d");
+ layer3 = document.getElementById("layer3");
+ ctx3 = layer3.getContext("2d");
+ setInterval(drawAll, 20);
+ }
+
+ function drawAll() {
+ draw1();
+ draw2();
+ draw3();
+ }
+
+ function draw1() {
+ ctx1.clearRect(0, 0, WIDTH, HEIGHT);
+ ctx1.fillStyle = "#FAF7F8";
+ ctx1.beginPath();
+ ctx1.rect(0, 0, WIDTH, HEIGHT);
+ ctx1.closePath();
+ ctx1.fill();
+ ctx1.fillStyle = "#444444";
+ ctx1.beginPath();
+ ctx1.arc(x, y, 10, 0, Math.PI*2, true);
+ ctx1.closePath();
+ ctx1.fill();
+
+ if (x + dx > WIDTH || x + dx < 0)
+ dx = -dx;
+ if (y + dy > HEIGHT || y + dy < 0)
+ dy = -dy;
+
+ x += dx;
+ y += dy;
+ }
+
+ function draw2() {
+ ctx2.clearRect(0, 0, WIDTH, HEIGHT);
+ ctx2.drawImage(city, 0, 0);
+ }
+
+ function draw3() {
+ ctx3.clearRect(0, 0, WIDTH, HEIGHT);
+ ctx3.fillStyle = "#444444";
+ ctx3.save();
+ ctx3.translate(200,200);
+ ctx3.rotate(x/20);
+ ctx3.fillRect(-15, -15, 30, 30);
+ ctx3.restore();
+ }
+
+ init();
+
+ </script>
+</section>
+</body>
+</html> \ 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 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title></title>
+ <script language="javascript">
+ window.onload = function () {
+ var landscape_canvas = document.getElementById("landscape");
+ var ctx = landscape_canvas.getContext("2d");
+ ctx.fillStyle = "Blue";
+ <!--ctx.fillRect(0, 0, 800, 850);-->
+
+ //Cone
+ ctx.fillStyle = "#67ff30";
+ ctx.beginPath();
+ ctx.moveTo(150, 250);
+ ctx.lineTo(300, 20);
+ ctx.lineTo(450, 250);
+ ctx.lineTo(150, 250);
+ ctx.fill();
+ ctx.closePath();
+ ctx.fillStyle = "Brown";
+ ctx.beginPath();
+ ctx.moveTo(400, 250);
+ ctx.lineTo(450, 80);
+ ctx.lineTo(600, 250);
+ ctx.lineTo(400, 250);
+ ctx.fill();
+ ctx.closePath();
+ ctx.beginPath();
+ // get 2 canvas
+ <!--var landscape_canvas = document.getElementById("landscape1");-->
+ <!--var ctx = landscape_canvas.getContext("2d");-->
+ <!--ctx.fillStyle = "blue";-->
+ <!--ctx.fillRect(0, 0, 600, 450);-->
+ <!--ctx.beginPath();-->
+ <!--ctx.fillStyle = "black";-->
+ <!--ctx.moveTo(75, 25);-->
+ <!--ctx.quadraticCurveTo(25, 25, 25, 62.5);-->
+ <!--ctx.quadraticCurveTo(25, 100, 50, 100);-->
+ <!--ctx.quadraticCurveTo(50, 120, 30, 125);-->
+ <!--ctx.quadraticCurveTo(60, 120, 65, 100);-->
+ <!--ctx.quadraticCurveTo(125, 100, 125, 62.5);-->
+ <!--ctx.quadraticCurveTo(125, 25, 75, 25);-->
+ <!--ctx.stroke();-->
+ <!--ctx.beginPath();-->
+ }
+ </script>
+</head>
+<body>
+<canvas id="landscape" width="800" height="350"></canvas>
+<canvas id="landscape1" width="800" height="150"></canvas>
+</body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 21:40:01 +0000