#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# can I save the state that the canvas is in, and the call that state later?

edited June 2017

I found that if I do not put a background() call in the first line of draw, when I make a moving circle it makes a trail. Now, I thought this was very cool but I don't have much control over it. I may be asking the wrong question (please tell me if I am), but if I want to have more control over the trail I have to make it my self, this would mean I need to draw a circle at the x and y (which are changing variables) of the main circle and not have it move, but that means infinite variables or infinite circles (I think). I guess what I mean by my question is can I make a circle at x and y variables and in the next frame make another circle through the same ellipse call while not moving or deleting the first extra circle and so on so forth.

Tagged:

• edited June 2017

btw here is my code

``````function setup() {
createCanvas(1000, 1000);
}

var speed = 5;
var x = 0;
var y = 0;

function draw() {
background(255)
if (keyIsDown(SHIFT)) {
rect(x - 25, y - 25, 50, 50);
} else {
ellipse(x,y,50,50)
}
if (keyIsDown(87)) {
y -= speed;
}
if (keyIsDown(83)) {
y += speed;
}
if (keyIsDown(68)) {
x += speed;
}
if (keyIsDown(65)) {
x -= speed;
}
}
``````
• I could make this work thx!!

• edited October 2019

Just letting ya know I've converted my original Java/JS Mode sketch to p5.js: O:-)
https://ThimbleProjects.org/gotoloop/288988/

``````/**
* GoToLoop (2017-Jun-19)
*
* Forum.Processing.org/two/discussion/23114/
* can-i-save-the-state-that-the-canvas-is-in-
* and-the-call-that-state-later#Item_4
*
*/

'use strict';

const DIM = 0o100, LEN = DIM << 1, NEW = DIM - 1 << 1, OPAC = 0o30,
xy = new Int16Array(LEN);

let bgc;

function setup() {
windowResized();

ellipseMode(CENTER).colorMode(RGB).blendMode(BLEND);
fill(0, OPAC).noStroke().noCursor();
bgc = color(0xff);

mouseX = width >> 1, mouseY = height >> 1;
new Int32Array(xy.buffer).fill(mouseY << 16 | mouseX & 0xffff);
}

function draw() {
background(bgc);
for (let i=0; i<NEW; i+=2)  ellipse(xy[i] = xy[i+2], xy[i+1] = xy[i+3], i>>1);
ellipse(xy[NEW] = mouseX, xy[NEW+1] = mouseY, DIM);
document.title = round(frameRate());
}

function windowResized() {
const css = getComputedStyle(canvas.parentElement),
mw = float(css.marginLeft) + float(css.marginRight),
mh = float(css.marginTop)  + float(css.marginBottom),
ww = float(css.width)  || windowWidth,
wh = float(css.height) || windowHeight,
w = round(ww - mw), h = round(wh - mh);

resizeCanvas(w, h, true);
}
``````
• edited June 2017
```<!DOCTYPE html>

<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>

<script async src=https://CDN.JSDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

<style>
html { height: 100%; margin: auto; }

canvas {
height: inherit; margin: inherit; position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>
```
• nice i converted too. Although I did nothing fancy, you know change all of the voids to function and the ints to vars.

Oh by the way I am in no way distributing this and take no credit for the things I made with it.