save current progress

public/scripts/hello-world.js

@@ -0,0 +1,8 @@
+function setup() {
+    let mycanvas = createCanvas(400, 400);
+    mycanvas.parent('hello-world');
+}
+function draw() {
+    fill(255);
+    ellipse(mouseX, mouseY, 80, 80);
+}

public/scripts/input-output.js

@@ -0,0 +1,32 @@
+function setup() {
+  let canvas = createCanvas(710, 400, WEBGL);
+  canvas.parent('input-output');
+  angleMode(DEGREES);
+  strokeWeight(5);
+  noFill();
+  stroke(32, 8, 64);
+}
+
+function draw() {
+  background(250, 180, 200);
+
+  // Call every frame to adjust camera based on mouse/touch
+  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) {
+      push();
+
+      // Rotate from center of sphere
+      rotateZ(zAngle);
+      rotateX(xAngle);
+
+      // Then translate down 400 units
+      translate(0, 400, 0);
+      box();
+      pop();
+    }
+  }
+}

src/components/P5Sketch.astro

@@ -0,0 +1,32 @@
+---
+const { sketch_path, sketch_name, figure_id, sketch_description }  = Astro.props;
+// https://github.com/osbm/osbm.dev/blob/main/ + sketch_path(first 3 characters removed)
+const sketch_url = 'https://github.com/osbm/osbm.dev/blob/main/' + sketch_path.slice(3);
+
+---
+
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+
+
+<div class="p5-div" id={sketch_name}>
+    <script is:inline src={sketch_path}></script>
+</div>
+<p><b>Figure {figure_id}</b>: {sketch_description} <a href={sketch_url}><b>Sketch source</b></a>
+
+</p>
+<style>
+    .p5-div {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    canvas {
+        max-width: 100%;
+        max-height: 100%;
+    }
+    p {
+        text-align: center;
+    }
+</style>

src/content/blog/blog-with-p5js.mdx

@@ -0,0 +1,20 @@
+---
+title: 'Second post'
+description: 'First post of this website that tests many things'
+pubDate: '2024-10-26'
+
+
+---
+import P5Sketch from '../../components/P5Sketch.astro';
+
+
+Before Canvas
+
+<P5Sketch sketch_path='../scripts/hello-world.js' sketch_name='hello-world' figure_id='1' sketch_description='descccrripton a very good one' />
+
+After canvas
+
+
+<P5Sketch sketch_path='../scripts/input-output.js' sketch_name='input-output' figure_id='2' sketch_description='descccrripton a very good one' />
+
+why these things happen