Skip to content

Commit 0e16f46

Browse files
seungyeubseungyeub
committed
feat: Add new canvas effect "Wavy Layer"
1 parent eee1be1 commit 0e16f46

File tree

10 files changed

+212
-0
lines changed

10 files changed

+212
-0
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ There will be continuous updates in the future. Thank you!
4242

4343
- [Rotating Polygons](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/canvas/rotating-polygons)
4444

45+
- [Wavy Layer](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/canvas/wavy-layer)
46+
4547
### Card
4648

4749
- [Price Table User Interface Design](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/card/price-table-user-interface-design)

‎canvas/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
# Awesome Canvas 😀
22

33
- [Rotating Polygons](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/canvas/rotating-polygons)
4+
5+
- [Wavy Layer](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/canvas/wavy-layer)

‎canvas/wavy-layer/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## HTML5 Canvas Wavy Layer
2+
3+
![Edit [Web] Wavy Layer](../../gifs/canvas/wavy-layer.gif)

‎canvas/wavy-layer/app.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { WaveGroup } from "./wavegroup.js";
2+
3+
class App {
4+
constructor() {
5+
this.canvas = document.createElement("canvas");
6+
this.ctx = this.canvas.getContext("2d");
7+
document.body.appendChild(this.canvas);
8+
9+
this.waveGroup = new WaveGroup();
10+
11+
window.addEventListener("resize", this.resize.bind(this), false);
12+
this.resize();
13+
14+
requestAnimationFrame(this.animate.bind(this));
15+
}
16+
17+
resize() {
18+
this.stageWidth = document.body.clientWidth;
19+
this.stageHeight = document.body.clientHeight;
20+
21+
this.canvas.width = this.stageWidth * 2;
22+
this.canvas.height = this.stageHeight * 2;
23+
this.ctx.scale(2, 2);
24+
25+
this.waveGroup.resize(this.stageWidth, this.stageHeight);
26+
}
27+
28+
animate() {
29+
this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);
30+
31+
this.waveGroup.draw(this.ctx);
32+
33+
requestAnimationFrame(this.animate.bind(this));
34+
}
35+
}
36+
37+
window.onload = () => {
38+
new App();
39+
};

‎canvas/wavy-layer/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<!-- https://www.youtube.com/watch?v=LLfhY4eVwDY -->
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>Rotating Polygons Canvas</title>
10+
<link rel="shortcut icon" href="../../favicon.ico">
11+
<link rel="stylesheet" type="text/css" href="style.css">
12+
</head>
13+
14+
<body>
15+
<script type="module" src="app.js"></script>
16+
</body>
17+
18+
</html>

‎canvas/wavy-layer/point.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export class Point {
2+
constructor(index, x, y) {
3+
this.x = x;
4+
this.y = y;
5+
this.fixedY = y;
6+
this.speed = 0.1;
7+
this.cur = index;
8+
this.max = Math.random() * 100 + 150;
9+
}
10+
11+
update() {
12+
this.cur += this.speed;
13+
this.y = this.fixedY + Math.sin(this.cur) * this.max;
14+
}
15+
}

‎canvas/wavy-layer/style.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
* {
2+
user-select: none;
3+
-moz-user-select: none;
4+
-ms-user-select: none;
5+
outline: 0;
6+
margin: 0;
7+
padding: 0;
8+
-webkit-tab-highlight-color: rgba(0, 0, 0, 0);
9+
}
10+
11+
html {
12+
width: 100%;
13+
height: 100%;
14+
}
15+
16+
body {
17+
width: 100%;
18+
height: 100%;
19+
overflow: hidden;
20+
background-color: #fff;
21+
}
22+
23+
canvas {
24+
width: 100%;
25+
height: 100%;
26+
}

‎canvas/wavy-layer/wave.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Point } from "./point.js";
2+
3+
export class Wave {
4+
constructor(index, totalPoints, color) {
5+
this.index = index;
6+
this.totalPoints = totalPoints;
7+
this.color = color;
8+
this.points = [];
9+
}
10+
11+
resize(stageWidth, stageHeight) {
12+
this.stageWidth = stageWidth;
13+
this.stageHeight = stageHeight;
14+
15+
this.centerX = stageWidth / 2;
16+
this.centerY = stageHeight / 2;
17+
18+
this.pointGap = this.stageWidth / (this.totalPoints - 1);
19+
20+
this.init();
21+
}
22+
23+
init() {
24+
// this.point = new Point(this.centerX, this.centerY);
25+
this.points = [];
26+
27+
for (let i = 0; i < this.totalPoints; i++) {
28+
const point = new Point(this.index + i, this.pointGap * i, this.centerY);
29+
this.points[i] = point;
30+
}
31+
}
32+
33+
draw(ctx) {
34+
ctx.beginPath();
35+
ctx.fillStyle = this.color;
36+
37+
let prevX = this.points[0].x;
38+
let prevY = this.points[0].y;
39+
40+
ctx.moveTo(prevX, prevY);
41+
42+
for (let i = 1; i < this.totalPoints; i++) {
43+
if (i < this.totalPoints - 1) {
44+
this.points[i].update();
45+
}
46+
47+
const cx = (prevX + this.points[i].x) / 2;
48+
const cy = (prevY + this.points[i].y) / 2;
49+
50+
ctx.quadraticCurveTo(prevX, prevY, cx, cy);
51+
52+
prevX = this.points[i].x;
53+
prevY = this.points[i].y;
54+
}
55+
56+
ctx.lineTo(prevX, prevY);
57+
ctx.lineTo(this.stageWidth, this.stageHeight);
58+
ctx.lineTo(this.points[0].x, this.stageHeight);
59+
ctx.fill();
60+
ctx.closePath();
61+
62+
// this.point.update();
63+
64+
// ctx.arc(this.point.x, this.point.y, 30, 0, 2 * Math.PI);
65+
// ctx.fill();
66+
}
67+
}

‎canvas/wavy-layer/wavegroup.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Wave } from "./wave.js";
2+
3+
export class WaveGroup {
4+
constructor() {
5+
this.totalWaves = 3;
6+
this.totalPoints = 6;
7+
8+
// this.color = [
9+
// "rgba(0, 199, 235, 0.4)",
10+
// "rgba(0, 146, 199, 0.4)",
11+
// "rgba(0, 87, 158, 0.4)",
12+
// ];
13+
this.color = [
14+
"rgba(255, 0, 0, 0.4)",
15+
"rgba(255, 255, 0, 0.4)",
16+
"rgba(0, 255, 255, 0.4)",
17+
];
18+
19+
this.waves = [];
20+
21+
for (let i = 0; i < this.totalWaves; i++) {
22+
const wave = new Wave(i, this.totalPoints, this.color[i]);
23+
this.waves[i] = wave;
24+
}
25+
}
26+
27+
resize(stageWidth, stageHeight) {
28+
for (let i = 0; i < this.totalWaves; i++) {
29+
const wave = this.waves[i];
30+
wave.resize(stageWidth, stageHeight);
31+
}
32+
}
33+
34+
draw(ctx) {
35+
for (let i = 0; i < this.totalWaves; i++) {
36+
const wave = this.waves[i];
37+
wave.draw(ctx);
38+
}
39+
}
40+
}

‎gifs/canvas/wavy-layer.gif

473 KB
Loading

0 commit comments

Comments
 (0)