How to avoid image compression using the get() function?

p5.js Coding Questions
1

Hello!
I’m using the get() function repeatedly and the resulting image degrades, apparently due to compression. Is there any way to get around this? Thanks!

/* animator tool */

let frames, span, current;

function setup() {
  span = 10;
  current = 0;
  createCanvas(500, 500);
  init();
}

function init(){
  frames = [];
  background(0);
  stroke(255);
  strokeWeight(5);
  for (let i = 0; i < span; i++) {
    let img = get();
    frames.push(img);
  }
}

function draw() {
  background(frames[current]);

  if (mouseIsPressed) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }

  frames[current] = get();
  current++;
  current %= span;
}

function keyTyped(){
  if(key === ' '){
    init();
  }
}

link to live sketch

1 Like
2

Maybe draw to pgraphics and save the pgraphics

1 Like
3

Thanks, Paul! that definitely worked!

/* animator */

let frames; 
let span, current;

let prevTime, currentTime;
let speedSlider, colorFg, colorBg, weightSlider;

function setup() {
  frames = [];
  span = 10;
  current = 0;
  speedSlider = createSlider(0, 800, 0, 1);
  weightSlider = createSlider(0.25, 15, 3, 0.25);
  colorFg = createInput("#FFFFFF", "color");
  colorBg = createInput("#000000", "color");

  prevTime = 0;
  currentTime = 0;
  createCanvas(500, 500);
  background(0);

  for (let i = 0; i < span; i++) {
    let img = createGraphics(width, height);
    frames.push(img);
  }
}

function draw() {
  background(colorBg.value());
  image(frames[current], 0, 0);

  if (mouseIsPressed) {
    frames[current].stroke(colorFg.value());
    frames[current].strokeWeight(weightSlider.value());
    frames[current].line(pmouseX, pmouseY, mouseX, mouseY);
  }

  if (currentTime > prevTime + speedSlider.value()) {
    current++;
    current %= span;
    prevTime = millis();
  }
  currentTime = millis();
}
2 Likes
4

If you ever do need to get the full resolution image from the canvas you can do so using copy() rather than get(). Here’s a stack overflow answer I posted recently on the topic: p5.js - p5.Image from get() is drawn blurry due to pixelDensity issue p5js - Stack Overflow

2 Likes