From 231342a24e6d2cea9f9d3b6bde6289340e572248 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=B5=B7=E6=B4=8B?= <zhaohaiyang@haoohaoo.com>
Date: Sun, 18 Dec 2022 15:56:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html/生成给定范围的随机整数.html |  2 +-
 html/链接的练习.html             |  2 +-
 p5js/1.基本图形.js               | 26 +++++++++++
 p5js/2.基本图形绘画练习1.js      | 41 +++++++++++++++++
 p5js/3.太阳公公钟.js             | 76 ++++++++++++++++++++++++++++++++
 p5js/4.风扇.js                   | 32 ++++++++++++++
 p5js/5.a.js                      | 23 ++++++++++
 p5js/5.醉汉模拟.js               | 28 ++++++++++++
 p5js/setup.js                    | 22 +++++++++
 p5js/动态数组。js                | 30 +++++++++++++
 p5js/呼吸球.js                   | 45 +++++++++++++++++++
 练习/array.js                    |  1 +
 练习/练习1.html                  | 24 ++++++++++
 13 files changed, 350 insertions(+), 2 deletions(-)
 create mode 100644 p5js/1.基本图形.js
 create mode 100644 p5js/2.基本图形绘画练习1.js
 create mode 100644 p5js/3.太阳公公钟.js
 create mode 100644 p5js/4.风扇.js
 create mode 100644 p5js/5.a.js
 create mode 100644 p5js/5.醉汉模拟.js
 create mode 100644 p5js/setup.js
 create mode 100644 p5js/动态数组。js
 create mode 100644 p5js/呼吸球.js
 create mode 100644 练习/array.js
 create mode 100644 练习/练习1.html
diff --git a/html/生成给定范围的随机整数.html b/html/生成给定范围的随机整数.html
index 8aa004c..51507ac 100644
--- a/html/生成给定范围的随机整数.html
+++ b/html/生成给定范围的随机整数.html
@@ -12,7 +12,7 @@
     <p>例如： 生成1-10范围的随机整数</p>
     <p>随机数: <span id="random"></span></p>
     <button onclick="change()">换一个</button>
-    <script>
+    <script> 
       function randint(min = 1, max = 10) {
         min = Math.ceil(min);
         max = Math.floor(max);
diff --git a/html/链接的练习.html b/html/链接的练习.html
index 62cc42f..961041d 100644
--- a/html/链接的练习.html
+++ b/html/链接的练习.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
diff --git a/p5js/1.基本图形.js b/p5js/1.基本图形.js
new file mode 100644
index 0000000..363556e
--- /dev/null
+++ b/p5js/1.基本图形.js
@@ -0,0 +1,26 @@
+function setup() {
+    createCanvas(400, 400);
+    background(0);
+    strokeWeight(2);
+    noFill();
+
+    // 画线
+    stroke("#FFFFFF");
+    line(50, 50, 150, 150);
+
+    // 画圆
+    stroke("red");
+    // circle(300, 100, 100);
+    ellipse(300, 100, 100);
+
+    // 画矩形
+    stroke("blue");
+    square(75, 275, 50);
+    rect(50, 250, 100);
+
+    // 画三角形
+    stroke("yellow");
+    triangle(300, 250, 350, 350, 250, 350);
+}
+function draw() {
+}
\ No newline at end of file
diff --git a/p5js/2.基本图形绘画练习1.js b/p5js/2.基本图形绘画练习1.js
new file mode 100644
index 0000000..7ead120
--- /dev/null
+++ b/p5js/2.基本图形绘画练习1.js
@@ -0,0 +1,41 @@
+function setup() {
+    createCanvas(600, 800);
+    background(255);
+    noStroke();
+
+    fill("#FF0000");
+    ellipse(100, 100, 90);
+
+    fill("#0000CC");
+    rect(450, 99, 50, 100);
+
+    fill("#DDAAFF");
+    triangle(400, 100, 250, 200, 550, 200);
+
+    fill("#EEBB55");
+    rect(300, 200, 190, 200);
+
+
+    fill("#DDDD00");
+    ellipse(350, 250, 40);
+    ellipse(420, 250, 40);
+
+    fill("#DDAABB");
+    rect(350, 300, 80, 100);
+
+    fill("#33AA00");
+    triangle(100, 300, 25, 350, 175, 350);
+    fill("#00FF00");
+    triangle(100, 275, 40, 325, 160, 325);
+    fill("#33AA00");
+    triangle(100, 230, 50, 290, 150, 290);
+    fill("brown");
+    rect(85, 350, 30, 50);
+
+    fill("#DDAAFF");
+    ellipse(450, 450, 50, 25);
+    fill("#0000CC");
+    ellipse(433, 560, 75, 35);
+    fill("#33AA00");
+    ellipse(411, 670, 100, 45);
+}
\ No newline at end of file
diff --git a/p5js/3.太阳公公钟.js b/p5js/3.太阳公公钟.js
new file mode 100644
index 0000000..5a052cf
--- /dev/null
+++ b/p5js/3.太阳公公钟.js
@@ -0,0 +1,76 @@
+const width = 600;
+const height = 600;
+
+function setup() {
+    noCursor();
+    createCanvas(width, height);
+    fill("#FFCC00");
+    angleMode(DEGREES);
+    frameRate(60);
+}
+
+function draw() {
+    strokeWeight(8);
+    stroke("#FFFF00");
+    background("skyblue");
+    translate(width / 2, height / 2);
+    let a = frameCount % 30 + 1;
+    for (let i = 0, n = 12; i < n; i++) {
+        line(0, -60 - a * 12, 0, -80 - a * 12);
+        rotate(360 / n);
+    }
+    circle(0, 0, 300);
+
+    arc(-50, 0, 80, 80, -135, -45);
+    arc(50, 0, 80, 80, -135, -45);
+    arc(0, 0, 160, 160, 45, 135);
+
+    for (let i = 0, n = 12; i < n; i++) {
+        line(0, -130, 0, -150);
+        rotate(360 / n);
+    }
+
+    strokeWeight(4);
+    for (let i = 0, n = 60; i < n; i++) {
+        line(0, -140, 0, -150);
+        rotate(360 / n);
+    }
+
+    const now = Date.now() + 3600000 * 8;
+    stroke('#000000');
+    strokeWeight(6);
+
+    push();
+    let l = now % 43200000 / 43200000 * 360;
+    rotate(l);
+    line(0, 10, 0, -90);
+    pop();
+
+    push();
+    let f = now % 3600000 / 10000;
+    rotate(f);
+    line(0, 10, 0, -120);
+    pop();
+
+    push();
+    let d = now % 60000;
+    let e = d * 6 / 1000;
+    stroke('#FF0000');
+    strokeWeight(2);
+    rotate(e);
+    line(0, 10, 0, -130);
+    pop();
+    
+    push();
+    strokeWeight(2);
+    stroke('#FF0000');
+    fill('#000000');
+    circle(0, 0, 8);
+    pop();
+
+}
+
+
+function mouseClicked() {
+    print(mouseX, mouseY);
+}
\ No newline at end of file
diff --git a/p5js/4.风扇.js b/p5js/4.风扇.js
new file mode 100644
index 0000000..3033058
--- /dev/null
+++ b/p5js/4.风扇.js
@@ -0,0 +1,32 @@
+class Circle {
+    // 构造器。
+    constructor(x, y, d, c) {
+        this.x = x;
+        this.y = y;
+        this.d = d;
+        this.c = c;
+    }
+    // draw中文：画。
+    draw() {
+        noStroke();
+        fill(this.c);
+        ellipse(this.x, this.y, this.d);
+    }
+}
+
+// 全局常量或变量。
+const width = 300;
+const height = 500;
+let c1, c2;
+
+function setup() {
+    createCanvas(width, height);
+    c1 = new Circle(90, 90, 80, "#DDDD00");
+    c2 = new Circle(90, 180, 80, 'red');
+}
+
+function draw() {
+    background(150);
+    c1.draw();
+    c2.draw();
+}
\ No newline at end of file
diff --git a/p5js/5.a.js b/p5js/5.a.js
new file mode 100644
index 0000000..1048e10
--- /dev/null
+++ b/p5js/5.a.js
@@ -0,0 +1,23 @@
+function setup() {
+    createCanvas(400, 400);
+    background(255);
+    noLoop();
+    stroke(0);
+    angleMode(DEGREES);
+}
+
+function mouseDragged() {
+    push();
+    translate(mouseX, mouseY);
+    fill(200);
+    strokeWeight(2);
+    let n = 12;
+    for (let i = 0; i < n; i++) {
+        line(0, 0, 0, -50 + random(10, 60));
+        rotate(360 / n);
+    }
+
+    strokeWeight(4);
+    ellipse(0, 0, 10);
+    pop();
+}
\ No newline at end of file
diff --git a/p5js/5.醉汉模拟.js b/p5js/5.醉汉模拟.js
new file mode 100644
index 0000000..896c7c4
--- /dev/null
+++ b/p5js/5.醉汉模拟.js
@@ -0,0 +1,28 @@
+const width = 400;
+const height = 400;
+const d = 1;
+let x, y;
+
+function setup() {
+    createCanvas(width, height);
+    background(255);
+    x = width / 2;
+    y = height / 2;
+    stroke('#AA00FF');
+    strokeWeight(d);
+}
+
+function draw() {
+    point(x, y);
+    let r = ceil(random(0, 4));
+    if (r == 1) y -= d;
+    else if (r == 2) y += d;
+    else if (r == 3) x -= d;
+    else x += d;
+}
+
+function mousePressed() {
+    background(255);
+    x = width / 2;
+    y = height / 2;
+}
\ No newline at end of file
diff --git a/p5js/setup.js b/p5js/setup.js
new file mode 100644
index 0000000..c436dff
--- /dev/null
+++ b/p5js/setup.js
@@ -0,0 +1,22 @@
+const circles = [
+    { x: 100, y: 100, color: "red", size: 40 },
+    { x: 200, y: 100, color: "orange", size: 40 },
+    { x: 300, y: 100, color: "yellow", size: 40 },
+    { x: 100, y: 200, color: "green", size: 40 },
+    { x: 200, y: 200, color: "cyan", size: 40 },
+    { x: 300, y: 200, color: "blue", size: 40 },
+    { x: 100, y: 300, color: "purple", size: 40 },
+    { x: 200, y: 300, color: "gray", size: 40 },
+    { x: 300, y: 300, color: "black", size: 40 },
+];
+
+function setup() {
+    createCanvas(400, 400);
+    background(255);
+    circles.forEach((c) => {
+        strokeWeight(2);
+        stroke(0);
+        fill(c.color);
+        circle(c.x, c.y, c.size);
+    });
+}
\ No newline at end of file
diff --git a/p5js/动态数组。js b/p5js/动态数组。js
new file mode 100644
index 0000000..d28d60d
--- /dev/null
+++ b/p5js/动态数组。js
@@ -0,0 +1,30 @@
+const circles = [];
+
+function setup() {
+    createCanvas(600, 400);
+    strokeWeight(1);
+    stroke(0);
+}
+
+function draw() {
+    background(255);
+    circles.forEach((o, i, circles) => {
+        fill(o.color);
+        circle(o.x, o.y, o.size);
+        o.y += 5;
+        if (o.y > 420) {
+            circles.splice(i, 1);
+        }
+    });
+
+    text(circles.length, 40, 40);
+}
+
+function mousePressed() {
+    circles.push({
+        x: mouseX,
+        y: mouseY,
+        color: Math.floor((random(100, 201))),
+        size: Math.floor((random(20, 41)))
+    });
+}
diff --git a/p5js/呼吸球.js b/p5js/呼吸球.js
new file mode 100644
index 0000000..f8a2aab
--- /dev/null
+++ b/p5js/呼吸球.js
@@ -0,0 +1,45 @@
+const ball = {
+    x: 200,
+    y: 200,
+    size: 0,
+    speed: 1,
+};
+
+function setup() {
+    createCanvas(400, 400);
+}
+
+function draw() {
+    background(255);
+    strokeWeight(2);
+    fill(ball.size, 0, 0);
+    star(ball.x, ball.y, 100, ball.size, 5);
+
+    ball.size += ball.speed;
+    ball.speed *= 1.5;
+
+    if (ball.size >= 200) {
+        ball.size = 200;
+        ball.speed = -1;
+    }
+
+    if (ball.size <= 0) {
+        ball.size = 0;
+        ball.speed = 1;
+    }
+}
+
+function star(x, y, radius1, radius2, npoints) {
+    let angle = TWO_PI / npoints;
+    let halfAngle = angle / 2.0;
+    beginShape();
+    for (let a = 0; a < TWO_PI; a += angle) {
+        let sx = x + cos(a) * radius2;
+        let sy = y + sin(a) * radius2;
+        vertex(sx, sy);
+        sx = x + cos(a + halfAngle) * radius1;
+        sy = y + sin(a + halfAngle) * radius1;
+        vertex(sx, sy);
+    }
+    endShape(CLOSE);
+}
\ No newline at end of file
diff --git a/练习/array.js b/练习/array.js
new file mode 100644
index 0000000..0f50426
--- /dev/null
+++ b/练习/array.js
@@ -0,0 +1 @@
+console.log("hello world");
\ No newline at end of file
diff --git a/练习/练习1.html b/练习/练习1.html
new file mode 100644
index 0000000..ee2821b
--- /dev/null
+++ b/练习/练习1.html
@@ -0,0 +1,24 @@
+<!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="data:" type="image/x-icon" />
+    <title>判断闰年</title>
+  </head>
+  <body>
+    <input type="text" id="year" placeholder="输入按回车" />
+    <p id="result"></p>
+    <script>
+      document.addEventListener('keyup', (e) => {
+        if (e.key == 'Enter' && year.value.match(/^[1-9]\d*/)) {
+        const Y = Number(year.value)
+        const N = Y % 400 == 0 || Y % 100 && Y % 4 == 0 ? '' : '不'
+        result.innerText = `${Y}是${N}闰年`
+        year.value = '' //把格子清空。
+        year.focus() // 把光标移格子里。
+        }
+      })
+    </script>
+  </body>
+</html>
