From 2d7f712da0de7f231bcc382fedeb11182178d1df Mon Sep 17 00:00:00 2001
From: Manav <manav@mrmr.io>
Date: Tue, 31 Oct 2023 12:04:11 +0530
Subject: [PATCH] Add a sketch

Reference for the display: flex workaround
https://github.com/P5-wrapper/react/issues/267
---
 pages/ai-religion/components.tsx | 29 +++++++++++++++++++++++++++++
 pages/ai-religion/index.mdx      |  2 ++
 pages/ai-religion/sketch.tsx     | 16 ++++++++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 pages/ai-religion/sketch.tsx

diff --git a/pages/ai-religion/components.tsx b/pages/ai-religion/components.tsx
index c14a1631..495be96a 100644
--- a/pages/ai-religion/components.tsx
+++ b/pages/ai-religion/components.tsx
@@ -1,9 +1,11 @@
 import { WideColumn } from "components/Column";
 import { Link } from "gatsby";
+import ReactP5Wrapper from "p5/ReactP5Wrapper";
 import * as React from "react";
 import styled from "styled-components";
 import { BuildTimePageContext } from "templates/page";
 import { ensure } from "utils/ensure";
+import { sketch } from "./sketch";
 
 export const Container: React.FC<React.PropsWithChildren> = ({ children }) => {
     return (
@@ -45,6 +47,33 @@ const ContentContainer = styled.div`
     }
 `;
 
+export const Sketch: React.FC = () => {
+    return (
+        <Sketch_>
+            <ReactP5Wrapper sketch={sketch} />
+        </Sketch_>
+    );
+};
+
+const Sketch_ = styled.div`
+    /**
+     * For an unknown reason, the react-p5-wrapper div has an extra 4 pixels of
+     * height. Setting the display to flex fixes that discrepancy (I don't know
+     * why either).
+     */
+    display: flex;
+    /**
+     * Center the sketch within the container.
+     */
+    justify-content: center;
+    /**
+     * Provide a minimum height to prevent a layout shift on load
+     *
+     * This is the same value is that in sketch.tsx.
+     */
+    height: 300px;
+`;
+
 export const Footer: React.FC = () => {
     const page = ensure(React.useContext(BuildTimePageContext));
     const { formattedDateMY } = page;
diff --git a/pages/ai-religion/index.mdx b/pages/ai-religion/index.mdx
index 62b39beb..438eb668 100644
--- a/pages/ai-religion/index.mdx
+++ b/pages/ai-religion/index.mdx
@@ -16,6 +16,8 @@ the premise. Even if you don’t agree with my conclusions (even future me might
 not), you might find the premise interesting enough to ponder over to your own
 conclusions.
 
+<C.Sketch />
+
 Now, to begin with, we must be clear about self-aware. Some people are certain,
 one way or the other, about AIs being conscious or not. I’m not one of them - I
 believe that all possibilities are possible. We can’t even define consciousness
diff --git a/pages/ai-religion/sketch.tsx b/pages/ai-religion/sketch.tsx
new file mode 100644
index 00000000..efc633e2
--- /dev/null
+++ b/pages/ai-religion/sketch.tsx
@@ -0,0 +1,16 @@
+import type { Sketch } from "@p5-wrapper/react";
+
+export const sketch: Sketch = (p5) => {
+    p5.setup = () => p5.createCanvas(300, 300, p5.WEBGL);
+
+    p5.draw = () => {
+        p5.background(250);
+        p5.normalMaterial();
+        p5.push();
+        p5.rotateZ(p5.frameCount * 0.01);
+        p5.rotateX(p5.frameCount * 0.01);
+        p5.rotateY(p5.frameCount * 0.01);
+        p5.plane(100);
+        p5.pop();
+    };
+};