update

1002.引力模拟.js

@@ -1,17 +1,18 @@
+/**
+ * 引力模拟
+ */
+
 const planets = [];
-const plantsNumber = 100;
+const plantsNumber = 10;
-// const width = 3840;
-// const height = 600;
 let sun;
 
 function setup() {
-    createCanvas(displayWidth, displayHeight);
+    createCanvas(1728, 972);
-    print(height);
     noStroke();
     colorMode(HSB);
     sun = createVector(width / 2, height / 2);
     for (let i = 0; i < plantsNumber; i++) {
-        const planet = new Planet(random(0, width), random(0, height));
+        const planet = new Planet(random(width), random(height));
         planet.vel = p5.Vector.random2D();
         planets.push(planet);
     }
@@ -45,7 +46,7 @@ class Planet {
         this.vel.add(this.acc);
         this.pos.add(this.vel);
         this.path.push(this.pos.copy());
-        if (this.path.length > 255) this.path.shift();
+        if (this.path.length > 1024) this.path.shift();
     }
     drawPath() {
         push();
@@ -91,7 +92,9 @@ class Planet {
     }
 }
 
-function mouseClicked() {
+function mouseClicked() {}
+
+function switchFullscreen() {
     let fs = fullscreen();
     fullscreen(!fs);
 }

3.基础图形绘画练习一.js

@@ -0,0 +1,145 @@
+function setup() {
+    createCanvas(400, 600);
+    // 画线
+    // stroke("#00FF00");
+    // line(50, 50, 150, 150);
+
+    // 画(椭)圆
+    // stroke("#FF0000");
+    // circle(300, 100, 100);
+    // ellipse(300, 100, 100, 100);
+
+    // 画矩形
+    // stroke("#FFFF00");
+    // square(75, 275, 50);
+    // rect(50, 250, 100, 100);
+
+    // 画三角形
+    // stroke("#0000FF");
+    // triangle(100, 250, 50, 350, 150, 350);
+
+    // 辅助线
+    // stroke("#DDDDFF");
+    // for (let x = 0; x < width; x += 25) {
+    //     line(x, 0, x, height);
+    // }
+    // for (let y = 0; y < height; y += 25) {
+    //     line(0, y, width, y);
+    // }
+}
+
+function draw() {
+    noStroke();
+    stroke("#333333");
+
+    // 天空
+    background("lightblue");
+
+    // 地面
+    fill("lightgreen");
+    rect(0, 275, width, height);
+
+    // 太阳
+    fill("#FF0000");
+    circle(100, 100, 75);
+
+    // 光
+    let a = frameCount % 50;
+    for (let i = 0; i < 8; i++) {
+        push();
+        translate(100, 100);
+        rotate((i / 4) * PI);
+        triangle(-5, 50 + a, 5, 50 + a, 0, 65 + a);
+        pop();
+    }
+
+    // 烟囱
+    fill("#7733CC");
+    rect(275, 125, 25, 100);
+
+    // 房顶
+    fill("#DD66FF");
+    triangle(250, 150, 150, 200, 350, 200);
+
+    // 墙
+    fill("#FFDDAA");
+    rect(175, 200, 150, 100);
+
+    // 窗户
+    fill("#FFFF66");
+    let b = map(a, 0, 50, -10, 10);
+    if (b > 0) {
+        ellipse(225, 225, 25 + b);
+        ellipse(275, 225, 25 - b);
+    } else {
+        ellipse(225, 225, 25 - b);
+        ellipse(275, 225, 25 + b);
+    }
+
+    // 门
+    fill("#DD33CC");
+    rect(235, 250, 30, 50);
+
+    bird(200, 75);
+    bird(300, 50);
+
+    // 树叶
+    fill("#66AA00");
+    triangle(100, 340, 40, 400, 160, 400);
+    fill("#AAFF00");
+    triangle(100, 325, 50, 375, 150, 375);
+    fill("#66AA00");
+    triangle(100, 305, 60, 350, 140, 350);
+
+    // 树干
+    fill("#FFDDAA");
+    rect(85, 400, 30, 50);
+
+    // 小路
+    fill("#DD66FF");
+    ellipse(275, 350, 50, 25);
+    fill("#7733CC");
+    ellipse(288, 400, 75, 35);
+    fill("#66AA00");
+    ellipse(300, 460, 100, 50);
+    fill("#FF9933");
+    ellipse(325, 550, 125, 70);
+
+    // 蘑菇
+    fill("#FF0000");
+    arc(175, 475, 50, 50, PI, 0, PIE);
+    fill("#FFDDAA");
+    circle(157, 470, 8);
+    circle(165, 462, 8);
+    circle(175, 457, 8);
+    circle(175, 470, 8);
+    circle(185, 462, 8);
+    circle(193, 470, 8);
+    fill("#FF9933");
+    rect(165, 475, 20, 20);
+
+    noStroke();
+    fill(0);
+    text("作品：基础图形绘画练习一", 50, 550);
+    text("作者：赵海洋爸爸 三(8)班", 50, 570);
+}
+
+function bird(x, y) {
+    push();
+    let a = frameCount % 10;
+    noFill();
+    stroke(0);
+    translate(x, y);
+    fill("#FFDDAA");
+    arc(0, 0, 50, 50, 0, PI, PIE);
+    ellipse(30, -10, 30);
+    fill("#FFFFFF");
+    ellipse(28, -10, 10);
+    fill("#333333");
+    ellipse(28, -10, 5);
+    fill("#FF3333");
+    triangle(40, -15, 40, -5, 60, -10);
+    fill("#FFFF66");
+    triangle(-20, -20 + a * 2, -10, 5, 10, -5);
+    pop();
+}

index.html

@@ -4,16 +4,18 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>p5.js example</title>
+        <link rel="shortcut icon" href="data:" type="image/x-icon" />
         <style>
-            body {
+            * {
                 padding: 0;
                 margin: 0;
-                background-color: #1b1b1b;
+                box-sizing: border-box;
+                background-color: gray;
             }
         </style>
         <script src="p5/p5.min.js"></script>
         <!-- <script src="p5/addons/p5.sound.js"></script> -->
-        <script src="1002.吸引.js"></script>
+        <script src="sketch.js"></script>
     </head>
 
     <body>

sketch.js

@@ -0,0 +1,145 @@
+function setup() {
+    createCanvas(400, 600);
+    // 画线
+    // stroke("#00FF00");
+    // line(50, 50, 150, 150);
+
+    // 画(椭)圆
+    // stroke("#FF0000");
+    // circle(300, 100, 100);
+    // ellipse(300, 100, 100, 100);
+
+    // 画矩形
+    // stroke("#FFFF00");
+    // square(75, 275, 50);
+    // rect(50, 250, 100, 100);
+
+    // 画三角形
+    // stroke("#0000FF");
+    // triangle(100, 250, 50, 350, 150, 350);
+
+    // 辅助线
+    // stroke("#DDDDFF");
+    // for (let x = 0; x < width; x += 25) {
+    //     line(x, 0, x, height);
+    // }
+    // for (let y = 0; y < height; y += 25) {
+    //     line(0, y, width, y);
+    // }
+}
+
+function draw() {
+    noStroke();
+    stroke("#333333");
+
+    // 天空
+    background("lightblue");
+
+    // 地面
+    fill("lightgreen");
+    rect(0, 275, width, height);
+
+    // 太阳
+    fill("#FF0000");
+    circle(100, 100, 75);
+
+    // 光
+    let a = frameCount % 50;
+    for (let i = 0; i < 8; i++) {
+        push();
+        translate(100, 100);
+        rotate((i / 4) * PI);
+        triangle(-5, 50 + a, 5, 50 + a, 0, 65 + a);
+        pop();
+    }
+
+    // 烟囱
+    fill("#7733CC");
+    rect(275, 125, 25, 100);
+
+    // 房顶
+    fill("#DD66FF");
+    triangle(250, 150, 150, 200, 350, 200);
+
+    // 墙
+    fill("#FFDDAA");
+    rect(175, 200, 150, 100);
+
+    // 窗户
+    fill("#FFFF66");
+    let b = map(a, 0, 50, -10, 10);
+    if (b > 0) {
+        ellipse(225, 225, 25 + b);
+        ellipse(275, 225, 25 - b);
+    } else {
+        ellipse(225, 225, 25 - b);
+        ellipse(275, 225, 25 + b);
+    }
+
+    // 门
+    fill("#DD33CC");
+    rect(235, 250, 30, 50);
+
+    bird(200, 75);
+    bird(300, 50);
+
+    // 树叶
+    fill("#66AA00");
+    triangle(100, 340, 40, 400, 160, 400);
+    fill("#AAFF00");
+    triangle(100, 325, 50, 375, 150, 375);
+    fill("#66AA00");
+    triangle(100, 305, 60, 350, 140, 350);
+
+    // 树干
+    fill("#FFDDAA");
+    rect(85, 400, 30, 50);
+
+    // 小路
+    fill("#DD66FF");
+    ellipse(275, 350, 50, 25);
+    fill("#7733CC");
+    ellipse(288, 400, 75, 35);
+    fill("#66AA00");
+    ellipse(300, 460, 100, 50);
+    fill("#FF9933");
+    ellipse(325, 550, 125, 70);
+
+    // 蘑菇
+    fill("#FF0000");
+    arc(175, 475, 50, 50, PI, 0, PIE);
+    fill("#FFDDAA");
+    circle(157, 470, 8);
+    circle(165, 462, 8);
+    circle(175, 457, 8);
+    circle(175, 470, 8);
+    circle(185, 462, 8);
+    circle(193, 470, 8);
+    fill("#FF9933");
+    rect(165, 475, 20, 20);
+
+    noStroke();
+    fill(0);
+    text("作品：基础图形绘画练习一", 50, 550);
+    text("作者：赵海洋爸爸 三(8)班", 50, 570);
+}
+
+function bird(x, y) {
+    push();
+    let a = frameCount % 10;
+    noFill();
+    stroke(0);
+    translate(x, y);
+    fill("#FFDDAA");
+    arc(0, 0, 50, 50, 0, PI, PIE);
+    ellipse(30, -10, 30);
+    fill("#FFFFFF");
+    ellipse(28, -10, 10);
+    fill("#333333");
+    ellipse(28, -10, 5);
+    fill("#FF3333");
+    triangle(40, -15, 40, -5, 60, -10);
+    fill("#FFFF66");
+    triangle(-20, -20 + a * 2, -10, 5, 10, -5);
+    pop();
+}