From 8dadb7e1212c9952e89cb2cb465239a2a6696ea2 Mon Sep 17 00:00:00 2001
From: Zhao Xin <7176466@qq.com>
Date: Tue, 3 Jan 2023 13:35:50 +0800
Subject: [PATCH] update

---
 15.向日葵.html   | 73 +++++++++++++++++++++++++++++++++++++
 16.我的画笔.html | 68 +++++++++++++++++++++++++++++++++++
 TEST.html        | 94 ++++++++++++++++++++----------------------------
 css/style.css    |  5 +--
 4 files changed, 183 insertions(+), 57 deletions(-)
 create mode 100644 15.向日葵.html
 create mode 100644 16.我的画笔.html
diff --git a/15.向日葵.html b/15.向日葵.html
new file mode 100644
index 0000000..0db5896
--- /dev/null
+++ b/15.向日葵.html
@@ -0,0 +1,73 @@
+<!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 n = 0, // 旋转角度
+                h = 0,
+                m = null, // 点的数量
+                c = null, // 点的大小
+                o = null,
+                p = null,
+                ma = null;
+
+            function setup() {
+                createCanvas(innerWidth, innerHeight);
+                angleMode(DEGREES);
+                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);
+            }
+
+            function draw() {
+                background(0, 0.05);
+
+                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);
+                    circle(x, y, c.value());
+                }
+                pop();
+
+                n = (n + o.value()) % 360000;
+                h = (h - p.value()) % 360000;
+
+                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);
+
+                textInfo("向日葵", "2023/01/01");
+            }
+        </script>
+    </head>
+
+    <body>
+        <main></main>
+    </body>
+</html>
diff --git a/16.我的画笔.html b/16.我的画笔.html
new file mode 100644
index 0000000..4f98f73
--- /dev/null
+++ b/16.我的画笔.html
@@ -0,0 +1,68 @@
+<!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>
+            // 避免右键菜单
+            window.oncontextmenu = function (e) {
+                e.preventDefault();
+            };
+
+            let 画笔颜色 = "#333333";
+            const 颜色仓库 = [
+                "#333333", // 0 黑
+                "#FF0000", // 1 红
+                "#FF8000", // 2 橙
+                "#FFFF00", // 3 黄
+                "#00FF00", // 4 绿
+                "#00FFFF", // 5 青
+                "#0000FF", // 6 蓝
+                "#FF00FF", // 7 紫
+            ];
+            const 画布颜色 = "#FFEECC";
+            const 橡皮粗细 = 20;
+            const 画笔粗细 = 5;
+
+            function setup() {
+                createCanvas(innerWidth, innerHeight);
+                background(画布颜色);
+            }
+
+            // 不同鼠标按键对应不同的功能
+            function mousePressed() {
+                if (mouseButton == "left") {
+                    stroke(画笔颜色);
+                    strokeWeight(画笔粗细);
+                } else if (mouseButton == "right") {
+                    stroke(画布颜色);
+                    strokeWeight(橡皮粗细);
+                } else if (mouseButton == "center") {
+                    background(画布颜色);
+                }
+            }
+
+            function mouseDragged() {
+                line(pmouseX, pmouseY, mouseX, mouseY);
+            }
+
+            // 数字键更换画笔颜色
+            function keyPressed() {
+                const n = int(key);
+                if (0 <= n && n < 颜色仓库.length) {
+                    画笔颜色 = 颜色仓库[n];
+                }
+            }
+        </script>
+    </head>
+
+    <body>
+        <main></main>
+    </body>
+</html>
diff --git a/TEST.html b/TEST.html
index e17d89e..8af4a22 100644
--- a/TEST.html
+++ b/TEST.html
@@ -5,78 +5,62 @@
         <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 fft;
-            let spectrum = [];
-            let waveform = [];
+            let n = 0,
+                h = 0,
+                m = null,
+                c = null,
+                o = null,
+                p = null,
+                ma = null;
 
             function setup() {
-                let canvas = createCanvas(400, 400);
-                canvas.mouseClicked(togglePlay);
+                createCanvas(innerWidth, innerHeight);
                 angleMode(DEGREES);
                 colorMode(HSB);
-                fft = new p5.FFT();
-                sound.amp(1);
-            }
-
-            function preload() {
-                sound = loadSound("/assets/Aloha Heja He - Achim Reichel.mp3");
-                // sound = loadSound("/assets/Pornophonique - Sad Robot.mp3");
-            }
-
-            function togglePlay() {
-                if (sound.isPlaying()) {
-                    sound.pause();
-                } else {
-                    sound.loop();
-                }
+                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);
             }
 
             function draw() {
-                background(0, 0.5);
-                // drawGrid(255);
-
-                if (sound.isPlaying()) spectrum = fft.analyze();
-                spectrum = spectrum.splice(0, 640);
+                background(0, 0, 0, 0.05);
 
                 push();
                 translate(width / 2, height / 2);
-                beginShape();
-                for (let i = 0; i < spectrum.length; i++) {
-                    let a = map(i, 0, spectrum.length, 0, 360);
-                    let h = map(spectrum[i], 0, 255, 0, 255);
-                    // push();
-                    let θ = (a + frameCount) % 360;
-                    // let θ = a;
-                    // rotate(θ);
-                    stroke(frameCount % 255, 255, 255, 0.5);
-                    strokeWeight(1);
-                    fill(frameCount % 255, 255, 255);
-                    // line(0, 0, cos(θ) * (h * 1.1), -sin(θ) * (h * 1.1));
-                    vertex(cos(θ) * h, -sin(θ) * h);
-                    // strokeWeight(h / 5);
-                    // point(cos(θ) * (h * 1.1), -sin(θ) * (h * 1.1));
-                    // pop();
+                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());
                 }
-                endShape(CLOSE);
                 pop();
 
-                // if (sound.isPlaying()) waveform = fft.waveform();
-                // noFill();
-                // beginShape();
-                // stroke(frameCount % 255, 255, 255);
-                // for (let i = 0; i < waveform.length; i++) {
-                //     let x = map(i, 0, waveform.length, 0, width);
-                //     let y = map(waveform[i], -1, 1, 0, height);
-                //     vertex(x, y);
-                // }
-                // endShape();
-
-                textInfo("音乐可视化", "2023/01/01");
+                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");
             }
         </script>
     </head>
diff --git a/css/style.css b/css/style.css
index e007a8f..ae24011 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,12 +1,13 @@
 * {
-    padding: 0;
     margin: 0;
+    padding: 0;
     box-sizing: border-box;
     background-color: gray;
 }
+
 body {
     display: flex;
     height: 100vh;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
 }
