diff --git a/content/projects/vaxandi_forritari/three.js_attempt/errors.png b/content/projects/vaxandi_forritari/three.js_attempt/errors.png new file mode 100644 index 0000000..cb1ef2c Binary files /dev/null and b/content/projects/vaxandi_forritari/three.js_attempt/errors.png differ diff --git a/content/projects/vaxandi_forritari/three.js_attempt/index.md b/content/projects/vaxandi_forritari/three.js_attempt/index.md new file mode 100644 index 0000000..14ec55b --- /dev/null +++ b/content/projects/vaxandi_forritari/three.js_attempt/index.md @@ -0,0 +1,45 @@ ++++ +title = "Attempt at Three.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 + +``` + + +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 + +``` + +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 + +``` + +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.