Main canvas and createGraphics() off screen canvas not matching

p5.js Coding Questions
1

Hey everyone! Here’s the image I’m talking about (https://imgur.com/ZzCpEca) You can see the particles on my exported canvas are not in the same place as the main canvas. Seems like they start in different positions or something. I think I need to add an update/reset so they look the same but not quite sure how. Here’s my code: (https://editor.p5js.org/hansi95/sketches/sEJ6wm7oY?fbclid=IwAR1TTpAEtA_G9z5cStr5NnkCdxEbg2m09kfQwq-Wn0hvp66W3JQbU4hQM5Q).

ZzCpEca
ZzCpEca2698×1614 657 KB
Any help would be greatly appreciated!

2

It looks like what you’re drawing to the on-screen canvas and off-screen are two different images? How about drawing only to the off-screen canvas and use the main screen canvas to simply display it?

Here is a simple example. I have to call noLoop() in draw(), otherwise, the last frame doesn’t get captured in the image file.

let img

let saveImg = false

function setup() {
  createCanvas(400, 400);
  frameRate(2)

  img = createGraphics(400, 400)
}

function draw() {
  background(220);

  drawToBuffer(img)
  image(img, 0, 0) // simply display the buffer

  if (saveImg) {
    noLoop()
    img.save('test.png')
    saveImg = false
  }
}

function drawToBuffer(pg) {
  pg.fill(255, 0, 0)
  pg.ellipse(random(width), random(height), 50, 50)
}

function keyPressed() {
  if (key === 's') {
    saveImg = true
  }
}
3

Hmm either way I just need the final output to be exported as the offscreen canvas. This code seems a little simpler than mine lol

4

Try multiplying the positions in the drawing commands to scale them. Also, I would recommend drawing to both canvases every frame unless you have a reason you can’t.

var pause;
var main, img;
var particles;
var inc, zz;

function setup() {
  frameRate(60);
  main = createCanvas(360, 640);
  img = createGraphics(3600, 6400);
  background(0);
  img.background(0);
  
  pause = false;
  inc = 0.003;
  zz = 0;

  particles = [];
  for(a=0; a<5; a++) {
    particles.push(new Particle(
      random(width), random(height)));
  }
}

function keyReleased() {
  if(key == 's') {
    pause = true;
    window.open(img.canvas.toDataURL());
  } else if(key == 'p') {
    pause = !pause;
  }
}

function draw() {
  if(pause) {
    return;
  }
  zz += 0.01;
  for(a=0; a<particles.length; a++) {
    particles[a].tick();
    particles[a].disp(main, 1);
    particles[a].disp(img, img.width / width);
  }
}

function Particle(xx, yy) {
  this.pos = createVector(xx, yy);
  this.vel = createVector(0, 0);
  
  this.wrap = function() {
    if(this.pos.x > width) {
      this.pos.x -= width;
    }
    if(this.pos.x < 0) {
      this.pos.x += width;
    }
    if(this.pos.y > height) {
      this.pos.y -= height;
    }
    if(this.pos.y < 0) {
      this.pos.y += height;
    }    
  }
  
  this.tick = function() {
    this.vel = p5.Vector.fromAngle(
      noise(inc * this.pos.x, inc * this.pos.y, zz) * TWO_PI
    );
    this.pos.add(this.vel);
    this.wrap();
    this.vel.mult(0.7);
  }
  
  this.disp = function(ctx, scl) {
    ctx.stroke(255);
    ctx.strokeWeight(1 * scl);

    var spos = this.pos.copy();
    spos.mult(scl);
    var svel = this.vel.copy();
    svel.mult(scl);
    ctx.line(
      spos.x, spos.y, 
      spos.x + svel.x, spos.y + svel.y);
  }
}
1 Like