q5InstanceMode.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mini Editor Example</title>
  <link rel="stylesheet" href="mini-editor.css">
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
    }

    .editor-container {
      border: 1px solid #3c3d3e;
      margin: 5px;
      padding: 0;
      height: 400px;
      overflow: hidden;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.2/split.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/loader.min.js"></script>
  <script src="mini-editor.js"></script>
</head>

<body>
  <div id="editor1" class="editor-container">
    <script type="text/javascript" id="script1">
function setup() {
    createCanvas(800, 800);
    noLoop();
}

function draw() {
    drawRecursiveRects(0, 0, width, height, 7);
}

function drawRecursiveRects(x, y, w, h, depth) {
    if (depth === 0 || w < 5 || h < 5) return; //  minimum size check
    fill(random(50, 255), random(50, 255), random(50, 255));
    rect(x, y, w, h);
    let subdivisions = floor(random(1, 4)); // Random number of subdivisions for each
    let split = random(1) > 0.5;
    if (split) {
        // Split width
        let sectionWidth = w / subdivisions;
        for (let i = 0; i < subdivisions; i++) {
            drawRecursiveRects(x + i * sectionWidth, y, sectionWidth, h, depth - 1);
        }
    } else {
        // Split height
        let sectionHeight = h / subdivisions;
        for (let i = 0; i < subdivisions; i++) {
            drawRecursiveRects(x, y + i * sectionHeight, w, sectionHeight, depth - 1);
        }
    }
}
    </script>
  </div>

  <div id="editor2" class="editor-container">
    <script type="text/javascript" id="script2">
      function setup() {
  createCanvas(200, 200);
}
function draw() {
  background(0);
  ellipse(100, 100, 100, 100);
}
    </script>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      new MiniEditor({
        Q5InstancedMode: true,
        containerId: 'editor1',
        scriptId: 'script1',
        autoRun: true,
        title: 'Square',
        canvasWidth: 200,
        scaleContainer: true,
        options: {
            // wordWrap: 'on', 
            wordWrapColumn: 0, 
            wrappingIndent: 'same', 
            tabSize: 2,
            minimap: {
                enabled: false
            },
            scrollbar: {
                verticalScrollbarSize: 8,
                vertical: 'auto',  
                horizontal: 'auto', 
                handleMouseWheel: true 
            },
        }
      });

      new MiniEditor({
        Q5InstancedMode: true,
        containerId: 'editor2',
        scriptId: 'script2',
        autoRun: true,
        title: 'Circle',
        canvasWidth: 'auto'
      });
    });
  </script>
</body>

</html>