draw circles, triangles, squares, penatagons and hexagons on the worklet

boguz · Dec 10, 2021 · 220691b · 220691b
1 parent df1823e
commit 220691b
Show file tree

Hide file tree

Showing 12 changed files with 357 additions and 8 deletions.
diff --git a/dist/geometric-paint-worklet.js b/dist/geometric-paint-worklet.js
@@ -1,5 +1,104 @@
-(() => {
-  // src/geometric-paint-worklet.ts
-  var a = 4;
-  console.log("a", a);
-})();
+// src/types.ts
+var PossibleShape = /* @__PURE__ */ ((PossibleShape2) => {
+  PossibleShape2["CIRCLE"] = "CIRCLE";
+  PossibleShape2["TRIANGLE"] = "TRIANGLE";
+  PossibleShape2["SQUARE"] = "SQUARE";
+  PossibleShape2["PENTAGON"] = "PENTAGON";
+  PossibleShape2["HEXAGON"] = "HEXAGON";
+  return PossibleShape2;
+})(PossibleShape || {});
+
+// src/basicShape.ts
+var BasicShape = class {
+  constructor(ctx, size, position) {
+    this.ctx = ctx;
+    this.size = size;
+    this.position = position;
+  }
+};
+
+// src/ShapeCircle.ts
+var ShapeCircle = class extends BasicShape {
+  constructor(ctx, size, position) {
+    super(ctx, size, position);
+    this.draw();
+  }
+  draw() {
+    this.ctx.arc(this.position.x, this.position.y, this.size / 2, 0, 2 * Math.PI);
+  }
+};
+
+// src/ShapePolygon.ts
+var ShapePolygon = class extends BasicShape {
+  constructor(ctx, size, position, sidesCount = 3, rotation = 0) {
+    super(ctx, size, position);
+    this.rotation = rotation;
+    this.radians = this.rotation * Math.PI / 180;
+    this.sidesCount = sidesCount;
+    this.draw();
+  }
+  draw() {
+    this.ctx.translate(this.position.x, this.position.y);
+    this.ctx.rotate(this.radians);
+    this.ctx.beginPath();
+    this.ctx.moveTo(this.size / 2 * Math.cos(0), this.size / 2 * Math.sin(0));
+    for (let i = 0; i < this.sidesCount; i++) {
+      this.ctx.lineTo(this.size / 2 * Math.cos(i * 2 * Math.PI / this.sidesCount), this.size / 2 * Math.sin(i * 2 * Math.PI / this.sidesCount));
+    }
+    this.ctx.closePath();
+    this.ctx.rotate(-this.radians);
+    this.ctx.translate(-this.position.x, -this.position.y);
+  }
+};
+
+// src/utils.ts
+function randomIntFromInterval(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+// src/geometric-paint-worklet.ts
+registerPaint("bubblePaint", class {
+  paint(ctx, geom) {
+    const numberOfShapes = 20;
+    const shapeSize = 40;
+    const possibleShapes = [
+      PossibleShape.CIRCLE,
+      PossibleShape.TRIANGLE,
+      PossibleShape.SQUARE,
+      PossibleShape.PENTAGON,
+      PossibleShape.HEXAGON
+    ];
+    const elWidth = geom.width;
+    const elHeight = geom.height;
+    for (let i = 0; i < numberOfShapes; i++) {
+      const rotation = randomIntFromInterval(0, 360);
+      const selectedShape = possibleShapes[Math.floor(Math.random() * possibleShapes.length)];
+      const position = {
+        x: Math.random() * elWidth,
+        y: Math.random() * elHeight
+      };
+      ctx.lineWidth = 4;
+      ctx.strokeStyle = "red";
+      ctx.beginPath();
+      switch (selectedShape) {
+        case PossibleShape.CIRCLE:
+          new ShapeCircle(ctx, shapeSize, position);
+          break;
+        case PossibleShape.TRIANGLE:
+          new ShapePolygon(ctx, shapeSize, position, 3, -rotation);
+          break;
+        case PossibleShape.SQUARE:
+          new ShapePolygon(ctx, shapeSize, position, 4, rotation);
+          break;
+        case PossibleShape.PENTAGON:
+          new ShapePolygon(ctx, shapeSize, position, 5, -rotation);
+          break;
+        case PossibleShape.HEXAGON:
+          new ShapePolygon(ctx, shapeSize, position, 6, rotation);
+          break;
+      }
+      ctx.closePath();
+      ctx.stroke();
+    }
+  }
+});
diff --git a/index.html b/index.html
@@ -7,9 +7,20 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Geometric Paint Worklet</title>
 
+    <link rel="stylesheet" href="styles/geometric-paint-worklet.css" type="text/css">
     <script src="dist/geometric-paint-worklet.js" defer></script>
 </head>
 <body>
 
+<main>
+    <section class="section">
+        <h1 class="section__title">Geometric Paint Worklet</h1>
+    </section>
+
+    <script>
+      CSS.paintWorklet.addModule('dist/geometric-paint-worklet.js');
+    </script>
+</main>
+
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "A CSS Paint Worklet that renders geometric figures",
   "main": "index.html",
   "scripts": {
-    "build:js": "esbuild src/geometric-paint-worklet.ts --bundle --outfile=dist/geometric-paint-worklet.js"
+    "build:js": "esbuild src/geometric-paint-worklet.ts --bundle --outfile=dist/geometric-paint-worklet.js --format=cjs"
   },
   "repository": {
     "type": "git",

diff --git a/scripts/geometric-paint-worklet.js b/scripts/geometric-paint-worklet.js
@@ -0,0 +1,28 @@
+registerPaint('bubblePaint', class {
+  paint(ctx, geom) {
+    const numberOfShapes = 10;
+    const possibleShapes = ['triangle', 'square', 'circle'];
+    const shapeSize = 20;
+
+    const bodyWidth = geom.width;
+    const bodyHeight = geom.height;
+
+    for (let i = 0; i < numberOfShapes; i ++) {
+      const selectedShape = possibleShapes[Math.floor(Math.random() * possibleShapes.length)];
+      const position = {
+        x: Math.random() * bodyWidth,
+        y: Math.random() * bodyHeight,
+      }
+
+      console.log('s', selectedShape);
+
+      ctx.lineWidth = 4;
+
+      ctx.strokeStyle = 'red';
+      ctx.beginPath();
+      ctx.arc(position.x, position.y, shapeSize, 0, 2 * Math.PI, true);
+      ctx.closePath();
+      ctx.stroke();
+    }
+  }
+});
diff --git a/src/ShapeCircle.ts b/src/ShapeCircle.ts
@@ -0,0 +1,18 @@
+import { BasicShape } from "./basicShape";
+
+export class ShapeCircle extends BasicShape {
+	constructor(ctx, size, position) {
+		super(ctx, size, position);
+		this.draw();
+	}
+
+	draw() {
+		this.ctx.arc(
+			this.position.x,
+			this.position.y,
+			this.size / 2,
+			0,
+			2 * Math.PI
+		);
+	}
+}
diff --git a/src/ShapePolygon.ts b/src/ShapePolygon.ts
@@ -0,0 +1,36 @@
+import { BasicShape } from "./basicShape";
+
+export class ShapePolygon extends BasicShape {
+	rotation: number;
+	radians: number;
+	sidesCount: number;
+
+	constructor(ctx, size, position, sidesCount = 3, rotation = 0) {
+		super(ctx, size, position);
+		this.rotation = rotation;
+		this.radians = this.rotation * Math.PI / 180;
+		this.sidesCount = sidesCount;
+
+		this.draw();
+	}
+
+	draw() {
+		this.ctx.translate(this.position.x, this.position.y);
+		this.ctx.rotate(this.radians);
+		this.ctx.beginPath();
+		this.ctx.moveTo(
+			this.size / 2 * Math.cos(0),
+			this.size / 2 * Math.sin(0)
+		);
+		for (let i = 0; i < this.sidesCount; i ++) {
+			this.ctx.lineTo(
+				this.size / 2 * Math.cos(i * 2 * Math.PI / this.sidesCount),
+				this.size / 2 * Math.sin(i * 2 * Math.PI / this.sidesCount)
+			);
+		}
+		this.ctx.closePath();
+
+		this.ctx.rotate(-this.radians);
+		this.ctx.translate(-this.position.x, -this.position.y);
+	}
+}
diff --git a/src/ShapeTriangle.ts b/src/ShapeTriangle.ts
@@ -0,0 +1,39 @@
+import { BasicShape } from "./basicShape";
+import { TrianglePoints } from "./types";
+
+export class ShapeTriangle extends BasicShape {
+	radius: number;
+	trianglePoints: TrianglePoints;
+
+	constructor(ctx, size, position) {
+		super(ctx, size, position);
+		this.radius = (this.size / 2) / Math.cos(Math.PI/6);
+		this.trianglePoints = {
+			p1: {
+				x: this.position.x + this.radius,
+				y: this.position.y,
+			},
+			p2: {
+				x: this.position.x + this.radius * Math.cos(2 * Math.PI/3),
+				y: this.position.y + this.radius * Math.sin(2 * Math.PI/3),
+			},
+			p3: {
+				x: this.position.x + this.radius * Math.cos(4 * Math.PI/3),
+				y: this.position.y + this.radius * Math.sin(4 * Math.PI/3)
+			}
+		}
+		this.draw();
+	}
+
+	draw() {
+		this.ctx.strokeStyle = "purple";
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.trianglePoints.p1.x, this.trianglePoints.p1.y);
+		this.ctx.lineTo(this.trianglePoints.p2.x, this.trianglePoints.p2.y);
+		this.ctx.lineTo(this.trianglePoints.p3.x, this.trianglePoints.p3.y);
+		this.ctx.lineTo(this.trianglePoints.p1.x, this.trianglePoints.p1.y);
+		this.ctx.closePath();
+		this.ctx.stroke();
+	}
+}
diff --git a/src/basicShape.ts b/src/basicShape.ts
@@ -0,0 +1,13 @@
+import { Position } from "./types";
+
+export class BasicShape {
+	ctx: CanvasRenderingContext2D;
+	size: number;
+	position: Position;
+
+	constructor(ctx, size, position,) {
+		this.ctx = ctx;
+		this.size = size;
+		this.position = position;
+	}
+}
diff --git a/src/geometric-paint-worklet.ts b/src/geometric-paint-worklet.ts
@@ -1,3 +1,57 @@
-const a: number = 4;
+import { PossibleShape } from "./types";
+import { ShapeCircle } from "./ShapeCircle";
+import { ShapePolygon } from "./ShapePolygon";
+import { randomIntFromInterval } from "./utils";
 
-console.log('a', a);
+// @ts-ignore
+registerPaint('bubblePaint', class {
+	paint(ctx, geom) {
+		const numberOfShapes = 20;
+		const shapeSize = 40;
+		const possibleShapes: PossibleShape[] = [
+			PossibleShape.CIRCLE,
+			PossibleShape.TRIANGLE,
+			PossibleShape.SQUARE,
+			PossibleShape.PENTAGON,
+			PossibleShape.HEXAGON,
+		];
+
+		const elWidth = geom.width;
+		const elHeight = geom.height;
+
+		for (let i = 0; i < numberOfShapes; i ++) {
+			const rotation = randomIntFromInterval(0, 360);
+			const selectedShape = possibleShapes[Math.floor(Math.random() * possibleShapes.length)];
+			const position = {
+				x: Math.random() * elWidth,
+				y: Math.random() * elHeight,
+			}
+
+			ctx.lineWidth = 4;
+
+			ctx.strokeStyle = 'red';
+			ctx.beginPath();
+
+			switch (selectedShape) {
+				case PossibleShape.CIRCLE:
+					new ShapeCircle(ctx, shapeSize, position);
+					break;
+				case PossibleShape.TRIANGLE:
+					new ShapePolygon(ctx, shapeSize, position, 3, -rotation);
+					break;
+				case PossibleShape.SQUARE:
+					new ShapePolygon(ctx, shapeSize, position, 4, rotation);
+					break;
+				case PossibleShape.PENTAGON:
+					new ShapePolygon(ctx, shapeSize, position, 5, -rotation);
+					break;
+				case PossibleShape.HEXAGON:
+					new ShapePolygon(ctx, shapeSize, position, 6, rotation);
+					break;
+			}
+
+			ctx.closePath();
+			ctx.stroke();
+		}
+	}
+});
diff --git a/src/types.ts b/src/types.ts
@@ -0,0 +1,24 @@
+// ENUMS
+export enum PossibleShape {
+	CIRCLE = 'CIRCLE',
+	TRIANGLE = 'TRIANGLE',
+	SQUARE = 'SQUARE',
+	PENTAGON = 'PENTAGON',
+	HEXAGON = 'HEXAGON'
+}
+
+export interface Position {
+	x: number;
+	y: number;
+}
+
+interface Point {
+	x: number,
+	y: number
+}
+
+export interface TrianglePoints {
+	p1: Point,
+	p2: Point,
+	p3: Point,
+}
diff --git a/src/utils.ts b/src/utils.ts
@@ -0,0 +1,9 @@
+/**
+ * Return a number between two integers, min and max included
+ *
+ * @param min
+ * @param max
+ */
+export function randomIntFromInterval(min: number, max: number): number {
+	return Math.floor(Math.random() * (max - min + 1) + min)
+}
diff --git a/styles/geometric-paint-worklet.css b/styles/geometric-paint-worklet.css
@@ -0,0 +1,18 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.section {
+    height: 100vh;
+    background-color: rgba(12, 22, 32, .8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-image: paint(bubblePaint);
+}
+
+.section__title {
+    color: white;
+}