minor changes

content/projects/vaxandi_forritari/p5.js_attempt/index.md

@@ -0,0 +1,45 @@
++++
+title = "Attempt at p5.js on my Website"
+date = "2025-10-19"
++++
+I think it's cool I can have a simple graphics canvas on my website. I'm using [p5.js](https://p5js.org/) because it's simple and I'm familiar with it, having used it in high school. 
+
+## Using an HTML iframe
+An [HTML iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) is a way to display a web page within a web page. The following HTML line is going to display my p5.js sketch from the online editor.  
+
+```html
+<iframe src="https://editor.p5js.org/CJSatnarine/sketches/DHA_3rPSq" width="800px" height="800px"></iframe>
+```
+<iframe src="https://editor.p5js.org/CJSatnarine/sketches/DHA_3rPSq" width="800px" height="800px"></iframe>
+
+However, I don't like this. It shows the code, the entire editor, and you can click my username to see the scripts I wrote when I was still in highschool. Horrifying. I just want to display the canvas. 
+
+## Attempt at using an HTML canvas
+I looked into the HMTL file of the p5,js editor and saw that they had a script HTML element that pulled the p5.js library into the project, so I just copied that and pasted it into my header section of my HTML file:
+```html
+<script src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script>
+```
+
+And then had a simple test JavaScript file with p5.js code on it:
+```js
+function setup() {
+  let canvas = createCanvas(800, 800);
+  canvas.parent('p5'); 
+}
+
+function draw() {
+  background(225);
+  ellipse(mouseX, mouseY, 50, 50);
+}
+```
+
+And added this canvas with the ID `p5` to my webpage:
+```html
+<canvas id="p5"/>
+```
+
+However, the canvas didn't show up and I got these errors in the developer's console on my browser:
+
+![errors!!](errors.png)
+
+What did this even mean? I have no clue. I was so lost with this for hours. I'll return to trying to put p5.js on my website at a later time.