Skip to content

Commit 291c4ec

Browse files
BreadMotionBreadMotion
committed
Merge branch 'develop'
2 parents 6da86ff + b939509 commit 291c4ec

24 files changed

+192
-66
lines changed

‎assets/css/layout.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -413,3 +413,14 @@
413413
body.no-scroll {
414414
overflow: hidden;
415415
}
416+
417+
#menuAnimationCanvas {
418+
position: absolute;
419+
top: 0;
420+
left: 0;
421+
width: 100vw;
422+
height: auto;
423+
min-height: 100vh;
424+
z-index: -1;
425+
pointer-events: none;
426+
}

‎assets/js/layout.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,8 @@ document.addEventListener("DOMContentLoaded", () => {
1111

1212
// header と footer をまとめて読み込む
1313
Promise.all([
14-
fetch(
15-
"https://breadmotion.github.io/WebSite/partials/header.html",
16-
).then((r) => r.text()),
17-
fetch(
18-
"https://breadmotion.github.io/WebSite/partials/footer.html",
19-
).then((r) => r.text()),
14+
fetch("/partials/header.html").then((r) => r.text()),
15+
fetch("/partials/footer.html").then((r) => r.text()),
2016
])
2117
.then(([headerHtml, footerHtml]) => {
2218
// body の先頭に header、末尾に footer を挿入

‎assets/js/menuAnimation.js‎

Lines changed: 89 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,101 @@
11
let animationCanvas;
2-
let circleSize = 0;
3-
let growing = true;
2+
let particles = [];
3+
const numParticles = 100;
4+
const maxParticleSize = 8;
5+
const minParticleSize = 2;
6+
const maxSpeed = 2;
7+
const repulsionRadius = 150;
8+
const repulsionStrength = 1;
49

510
function setup() {
6-
const parent = document.getElementById(
7-
"menuAnimationCanvas",
8-
).parentElement;
9-
animationCanvas = createCanvas(
10-
parent.offsetWidth,
11-
parent.offsetHeight,
11+
let pageHeight = Math.max(
12+
document.body.scrollHeight,
13+
document.documentElement.scrollHeight,
14+
document.body.offsetHeight,
15+
document.documentElement.offsetHeight,
16+
document.body.clientHeight,
17+
document.documentElement.clientHeight,
1218
);
13-
animationCanvas.parent("menuAnimationCanvas");
14-
background(22, 27, 34); // 背景色を一度だけ設定
19+
20+
animationCanvas = createCanvas(windowWidth, pageHeight);
21+
animationCanvas.position(0, 0);
22+
animationCanvas.style("z-index", "-1");
23+
animationCanvas.style("pointer-events", "none");
24+
25+
for (let i = 0; i < numParticles; i++) {
26+
particles.push(new Particle());
27+
}
1528
}
1629

1730
function draw() {
18-
background(22, 27, 34, 50);
19-
noStroke();
20-
fill(255, 255, 255, 150);
21-
22-
if (growing) {
23-
circleSize += 0.5;
24-
if (circleSize > 50) {
25-
growing = false;
26-
}
27-
} else {
28-
circleSize -= 0.5;
29-
if (circleSize < 10) {
30-
growing = true;
31-
}
32-
}
33-
ellipse(width / 2, height / 2, circleSize, circleSize);
31+
clear();
3432

35-
fill(255, 255, 255, 80);
36-
ellipse(mouseX, mouseY, 15, 15);
33+
for (let particle of particles) {
34+
particle.update();
35+
particle.display();
36+
}
3737
}
3838

3939
function windowResized() {
40-
const parent = document.getElementById(
41-
"menuAnimationCanvas",
42-
).parentElement;
43-
resizeCanvas(parent.offsetWidth, parent.offsetHeight);
40+
let pageHeight = Math.max(
41+
document.body.scrollHeight,
42+
document.documentElement.scrollHeight,
43+
document.body.offsetHeight,
44+
document.documentElement.offsetHeight,
45+
document.body.clientHeight,
46+
document.documentElement.clientHeight,
47+
);
48+
resizeCanvas(windowWidth, pageHeight);
49+
}
50+
51+
class Particle {
52+
constructor() {
53+
this.pos = createVector(random(width), random(height));
54+
this.vel = p5.Vector.random2D().mult(
55+
random(0.5, maxSpeed),
56+
);
57+
this.acc = createVector(0, 0);
58+
this.size = random(minParticleSize, maxParticleSize);
59+
this.color = color(255, 255, 255, random(50, 150)); // 半透明の白
60+
}
61+
62+
applyForce(force) {
63+
this.acc.add(force);
64+
}
65+
66+
update() {
67+
let mouse = createVector(mouseX, mouseY);
68+
let force = p5.Vector.sub(this.pos, mouse);
69+
let distance = force.mag();
70+
71+
if (distance < repulsionRadius) {
72+
let strength =
73+
-repulsionStrength / (distance * distance);
74+
force.setMag(strength);
75+
this.applyForce(force);
76+
}
77+
78+
this.vel.add(this.acc);
79+
this.vel.limit(maxSpeed);
80+
this.pos.add(this.vel);
81+
this.acc.mult(0);
82+
83+
if (this.pos.x > width || this.pos.x < 0) {
84+
this.vel.x *= -1;
85+
}
86+
if (this.pos.y > height || this.pos.y < 0) {
87+
this.vel.y *= -1;
88+
}
89+
90+
if (this.pos.x > width) this.pos.x = 0;
91+
if (this.pos.x < 0) this.pos.x = width;
92+
if (this.pos.y > height) this.pos.y = 0;
93+
if (this.pos.y < 0) this.pos.y = height;
94+
}
95+
96+
display() {
97+
noStroke();
98+
fill(this.color);
99+
ellipse(this.pos.x, this.pos.y, this.size, this.size);
100+
}
44101
}

‎blog.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,10 +155,12 @@ <h2>記事一覧</h2>
155155
</main>
156156
</div>
157157

158-
<!-- 共通JS -->
159158
<script src="assets/js/layout.js" defer></script>
160159
<script src="assets/js/ui.js"></script>
161-
<!-- Blog専用JS -->
162160
<script src="assets/js/blog.js" defer></script>
161+
162+
<canvas id="menuAnimationCanvas"></canvas>
163+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
164+
<script src="assets/js/menuAnimation.js"></script>
163165
</body>
164166
</html>

‎blog/blog_00001.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,5 +77,9 @@ <h2>最後に</h2>
7777

7878
<script src="../assets/js/layout.js" defer></script>
7979
<script src="../assets/js/ui.js"></script>
80+
81+
<canvas id="menuAnimationCanvas"></canvas>
82+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
83+
<script src="assets/js/menuAnimation.js"></script>
8084
</body>
8185
</html>

‎blog/blog_00002.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,5 +223,9 @@ <h3>手順 3: <code>.meta</code> 差分の整理</h3>
223223

224224
<script src="../assets/js/layout.js" defer></script>
225225
<script src="../assets/js/ui.js"></script>
226+
227+
<canvas id="menuAnimationCanvas"></canvas>
228+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
229+
<script src="assets/js/menuAnimation.js"></script>
226230
</body>
227231
</html>

‎blog/blog_00003.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,5 +228,9 @@ <h2>最後に</h2>
228228

229229
<script src="../assets/js/layout.js" defer></script>
230230
<script src="../assets/js/ui.js"></script>
231+
232+
<canvas id="menuAnimationCanvas"></canvas>
233+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
234+
<script src="assets/js/menuAnimation.js"></script>
231235
</body>
232236
</html>

‎blog/blog_00004.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,5 +85,9 @@ <h3>最後に</h3>
8585

8686
<script src="../assets/js/layout.js" defer></script>
8787
<script src="../assets/js/ui.js"></script>
88+
89+
<canvas id="menuAnimationCanvas"></canvas>
90+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
91+
<script src="assets/js/menuAnimation.js"></script>
8892
</body>
8993
</html>

‎blog/blog_00005.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,5 +231,9 @@ <h3>参考資料</h3>
231231

232232
<script src="../assets/js/layout.js" defer></script>
233233
<script src="../assets/js/ui.js"></script>
234+
235+
<canvas id="menuAnimationCanvas"></canvas>
236+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
237+
<script src="assets/js/menuAnimation.js"></script>
234238
</body>
235239
</html>

‎blog/blog_00006.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,5 +159,9 @@ <h2>まとめ</h2>
159159

160160
<script src="../assets/js/layout.js" defer></script>
161161
<script src="../assets/js/ui.js"></script>
162+
163+
<canvas id="menuAnimationCanvas"></canvas>
164+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
165+
<script src="assets/js/menuAnimation.js"></script>
162166
</body>
163167
</html>

0 commit comments

Comments
 (0)