diff --git a/public/scripts/hello-world.js b/public/scripts/hello-world.js
index 77a5100..bd9ecd6 100644
--- a/public/scripts/hello-world.js
+++ b/public/scripts/hello-world.js
@@ -1,6 +1,7 @@
function setup() {
let mycanvas = createCanvas(400, 400);
mycanvas.parent('hello-world');
+ background(0);
}
function draw() {
fill(255);
diff --git a/public/scripts/multi-sketch.js b/public/scripts/multi-sketch.js
deleted file mode 100644
index 6a92b2f..0000000
--- a/public/scripts/multi-sketch.js
+++ /dev/null
@@ -1,55 +0,0 @@
-let canvas1 = function ( p ) {
- p.setup = function() {
- p.createCanvas(710, 400, p.WEBGL);
- p.angleMode(p.DEGREES);
- p.strokeWeight(5);
- p.noFill();
- p.stroke(32, 8, 64);
- }
-
- p.draw = function() {
- p.background(250, 180, 200);
-
- // Call every frame to adjust camera based on mouse/touch
- p.orbitControl();
-
- // Rotate rings in a half circle to create a sphere of cubes
- for (let zAngle = 0; zAngle < 180; zAngle += 30) {
- // Rotate cubes in a full circle to create a ring of cubes
- for (let xAngle = 0; xAngle < 360; xAngle += 30) {
- p.push();
-
- // Rotate from center of sphere
- p.rotateZ(zAngle);
- p.rotateX(xAngle);
-
- // Then translate down 400 units
- p.translate(0, 400, 0);
- p.box();
- p.pop();
- }
- }
- }
-};
-
-let canvas2 = function ( p ) {
-
-
- p.setup = function() {
- p.createCanvas(710, 400);
- p.background(250, 180, 200);
- }
-
- p.draw = function() {
- // draw a circle at the mouse position
- p.fill(255, 0, 0);
- p.stroke(0);
- p.strokeWeight(0);
- p.ellipse(p.mouseX, p.mouseY, 80, 80);
-
- }
-}
-
-
-var mycanvas1 = new p5(canvas1, 'canvas1');
-var myp5 = new p5(canvas2, 'canvas2');
diff --git a/src/content/blog/blog-with-p5js.mdx b/src/content/blog/blog-with-p5js.mdx
deleted file mode 100644
index 292df6a..0000000
--- a/src/content/blog/blog-with-p5js.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: 'Second post'
-description: 'First post of this website that tests many things'
-pubDate: '2024-10-26'
-includes_p5js: True
-p5_script_path: '../../scripts/hello-world.js'
----
-
-import P5Sketch from '../../components/P5Sketch.astro';
-
-Before Canvas
-
-
-
-After canvas
diff --git a/src/content/blog/p5js-component-for-astro.mdx b/src/content/blog/p5js-component-for-astro.mdx
new file mode 100644
index 0000000..f3245b0
--- /dev/null
+++ b/src/content/blog/p5js-component-for-astro.mdx
@@ -0,0 +1,92 @@
+---
+title: 'A new P5.js component for Astro'
+description: 'Demonstrating the new P5.js component for Astro'
+pubDate: '2024-10-31'
+includes_p5js: True
+p5_script_path: '../../scripts/hello-world.js'
+---
+
+import P5Sketch from '../../components/P5Sketch.astro';
+
+In 2021, I had a great interest in procedural art and generative coding. I loved watching [The Coding Train](https://www.youtube.com/@TheCodingTrain). So I learned all about [Processing language](https://processing.org/)[^1] and [P5.js](https://p5js.org/). This was super fun and ignited my love for programming again.
+
+[^1]: Nowadays it looks like it has been abandoned in favor of P5.js
+
+I have been drafting a blogpost that i plan to write beautiful plots and even make some of them interactive. So I thought P5.js scripts would be awesome for this considering the fact that i can write components in astro.
+
+Here is the an example blogpost:
+
+
+```astro
+---
+title: 'title'
+description: 'description'
+pubDate: '2024-10-31'
+includes_p5js: True
+p5_script_path: '../../scripts/hello-world.js'
+---
+
+import P5Sketch from '../../components/P5Sketch.astro';
+
+Text before the canvas.
+
+
+
+Text after the canvas.
+```
+
+Here you can see the simple P5.js script that creates the canvas:
+
+```js
+function setup() {
+ let mycanvas = createCanvas(400, 400);
+ mycanvas.parent('hello-world');
+ background(0);
+}
+function draw() {
+ fill(255);
+ ellipse(mouseX, mouseY, 80, 80);
+}
+```
+
+And inside the astro component there is a div html tag with the id of *hello-world* so that the P5.js knows where to put the canvas.
+
+There was an issue I encountered when trying to show more than one sketch and it was only generating one of them. And i found out that to generate more than one sketch in one page i needed to merge all scripts into one file like this.
+
+```js
+let canvas1 = function ( p ) {
+ p.setup = function() {
+ ...
+ }
+ p.draw = function() {
+ ...
+ }
+};
+
+let canvas2 = function ( p ) {
+ p.setup = function() {
+ ...
+ }
+ p.draw = function() {
+ ...
+ }
+}
+
+var mycanvas1 = new p5(canvas1, 'canvas1');
+var myp5 = new p5(canvas2, 'canvas2');
+```
+
+Now that I resolve my last issue i can show you the last
+
+Here is how it looks:
+
+
+
+
+---
+
+I have also been thinking to add a component for [THREE.js](https://threejs.org/). I made a [Sphere Eversion Animation](https://osmanbayram.com/sphere-eversion-animation/) once. And i loved it a lot. But i thought that this would be a little overkill.
+
+See you in the next one ❤️❤️❤️
+
+
diff --git a/src/styles/global.css b/src/styles/global.css
index fa8e88e..d7340d8 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -49,4 +49,29 @@ a {
a:hover {
color: rgb(0, 200, 200);
+}
+
+pre {
+ background-color: rgb(30, 35, 50);
+ padding: 1rem;
+ border-radius: 5px;
+ overflow-x: auto;
+ margin: 1rem 0;
+}
+
+code {
+ counter-reset: step;
+ counter-increment: step 0;
+ /* add a little space inside */
+ /* margin: 1rem 0; */
+}
+
+code .line::before {
+ content: counter(step);
+ counter-increment: step;
+ width: 1rem;
+ margin-right: 1.5rem;
+ display: inline-block;
+ text-align: right;
+ color: rgba(115,138,148,.4);
}
\ No newline at end of file