Error exporting frames CMD + S

[giodum]

Hi everybody, I am trying for the first time canvas-sketch, but I am facing a problem.
Pressing cmd + S or ctrl + S an image should be saved, but the only thing that I get is a re-run of the code and nothing get saved.

I installed everything via npm, and these are my versions:
"canvas-sketch": "^0.7.6",
"canvas-sketch-cli": "^1.11.20"

I tried to export images in Chrome, Safari and Firefox, but I always get the same result.

Thank you in advance

Giorgio

[raphaelrockus]

Hi Giorgio,

I think what's happening is that you are sending the keys "Cmd + S" or "Ctrl + S" to your code editor (thus triggering the saving of your code and the hot reload) while you need to send them towards the browser instead.

You can use "Alt-tab" or "Cmd + tab" to alternate between open windows or just click on your browser and then type the keys.

Let me know if it helped.

Cheers from Belgium,
Raphaël

[sixrumcoins]

Hi Raphael,

I have the same issue — pressing Cmd + S / Ctrl + S:

• triggers code re-run,
• saves alternated image,
• redraws in a browser window to another heavily alternated image

Not sure it's related to "sending the keys to your code editor" — I don't see my editor uses these combinations to trigger anything related to re-run/refresh.

[email protected]
[email protected]
any browser

I'd appreciate if you can advise a solution.

Kind regards,
S

---

UPDATE
Saving does not trigger re-run if using "tick" as described here #25

[SebdGv]

hi everyone,

same issue - Has anyone found a solution to fix it?

Thank you

[dudesl]

Hi Giorgio,

I think what's happening is that you are sending the keys "Cmd + S" or "Ctrl + S" to your code editor (thus triggering the saving of your code and the hot reload) while you need to send them towards the browser instead.

You can use "Alt-tab" or "Cmd + tab" to alternate between open windows or just click on your browser and then type the keys.

Let me know if it helped.

Cheers from Belgium, Raphaël

This is a great hint! the Cmd-s / Ctrl-s should be pressed ON the browser, not in the editor

[MrAmii]

This is a great hint! the Cmd-s / Ctrl-s should be pressed ON the browser, not in the editor

When I press it on the browser it just causes it to iterate and saves an image that is not the one before the saving and not the one after it either. This behavior happens no matter where I press it, browser, editor or otherwise.

[sfrieson]

@MrAmii You're right about this. This is because it rerenders the sketch to save it.

Since you're getting different results each time, I'm assuming that you're using random numbers in your sketch. You can get consistent outputs in your save if you use a pseudorandom number generator and set the seed as the first thing you do in your sketch. This will effectively reset the seed when it is re-rendered in the save operation. Example boilerplate:

const canvasSketch = require('canvas-sketch');
const { setSeed, value } = require('canvas-sketch-util/random');

const settings = {...};

const seed = Math.random();
// you can log your seed out which can be helpful to
// copy/paste into your code and use for debugging
console.log('seed: ' seed);

canvasSketch(({ update }) => {
  return ({ context }) => {
    setSeed(seed);

    // use `value()` and other utils instead of `Math.random()`
    const randomNumber = value(); 

    //... sketch code ...
  });
}, settings);

[MrAmii]

@sfrieson Thank you for that breakdown, I have a much better understanding thanks to you. I have attempted to implement this in my very simple script made by following along with a course, but I have not been able to implement the last part where you call canvasSketch. You've already been a great help but would you mind taking a look at this script? I left the last part as it was. It is functioning currently with the most of what you described.

const canvasSketch = require('canvas-sketch');
const { setSeed, value } = require('canvas-sketch-util/random');

const settings = {
  dimensions: [ 1080, 1080 ]
};

const seed = Math.random();
// you can log your seed out which can be helpful to copy and paste into your code for debugging
console.log('seed: ', seed);

setSeed(seed);

// use 'value()' and other utils instead of 'Math.random()'
const randomNumber = value();

const sketch = () => {
  return ({ context, width, height }) => {
    context.fillStyle = 'white';
    context.fillRect(0, 0, width, height);
		context.lineWidth = width * 0.01;


		const w 	= width * 0.1;
		const h 	= height * 0.1;
		const gap = width * 0.03;
		const ix 	= width * 0.17;
		const iy 	= height * 0.17;

		const off = width * 0.02;

		let x, y;
		
		for (let i = 0; i < 5; i++) {
			for (let j = 0; j < 5; j++) {
				let x = ix + (w + gap) * i;
				let y = iy + (h + gap) * j;
			
				///First Array of Rectangles
				context.beginPath();
				context.rect(x, y, w, h);
				context.stroke();
				
				///Second "inner" Array of Rectangles
				if (Math.random() > 0.5) {
					context.beginPath();
					context.rect(x + off/2, y + off/2, w - off, h - off);
					context.stroke();
				}
			} 
		}
	}
};

canvasSketch(sketch, settings);

[mattdesl]

Hi @MrAmii try using value() instead of Math.random() in your render function. Or, replace Math.random() with randomNumber that you defined earlier.

Currently your code is producing “non deterministic” randomness when rendering which means it’s truly random each time it draws a frame. What you want is “deterministic” or “seeded” random, which is based on your seed that you set up. Since you’ve already set a seed, you can use the value() function that you’ve imported from canvask sketch util into your script.