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

swishy_fishy · 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.

swishy_fishy · 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;
    }
}

GoToLoop · June 2017

https://Forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

You mean something kinda like this: :-/
http://Studio.SketchPad.cc/sp/pad/view/ro.9GTDpA6dp4tH1/latest

swishy_fishy · June 2017

I could make this work thx!!

GoToLoop · June 2017

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

/**
 * Chase-Shadow Circles (v1.1.0)
 * 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
 *
 * Glitch.com/~chase-shadow-circles
 * Studio.ProcessingTogether.com/sp/pad/export/ro.9GTDpA6dp4tH1
 */

'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);
}

GoToLoop · 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>

swishy_fishy · June 2017

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.

Howdy, Stranger!

Categories

In this Discussion

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

Best Answer

Answers