zhaohaiyang/study
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

啊

Browse Source
This commit is contained in:
赵海洋 2022-12-18 15:56:32 +08:00
parent 414a5c9416
commit 231342a24e
13 changed files with 350 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/链接的练习.html
View File

@ -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" />

26
p5js/1.基本图形.js Normal file
View File

@ -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() {
}

41
p5js/2.基本图形绘画练习1.js Normal file
View File

@ -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);
}

76
p5js/3.太阳公公钟.js Normal file
View File

@ -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);
}

32
p5js/4.风扇.js Normal file
View File

@ -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();
}

23
p5js/5.a.js Normal file
View File

@ -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();
}

28
p5js/5.醉汉模拟.js Normal file
View File

@ -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;
}

22
p5js/setup.js Normal file
View File

@ -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);
});
}

30
p5js/动态数组。js Normal file
View File

@ -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)))
});
}

45
p5js/呼吸球.js Normal file
View File

@ -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);
}

1
练习/array.js Normal file
View File

@ -0,0 +1 @@
console.log("hello world");

24
练习/练习1.html Normal file
View File

@ -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>