From 8558f449f6887d285f037cc5ef962cc69280fd53 Mon Sep 17 00:00:00 2001
From: Zhao Xin <7176466@qq.com>
Date: Fri, 6 Jan 2023 11:00:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B9=B3=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 16.平移.html | 82 +++++++++++++++++++++++++++++++++++++++++++++
 TEST.html    | 93 +++++++++++++++++++++++++++++-----------------------
 lib/utils.js |  6 ++--
 3 files changed, 137 insertions(+), 44 deletions(-)
 create mode 100644 16.平移.html
diff --git a/16.平移.html b/16.平移.html
new file mode 100644
index 0000000..7c17d71
--- /dev/null
+++ b/16.平移.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="zh">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+        <link rel="stylesheet" href="/css/style.css" />
+        <title>平移</title>
+        <script src="/lib/p5/p5.min.js"></script>
+        <script src="/lib/p5/addons/p5.sound.min.js"></script>
+        <script src="/lib/utils.js"></script>
+        <script>
+            let x,
+                y,
+                z = 50;
+
+            function setup() {
+                createCanvas(800, 800);
+                colorMode(HSB);
+                x = createSlider(-width / z, width / z, 0, 1);
+                x.position(10, 10);
+                y = createSlider(-height / z, height / z, 0, 1);
+                y.position(180, 10);
+            }
+
+            function draw() {
+                background(50);
+                drawGrid(255, 32, 50);
+                noStroke();
+                fill(0, 0, 0, 1);
+                text(
+                    `向${x.value() < 0 ? "左" : "右"}平移 ${abs(x.value())}`,
+                    10,
+                    10
+                );
+                text(
+                    `向${y.value() < 0 ? "上" : "下"}平移 ${abs(y.value())}`,
+                    180,
+                    10
+                );
+
+                push();
+                translate(width / 2, height / 2);
+                stroke(128, 50, 50, 1);
+                noFill();
+                beginShape();
+                vertex(0 * z, 0 * z);
+                vertex(0 * z, -3 * z);
+                vertex(1 * z, -2 * z);
+                vertex(1 * z, 0 * z);
+                endShape(CLOSE);
+                beginShape();
+                vertex(-2 * z, 0 * z);
+                vertex(3 * z, 0 * z);
+                vertex(2 * z, 1 * z);
+                vertex(-1 * z, 1 * z);
+                endShape(CLOSE);
+                stroke(128, 100, 100, 1);
+                fill(128, 100, 100, 0.5);
+                beginShape();
+                vertex((0 + x.value()) * z, (0 + y.value()) * z);
+                vertex((0 + x.value()) * z, (-3 + y.value()) * z);
+                vertex((1 + x.value()) * z, (-2 + y.value()) * z);
+                vertex((1 + x.value()) * z, (0 + y.value()) * z);
+                endShape(CLOSE);
+                beginShape();
+                vertex((-2 + x.value()) * z, (0 + y.value()) * z);
+                vertex((3 + x.value()) * z, (0 + y.value()) * z);
+                vertex((2 + x.value()) * z, (1 + y.value()) * z);
+                vertex((-1 + x.value()) * z, (1 + y.value()) * z);
+                endShape(CLOSE);
+                pop();
+
+                textInfo("平移", "2023/01/06");
+            }
+        </script>
+    </head>
+
+    <body>
+        <main></main>
+    </body>
+</html>
diff --git a/TEST.html b/TEST.html
index 8af4a22..7c17d71 100644
--- a/TEST.html
+++ b/TEST.html
@@ -5,62 +5,73 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
         <link rel="stylesheet" href="/css/style.css" />
-        <title>向日葵</title>
+        <title>平移</title>
         <script src="/lib/p5/p5.min.js"></script>
         <script src="/lib/p5/addons/p5.sound.min.js"></script>
         <script src="/lib/utils.js"></script>
         <script>
-            let n = 0,
-                h = 0,
-                m = null,
-                c = null,
-                o = null,
-                p = null,
-                ma = null;
+            let x,
+                y,
+                z = 50;
 
             function setup() {
-                createCanvas(innerWidth, innerHeight);
-                angleMode(DEGREES);
+                createCanvas(800, 800);
                 colorMode(HSB);
-                noStroke();
-                m = createSlider(1, 5000, 500, 1);
-                m.position(10, 10);
-                c = createSlider(5, 25, 15, 0.01);
-                c.position(180, 10);
-                o = createSlider(-20, 20, 0, 0.01);
-                o.position(350, 10);
-                p = createSlider(-20, 20, 0, 0.01);
-                p.position(520, 10);
-                ma = createSlider(0, 360, 137.5, 0.01);
-                ma.position(690, 10);
+                x = createSlider(-width / z, width / z, 0, 1);
+                x.position(10, 10);
+                y = createSlider(-height / z, height / z, 0, 1);
+                y.position(180, 10);
             }
 
             function draw() {
-                background(0, 0, 0, 0.05);
+                background(50);
+                drawGrid(255, 32, 50);
+                noStroke();
+                fill(0, 0, 0, 1);
+                text(
+                    `向${x.value() < 0 ? "左" : "右"}平移 ${abs(x.value())}`,
+                    10,
+                    10
+                );
+                text(
+                    `向${y.value() < 0 ? "上" : "下"}平移 ${abs(y.value())}`,
+                    180,
+                    10
+                );
 
                 push();
                 translate(width / 2, height / 2);
-                rotate(n);
-                for (let i = 0; i < m.value(); i++) {
-                    let a = ma.value() * i,
-                        r = c.value() * sqrt(i);
-                    let x = r * cos(a),
-                        y = r * sin(a);
-                    let hu = map(sin(h + i), -1, 1, 0, 255);
-                    fill(hu, 100, 100, 0.5);
-                    ellipse(x, y, c.value());
-                }
+                stroke(128, 50, 50, 1);
+                noFill();
+                beginShape();
+                vertex(0 * z, 0 * z);
+                vertex(0 * z, -3 * z);
+                vertex(1 * z, -2 * z);
+                vertex(1 * z, 0 * z);
+                endShape(CLOSE);
+                beginShape();
+                vertex(-2 * z, 0 * z);
+                vertex(3 * z, 0 * z);
+                vertex(2 * z, 1 * z);
+                vertex(-1 * z, 1 * z);
+                endShape(CLOSE);
+                stroke(128, 100, 100, 1);
+                fill(128, 100, 100, 0.5);
+                beginShape();
+                vertex((0 + x.value()) * z, (0 + y.value()) * z);
+                vertex((0 + x.value()) * z, (-3 + y.value()) * z);
+                vertex((1 + x.value()) * z, (-2 + y.value()) * z);
+                vertex((1 + x.value()) * z, (0 + y.value()) * z);
+                endShape(CLOSE);
+                beginShape();
+                vertex((-2 + x.value()) * z, (0 + y.value()) * z);
+                vertex((3 + x.value()) * z, (0 + y.value()) * z);
+                vertex((2 + x.value()) * z, (1 + y.value()) * z);
+                vertex((-1 + x.value()) * z, (1 + y.value()) * z);
+                endShape(CLOSE);
                 pop();
 
-                fill(0, 0, 255, 1);
-                text(m.value(), 10, 60);
-                text(c.value().toFixed(2), 180, 60);
-                text(o.value().toFixed(2), 350, 60);
-                text(p.value().toFixed(2), 520, 60);
-                text(ma.value().toFixed(2), 690, 60);
-                n = (n + o.value()) % 360000;
-                h = (h - p.value()) % 360000;
-                textInfo("向日葵", "2023/01/01");
+                textInfo("平移", "2023/01/06");
             }
         </script>
     </head>
diff --git a/lib/utils.js b/lib/utils.js
index ca31c60..e92a038 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -21,13 +21,13 @@ function playdemos(list, delay = 10) {
     func();
 }
 
-function drawGrid(color = 255, fade = 32) {
+function drawGrid(color = 255, fade = 32, offset = 10) {
     push();
     colorMode(RGB);
     stroke(color, fade);
     strokeWeight(1);
-    for (let x = 0; x < width; x += 10) line(x, 0, x, height);
-    for (let y = 0; y < height; y += 10) line(0, y, width, y);
+    for (let x = 0; x < width; x += offset) line(x, 0, x, height);
+    for (let y = 0; y < height; y += offset) line(0, y, width, y);
     pop();
 }
 
