zhao/p5js
zhao/p5js
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of ssh://nas:2222/zhao/p5js

Browse Source
This commit is contained in:
赵鑫 2023-02-19 14:40:28 +08:00
commit 912ec4a639
30 changed files with 403 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
0.作品模板.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>作品模板</title> <title>作品模板</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script> <script>
function setup() { function setup() {

4
1.基础图形绘画练习一.html
View File

@ -5,8 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.js"></script> <script src="/lib/p5/addons/p5.sound.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<title>基础图形绘画练习一</title> <title>基础图形绘画练习一</title>
<script> <script>

4
10.单摆.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>单摆</title> <title>单摆</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script src="/lib/pendulum.js"></script> <script src="/lib/pendulum.js"></script>
<script> <script>

4
11.风扇.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>风扇</title> <title>风扇</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script> <script>
const FPS = 60; const FPS = 60;

2
12.threejs初探.html
View File

@ -6,7 +6,7 @@
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
</head> </head>
<body> <body>
<script src="lib/three.js/three.js"></script> <script src="/lib/three.js/three.js"></script>
<script> <script>
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const sceneRatio = window.innerWidth / window.innerHeight; const sceneRatio = window.innerWidth / window.innerHeight;

4
13.画圆.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>画圆</title> <title>画圆</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script> <script>
let o, d; let o, d;

87
14.音乐可视化.html Normal file
View File

@ -0,0 +1,87 @@
<!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 fft;
let spectrum = [];
let waveform = [];
function setup() {
let canvas = createCanvas(400, 400);
canvas.mouseClicked(togglePlay);
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();
}
}
function draw() {
background(0, 0.5);
// drawGrid(255);
if (sound.isPlaying()) spectrum = fft.analyze();
spectrum = spectrum.splice(0, 640);
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();
}
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");
}
</script>
</head>
<body>
<main></main>
</body>
</html>

73
15.向日葵.html Normal file
View File

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

82
16.平移.html Normal file
View File

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

68
16.我的画笔.html Normal file
View File

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

4
2.太阳公公钟.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>太阳公公钟</title> <title>太阳公公钟</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script> <script>
const 分钟毫秒数 = 60 * 1000; const 分钟毫秒数 = 60 * 1000;

4
3.火把.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>火把</title> <title>火把</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script src="/lib/particle.js"></script> <script src="/lib/particle.js"></script>
<script> <script>

4
4.柏林噪声.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>柏林噪声</title> <title>柏林噪声</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script> <script>
let x, let x,

4
5.醉汉模拟.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>醉汉模拟</title> <title>醉汉模拟</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script> <script>
let walker; let walker;

4
6.引力模拟.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>引力模拟</title> <title>引力模拟</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script> <script>
const planets = []; const planets = [];

4
7.幸运转盘.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>幸运转盘</title> <title>幸运转盘</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script src="/lib/particle.js"></script> <script src="/lib/particle.js"></script>
<script> <script>

4
8.小车的运动.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>小车的运动</title> <title>小车的运动</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script src="/lib/vehicle.js"></script> <script src="/lib/vehicle.js"></script>
<script> <script>

4
9.圆周与正弦波.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>圆周与正弦波</title> <title>圆周与正弦波</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script> <script>
function setup() { function setup() {

77
TEST.html
View File

@ -5,34 +5,73 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>测试</title> <title>平移</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script> <script>
let x,
y,
z = 50;
function setup() { function setup() {
createCanvas(600, 600); createCanvas(800, 800);
background("#33DDFF"); colorMode(HSB);
drawGrid(0); x = createSlider(-width / z, width / z, 0, 1);
noLoop(); x.position(10, 10);
y = createSlider(-height / z, height / z, 0, 1);
y.position(180, 10);
} }
function mousePressed() { 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(); push();
translate(width / 2, height / 2);
stroke(128, 50, 50, 1);
noFill(); noFill();
stroke("#FFDD33");
strokeWeight(4);
translate(mouseX, mouseY);
beginShape(); beginShape();
for (let θ = 0; θ < PI * 6; θ += 0.1) { vertex(0 * z, 0 * z);
let a = 0; vertex(0 * z, -3 * z);
let b = 2; vertex(1 * z, -2 * z);
let r = a + b * θ; vertex(1 * z, 0 * z);
let v = polarToCartesian(r, θ); endShape(CLOSE);
vertex(v.x, v.y); beginShape();
} vertex(-2 * z, 0 * z);
endShape(); 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(); pop();
textInfo("平移", "2023/01/06");
} }
</script> </script>
</head> </head>

BIN
assets/Aloha Heja He - Achim Reichel.mp3 Normal file
View File

Binary file not shown.

BIN
assets/Pornophonique - Sad Robot.mp3 Normal file
View File

Binary file not shown.

5
css/style.css
View File

@ -1,12 +1,13 @@
* { * {
padding: 0;
margin: 0; margin: 0;
padding: 0;
box-sizing: border-box; box-sizing: border-box;
background-color: gray; background-color: gray;
} }
body { body {
display: flex; display: flex;
height: 100vh; height: 100vh;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
} }

0
p5/addons/p5.sound.js → lib/p5/addons/p5.sound.js
View File

0
p5/addons/p5.sound.js.map → lib/p5/addons/p5.sound.js.map
View File

0
p5/addons/p5.sound.min.js → lib/p5/addons/p5.sound.min.js vendored
View File

0
p5/addons/p5.sound.min.js.map → lib/p5/addons/p5.sound.min.js.map
View File

0
p5/p5.js → lib/p5/p5.js
View File

0
p5/p5.min.js → lib/p5/p5.min.js vendored
View File

6
lib/utils.js
View File

@ -21,13 +21,13 @@ function playdemos(list, delay = 10) {
func(); func();
} }
function drawGrid(color = 255, fade = 32) { function drawGrid(color = 255, fade = 32, offset = 10) {
push(); push();
colorMode(RGB); colorMode(RGB);
stroke(color, fade); stroke(color, fade);
strokeWeight(1); strokeWeight(1);
for (let x = 0; x < width; x += 10) line(x, 0, x, height); for (let x = 0; x < width; x += offset) line(x, 0, x, height);
for (let y = 0; y < height; y += 10) line(0, y, width, y); for (let y = 0; y < height; y += offset) line(0, y, width, y);
pop(); pop();
} }

4
卡牌生存/index.html
View File

@ -6,8 +6,8 @@
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
<title>卡牌生存</title> <title>卡牌生存</title>
<script src="/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/p5/addons/p5.sound.min.js"></script> <script src="/lib/p5/addons/p5.sound.min.js"></script>
<script src="/lib/utils.js"></script> <script src="/lib/utils.js"></script>
<script src="card.js"></script> <script src="card.js"></script>
<script src="main.js"></script> <script src="main.js"></script>