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

平移

Browse Source
This commit is contained in:
赵鑫 2023-01-06 11:00:34 +08:00
parent 8dadb7e121
commit 8558f449f6
3 changed files with 137 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

93
TEST.html
View File

@ -5,62 +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="/lib/p5/p5.min.js"></script> <script src="/lib/p5/p5.min.js"></script>
<script src="/lib/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 n = 0, let x,
h = 0, y,
m = null, z = 50;
c = null,
o = null,
p = null,
ma = null;
function setup() { function setup() {
createCanvas(innerWidth, innerHeight); createCanvas(800, 800);
angleMode(DEGREES);
colorMode(HSB); colorMode(HSB);
noStroke(); x = createSlider(-width / z, width / z, 0, 1);
m = createSlider(1, 5000, 500, 1); x.position(10, 10);
m.position(10, 10); y = createSlider(-height / z, height / z, 0, 1);
c = createSlider(5, 25, 15, 0.01); y.position(180, 10);
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() { function draw() {
background(0, 0, 0, 0.05); 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); translate(width / 2, height / 2);
rotate(n); stroke(128, 50, 50, 1);
for (let i = 0; i < m.value(); i++) { noFill();
let a = ma.value() * i, beginShape();
r = c.value() * sqrt(i); vertex(0 * z, 0 * z);
let x = r * cos(a), vertex(0 * z, -3 * z);
y = r * sin(a); vertex(1 * z, -2 * z);
let hu = map(sin(h + i), -1, 1, 0, 255); vertex(1 * z, 0 * z);
fill(hu, 100, 100, 0.5); endShape(CLOSE);
ellipse(x, y, c.value()); 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(); pop();
fill(0, 0, 255, 1); textInfo("平移", "2023/01/06");
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> </script>
</head> </head>

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