Merge pull request #258 from DEVELOPER-IN-PROGRESS/master

my first canvas
zero-to-mastery · Oct 31, 2021 · 7bb6962 · 7bb6962
2 parents 5c73b08 + e579f5e
commit 7bb6962
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 0 deletions.
diff --git a/src/art/john/icon.png b/src/art/john/icon.png
diff --git a/src/art/john/index.html b/src/art/john/index.html
@@ -0,0 +1,19 @@
+<!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>Hacktoberfest 21
+    </title>
+    <link rel="icon" type="image/png" href="icon.png">
+    <link rel="stylesheet" href="style.css" >
+</head>
+<body>
+
+
+    <canvas id="canvas" style="border:1px solid #000000;"></canvas>
+
+    <script src="script.js" ></script>
+</body>
+</html>
diff --git a/src/art/john/meta.json b/src/art/john/meta.json
@@ -0,0 +1,5 @@
+{
+    "art_name": "Rainbow dance",
+    "author_name": "John",
+    "author_github_url": "https://github.com/DEVELOPER-IN-PROGRESS/"
+}
diff --git a/src/art/john/script.js b/src/art/john/script.js
@@ -0,0 +1,47 @@
+    //initial
+    var w = canvas.width = window.innerWidth,
+    h = canvas.height = window.innerHeight,
+    ctx = canvas.getContext('2d'),
+
+    //parameters
+    total = w,
+    accelleration = .05,
+
+    //afterinitial calculations
+    size = w/total,
+    occupation = w/total,
+    repaintColor = 'rgba(0, 0, 0, .04)'
+    colors = [],
+    dots = [],
+    dotsVel = [];
+
+//setting the colors' hue
+//and y level for all dots
+var portion = 360/total;
+for(var i = 0; i < total; ++i){
+  colors[i] = portion * i;
+
+  dots[i] = h;
+  dotsVel[i] = 10;
+}
+
+function anim(){
+  window.requestAnimationFrame(anim);
+
+  ctx.fillStyle = repaintColor;
+  ctx.fillRect(0, 0, w, h);
+
+  for(var i = 0; i < total; ++i){
+    var currentY = dots[i] - 1;
+    dots[i] += dotsVel[i] += accelleration;
+
+    ctx.fillStyle = 'hsl('+ colors[i] + ', 80%, 50%)';
+    ctx.fillRect(occupation * i, currentY, size, dotsVel[i] + 1);
+
+    if(dots[i] > h && Math.random() < .01){
+      dots[i] = dotsVel[i] = 0;
+    }
+  }
+}
+
+anim();
diff --git a/src/art/john/style.css b/src/art/john/style.css
@@ -0,0 +1,17 @@
+html,
+body {
+  height: 100vh;
+  width: 100vw;
+  margin: auto;
+  padding: 0;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+}
+
+
+
+canvas{
+    width:90% ;
+    height: 90%;
+}