46 lines
1.8 KiB
Markdown
46 lines
1.8 KiB
Markdown
+++
|
|
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:
|
|
|
|
|
|
|
|
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.
|