Managing Multiple Sketches - cdaein/ssam GitHub Wiki

Multiple Sketches On The Same Page

To create multiple sketches on the same page, you can adjust the sketch settings like below:

const settings = {
  centered: false, // disable default css style
  id: "unique-canvas-id", // provide a unique ID for each canvas
}

ssam(sketch, settings)

You will also need to update CSS styles in index.html to meet your needs.

Multiple Sketches On The Same Folder

✋ Currently, hot reload doesn't work with the first two methods explained below.

If you have multiple sketches within the same src folder and want to choose one of them to load, there are a few strategies. Let's say your project structure is as below:

.
├── index.html
├── src
│   ├── index.js
│   └── sketchbook
│       ├── sketch1.js
│       ├── sketch2.js
│       ├── ...
├── ...

1. Manual Import

// src/index.js
import { sketch as sk1, settings as st1 } from "./sketchbook/sketch1";
import { sketch as sk2, settings as st2 } from "./sketchbook/sketch2";

ssam(sk1, st1);

2. Load Modules As Array

// src/index.js
const moduleArray = Object.entries(import.meta.glob("./sketchbook/*.js"));

const idx = 0; // change sketch index
const importedModule = moduleArray[idx][1];

ssam((await importedModule()).sketch, {});

3. CLI Option

Update your code as below:

// src/index.js
try {
  const importedModule = await import(
    // defined in env via CLI
    `./sketchbook/${window.SKETCH}.js`
  );
} catch {
  console.error(`module import error`);
}

// vite.config.js
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    base: "./",
    plugins: [/** .. */],
    build: { /** .. */ },
    define: {
      SKETCH: JSON.stringify(env.SKETCH),
    },
  };
});

Run the sketch with the CLI command below:

$ SKETCH=sketch1 npm run dev