mattdesl / canvas-sketch

[beta] A framework for making generative artwork in JavaScript and the browser.
MIT License
5.01k stars 393 forks source link

Re-rendering in penplot mode (ie. with renderPaths()) #131

Closed notwaldorf closed 2 years ago

notwaldorf commented 2 years ago

Hiya!

I'm using canvas-sketch with dat.gui, so i'm used to calling sketchManager.render() to re-render the canvas. This works great in non-plotter mode, but I've recently switched to using renderPaths and I think I've borked my setup in the process, as sketchManager.render() doesn't call my main drawing function anymore. I'm like 90% sure that the problem is with what i'm returning from sketch, but I also don't know what it should be. Here's my setup:

const canvasSketch = require('canvas-sketch');
const { renderPaths, } = require('canvas-sketch-util/penplot');
// all the other good setup bits

let sketchManager;

// The drawing bit.
const sketch = ({ width, height, units }) => {
   // Do the work, get some paths
   return props => renderPaths(paths, {
    ...props,
    lineWidth: 0.02
  });

// The dat.gui bits.
(async () => {
  sketchManager = await canvasSketch(sketch, settings);

  function redraw() {
    sketchManager.render();
  }
  gui.add(controls, 'a', 0, 1).onChange(redraw);
})();

Thank you!! 🥰🙏

notwaldorf commented 2 years ago

I think I sorted it by moving all the actual work inside the returned function in sketch, so:

const sketch = ({ width, height, units }) => {
   return props => {
      // Do the work, get some paths
      return renderPaths(paths, {
          ...props,
          lineWidth: 0.02
       });
   }
}