Feature P5.js

index.html

@@ -12,8 +12,11 @@
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
   <link rel="stylesheet" href="css/button.css" />
   <link rel="stylesheet" href="css/navbar.css" />
+  <link rel="stylesheet" href="css/canvas.css" />
   <script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
   <script src="js/script.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+  <script src="js/sketch.js"></script>
   <!-- <link rel="stylesheet" href="button.css" /> -->
 </head>
 
@@ -49,6 +52,9 @@
     </div>
   </nav>
 
+  <!-- Canvas -->
+  <canvas id="myCanvas"></canvas>
+
   <!--Home -->
   <div id="home" class="home">
     <div class="container">

js/sketch.js

@@ -0,0 +1,33 @@
+let angle;
+
+function setup() { 
+  let canvas = createCanvas(350, 350); 
+  canvas.position(59, 50);
+  angle = Math.PI / 4;
+} 
+
+function draw() { 
+  background(255); 
+  angle = map(Math.sin(frameCount * 0.01), -1, 1, Math.PI / 2, Math.PI / 16); 
+  translate(width / 2, height); 
+  branch(100); 
+}
+
+function map(value, start1, stop1, start2, stop2) {
+  return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
+}
+
+function branch(len) {
+  line(0, 0, 0, -len); 
+  translate(0, -len); 
+  if (len > 4) { 
+    push(); 
+    rotate(angle); 
+    branch(len * 0.67); 
+    pop(); 
+    push(); 
+    rotate(-angle);
+    branch(len * 0.67); 
+    pop(); 
+  }
+}