Skip to content

Commit 4e6b648

Browse files
seungyeubseungyeub
committed
feat: Add new canvas effect "Rotating Polygons"
1 parent 90a0b6b commit 4e6b648

File tree

7 files changed

+155
-0
lines changed

7 files changed

+155
-0
lines changed

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ There will be continuous updates in the future. Thank you!
3535

3636
- [Subscription Button with Regex](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/button/subscription-button-with-regex)
3737

38+
### Canvas
39+
40+
- [Rotating Polygons](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/canvas/rotating-polygons)
41+
3842
### Card
3943

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

‎canvas/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Awesome Canvas 😀
2+
3+
- [Rotating Polygons](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/canvas/rotating-polygons)

‎canvas/rotating-polygons/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Rotating Polygons Canvas
2+
3+
![Edit [Web] Rotating Polygons](../../gifs/canvas/rotating-polygons.gif)

‎canvas/rotating-polygons/app.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { Polygon } from "./polygon.js";
2+
3+
class App {
4+
constructor() {
5+
this.canvas = document.createElement("canvas");
6+
document.body.appendChild(this.canvas);
7+
this.ctx = this.canvas.getContext("2d");
8+
9+
this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;
10+
11+
window.addEventListener("resize", this.resize.bind(this), false);
12+
this.resize();
13+
14+
this.isDown = false;
15+
this.moveX = 0;
16+
this.offsetX = 0;
17+
18+
document.addEventListener("pointerdown", this.onDown.bind(this), false);
19+
document.addEventListener("pointermove", this.onMove.bind(this), false);
20+
document.addEventListener("pointerup", this.onUp.bind(this), false);
21+
22+
window.requestAnimationFrame(this.animate.bind(this));
23+
}
24+
25+
resize() {
26+
this.stageWidth = document.body.clientWidth;
27+
this.stageHeight = document.body.clientHeight;
28+
29+
this.canvas.width = this.stageWidth * this.pixelRatio;
30+
this.canvas.height = this.stageHeight * this.pixelRatio;
31+
this.ctx.scale(this.pixelRatio, this.pixelRatio);
32+
33+
this.polygon = new Polygon(
34+
this.stageWidth / 2,
35+
this.stageHeight / 2,
36+
this.stageHeight / 5.5,
37+
5
38+
);
39+
}
40+
41+
animate() {
42+
window.requestAnimationFrame(this.animate.bind(this));
43+
44+
this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);
45+
46+
this.moveX *= 0.92;
47+
48+
this.polygon.animate(this.ctx, this.moveX);
49+
}
50+
51+
onDown(e) {
52+
this.isDown = true;
53+
this.moveX = 0;
54+
this.offsetX = e.clientX;
55+
}
56+
57+
onMove(e) {
58+
if (this.isDown) {
59+
this.moveX = e.clientX - this.offsetX;
60+
this.offsetX = e.clientX;
61+
}
62+
}
63+
64+
onUp(e) {
65+
this.isDown = false;
66+
}
67+
}
68+
69+
window.onload = () => {
70+
new App();
71+
};

‎canvas/rotating-polygons/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=urDcoyIc6VQ -->
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/rotating-polygons/polygon.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
const PI2 = Math.PI * 2;
2+
3+
export class Polygon {
4+
constructor(x, y, radius, sides) {
5+
this.x = x;
6+
this.y = y;
7+
this.radius = radius;
8+
this.sides = sides;
9+
this.rotate = 0;
10+
}
11+
12+
animate(ctx, moveX) {
13+
ctx.save();
14+
ctx.fillStyle = "#000";
15+
ctx.beginPath();
16+
17+
const angle = PI2 / this.sides;
18+
19+
ctx.translate(this.x, this.y);
20+
21+
this.rotate -= moveX * 0.008;
22+
ctx.rotate(this.rotate);
23+
24+
for (let i = 0; i < this.sides; i++) {
25+
const x = this.radius * Math.cos(angle * i);
26+
const y = this.radius * Math.sin(angle * i);
27+
28+
i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
29+
}
30+
31+
ctx.fill();
32+
ctx.closePath();
33+
ctx.restore();
34+
}
35+
}

‎canvas/rotating-polygons/style.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
* {
2+
outline: 0;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
html {
8+
width: 100%;
9+
height: 100%;
10+
}
11+
12+
body {
13+
width: 100%;
14+
height: 100%;
15+
background-color: #c5beaf;
16+
}
17+
18+
canvas {
19+
width: 100%;
20+
height: 100%;
21+
}

0 commit comments

Comments
 (0)