save current progress

public/scripts/input-output.js

@@ -1,32 +0,0 @@
-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();
-    }
-  }
-}

public/scripts/multi-sketch.js

@@ -0,0 +1,55 @@
+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');

src/components/P5Sketch.astro

@@ -1,15 +1,9 @@
 ---
-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);
-
+const { sketch_path, canvas_id, figure_id, sketch_description }  = Astro.props;
+const sketch_url = 'https://github.com/osbm/osbm.dev/blob/main/' + sketch_path;
 ---
 
-<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 class="p5-div" id={canvas_id}>
 </div>
 <p><b>Figure {figure_id}</b>: {sketch_description} <a href={sketch_url}><b>Sketch source</b></a>
 

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

@@ -0,0 +1,23 @@
+---
+title: 'Third post'
+description: 'First post of this website that tests many things'
+pubDate: '2024-10-29'
+includes_p5js: True
+p5_script_path: '../../scripts/multi-sketch.js'
+---
+
+import P5Sketch from '../../components/P5Sketch.astro';
+
+Before first Canvas
+
+<P5Sketch sketch_path='scripts/multi-sketch.js' canvas_id='canvas1' figure_id='1' sketch_description='descccrripton a very good one' />
+
+After first canvas
+
+
+Before second Canvas
+
+<P5Sketch sketch_path='scripts/multi-sketch.js' canvas_id='canvas2' figure_id='2' sketch_description='descccrripton a very good one' />
+
+After second canvas
+```

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

@@ -2,19 +2,14 @@
 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';
 
+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' />
+<P5Sketch sketch_path='scripts/hello-world.js' canvas_id='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

src/content/config.ts

@@ -11,6 +11,8 @@ const blog = defineCollection({
 		updatedDate: z.coerce.date().optional(),
 		filename: z.string().optional(),
 		heroImage: z.string().optional(),
+		includes_p5js: z.boolean().optional(),
+		p5_script_path: z.string().optional(),
 	}),
 });
 

src/layouts/BlogPost.astro

@@ -10,7 +10,7 @@ import type { CollectionEntry } from "astro:content";
 
 type Props = CollectionEntry<"blog">["data"];
 
-const { title, description, pubDate, updatedDate, filename, heroImage } = Astro.props;
+const { title, description, pubDate, updatedDate, filename, heroImage, includes_p5js, p5_script_path } = Astro.props;
 
 const commitHistoryUrl = "https://github.com/osbm/osbm.dev/commits/main/src/content/blog/" + filename;
 
@@ -21,6 +21,13 @@ const commitHistoryUrl = "https://github.com/osbm/osbm.dev/commits/main/src/cont
     <head>
         <Metadata />
         <title>{title}</title>
+        <!-- if includes_p5js add p5_js -->
+        {
+            includes_p5js && (
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.min.js" integrity="sha512-q0pQ5+tDUElSVqirQ85OnmLKQvPjeYPlRjJq2dsOwhrGxGjFl0/c36Z+O5DhZNkFMvyGVSpNZ+Q+pjhG0U47iw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+                <script is:inline src={p5_script_path}></script>
+            )
+        }
     </head>
     <body>
         <Header />