feat: turned P5.JS sketch into simple drawing app to test funtionality

static/js/sketch.js

@@ -1,10 +1,31 @@
-// What to do here...
+const ELLIPSE_SIZE = 25;
+
+var positions;
+
+
 function setup() {
     createCanvas(800, 800);
+    positions = [];
 }
 
 function draw() {
     background(51);
-    rectMode(CENTER);
-    ellipse(mouseX, mouseY, 75, 75, 15);
+    noStroke();
+    fill(120);
+    positions.forEach(function (vector, index) {
+        ellipse(vector.x, vector.y, ELLIPSE_SIZE);
+    });
+    fill(118, 118, 125);
+    ellipse(mouseX, mouseY, ELLIPSE_SIZE);
+
+}
+
+function mousePressed() {
+    position = createVector(mouseX, mouseY);
+    positions.push(position);
+}
+
+function mouseDragged() {
+    position = createVector(mouseX, mouseY);
+    positions.push(position);
 }

styles/p5js_sketch.scss

@@ -1,12 +1,15 @@
 body {
     padding: 0;
     margin: 0;
+    width: 100%;
+    height: auto;
+    background-color: #436445;
 }
 
 a {
     color: #000000;
     font-family: Arial, Helvetica, sans-serif;
     text-decoration: none;
     margin: 20px 30px;
-
+    outline: 2px dashed black;
 }

templates/html/p5js_sketch.jinja

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src= {{ url_for('static', filename='/js/sketch.js')}}></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
+    <style> {{ _style }} </style>
     <title>P5.JS Sketch</title>
     </head>