Quartz sync: Feb 21, 2024, 3:13 AM

content/editor/sketch_p5.js

@@ -1,8 +1,11 @@
 let angle = 10;
 
 function setup() {
-  let cnv = createCanvas(400, 400);
+  let container = document.getElementById('p5-container');
+  let cnv = createCanvas(container.offsetWidth, container.offsetHeight);
   cnv.parent('p5-container');
+  cnv.style('width', '100%');
+  cnv.style('height', '100%');
 }
 
 function draw() {
@@ -11,4 +14,9 @@ function draw() {
   rotate(angle);
   rect(0, 0, 100, 100);
   angle += 0.25;
+}
+
+function windowResized() {
+  let container = document.getElementById('p5-container');
+  resizeCanvas(container.offsetWidth, container.offsetHeight);
 }

content/editor/test.md

@@ -1,6 +1,3 @@
 test
 
-%% <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
-<script src="sketch.js"></script> %%
-
 ![[sketch_p5.js]]

quartz/plugins/transformers/ofm.ts

@@ -250,7 +250,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
                         type: "html",
                         // change p5 canvas size to width and height
                         // <canvas id="defaultCanvas0" class="p5Canvas" width="800" height="800" style="width: 400px; height: 400px;"></canvas>
-                        value: `<div id="p5-container" width="200" height="200">
+                        value: `<div id="p5-container" width=auto height=100%>
                                 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
                                 <script src="${url}"></script></div>`,
                       }

quartz/styles/base.scss

@@ -475,6 +475,11 @@ iframe {
   border-radius: 5px;
 }
 
+#p5-container {
+  min-height: 400px;
+  max-height: 800px;
+}
+
 .spacer {
   flex: 1 1 auto;
 }