Merge pull request #160 from TalhaQuddoos/master

Canvas art using lines and circles
zero-to-mastery · Oct 16, 2022 · 013f5d5 · 013f5d5
2 parents 2f6b798 + c1e80e3
commit 013f5d5
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 0 deletions.
diff --git a/src/art/TalhaQuddoos3/icon.png b/src/art/TalhaQuddoos3/icon.png
diff --git a/src/art/TalhaQuddoos3/index.html b/src/art/TalhaQuddoos3/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Canvas art using lines and circles</title>
+    <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+
+    <canvas id="circle" width="700" height="700"></canvas>
+    <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/src/art/TalhaQuddoos3/meta.json b/src/art/TalhaQuddoos3/meta.json
@@ -0,0 +1,5 @@
+{
+    "art_name": "Canvas art using lines and circles",
+    "author_name": "Talha Quddoos",
+    "author_github_url": "https://github.com/TalhaQuddoos"
+}
diff --git a/src/art/TalhaQuddoos3/script.js b/src/art/TalhaQuddoos3/script.js
@@ -0,0 +1,47 @@
+const canvas = document.getElementById("circle");
+const ctx = canvas.getContext("2d");
+var colors = ["#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#0000FF", "#4B0082", "#8B00FF"];
+
+const mainCircleRadius = 300;
+const mainCircleX = 350;
+const mainCircleY = 350;
+
+var angle1 = 180;
+var angle2 = 30;
+var colorIndex = 0;
+var linesPerColor = 10;
+var tempColorCount = 0;
+
+while(angle2 < 360) {
+    drawLine(angle1, angle2, colors[colorIndex]);
+    tempColorCount++;
+    if(tempColorCount >= linesPerColor) {
+        tempColorCount = 0;
+        colorIndex++;
+        if(colorIndex == colors.length) colorIndex = 0;
+    }
+
+    angle1 += 2;
+    angle2 += 2;
+}
+
+
+
+function drawLine(angle1, angle2, color) {
+    var x1 = mainCircleX + mainCircleRadius * Math.cos(angle1 * Math.PI / 180);
+    var y1 = mainCircleY + mainCircleRadius * Math.sin(angle1 * Math.PI / 180);
+
+    var x2 = mainCircleX + mainCircleRadius * Math.cos(angle2 * Math.PI / 180);
+    var y2 = mainCircleY + mainCircleRadius * Math.sin(angle2 * Math.PI / 180);
+
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.strokeStyle = color;
+    ctx.stroke();
+}
+
+
+function toRadians(angle) {
+    return angle * (Math.PI / 180)
+}
diff --git a/src/art/TalhaQuddoos3/style.css b/src/art/TalhaQuddoos3/style.css
@@ -0,0 +1,7 @@
+canvas {
+  border: 1px solid black;
+  display: block;
+  margin: 0 auto;
+  width: 700px;
+  height: 700px;
+}