From 7bbd9a3adfe61eee103772effc209ce3fb9e0ac8 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Fri, 18 Nov 2022 08:30:32 -0800
Subject: [PATCH] Add a sketch archetype with a bunch of boilerplate for p5
 sketches

---
 archetypes/sketch/index.md  |  7 +++++++
 archetypes/sketch/sketch.js | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 archetypes/sketch/index.md
 create mode 100644 archetypes/sketch/sketch.js

diff --git a/archetypes/sketch/index.md b/archetypes/sketch/index.md
new file mode 100644
index 0000000..dee4e18
--- /dev/null
+++ b/archetypes/sketch/index.md
@@ -0,0 +1,7 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+
+{{< figures/p5 id="sketch" >}}
diff --git a/archetypes/sketch/sketch.js b/archetypes/sketch/sketch.js
new file mode 100644
index 0000000..54d2b7d
--- /dev/null
+++ b/archetypes/sketch/sketch.js
@@ -0,0 +1,20 @@
+const sketch = p => {
+    p.setup = () => {
+        const sketchContainer = document.querySelector('#sketch');
+        const canvasWidth = parseFloat(getComputedStyle(sketchContainer).width);
+        let canvas = p.createCanvas(canvasWidth, canvasWidth);
+        canvas.canvas.removeAttribute('style');
+        sketchContainer.appendChild(canvas.canvas);
+
+        p.pixelDensity(p.displayDensity());
+    };
+
+    p.draw = () => {
+        p.background(255);
+        p.strokeWeight(4);
+        p.stroke(0, 0, 255);
+        p.circle(100, 100, 100);
+    };
+};
+
+new p5(sketch, 'sketch');