Clearing a canvas between frames?

akakak1212

First time poster on the forum and new processing coder here.

I made a sketch that makes text look like it's breathing (font grows and shrinks). It looked great when I was using windowWidth+windowHeight to define my canvas. However, I want to embed the sketch on my website within a div so I changed the canvas size to a fixed width+height.

Now for some reason the animation is ghosted. Every frame that gets drawn stays visible, so after one 'breath' cycle, the text just looks fatter and no longer looks like it's changing.

any idea why this is the case?

code below:

var LOW = 180.;
var HIGH = LOW+20.;
var count = LOW;
var increase = true;
var nav_size = 26;
var padding_top;

var holder_width = 500;
var holder_height = 250;

var a = 'a';
var dot = '.';
var t = 't';
var b = 'b';
var d = 'd';

var a_wid;
var dot_wid;
var t_wid;
var b_wid;
var d_wid;


function setup() {
  canvas = createCanvas(holder_width, holder_height);
  setUpWindow();

  console.log(LOW);
  console.log(HIGH);
  frameRate(5);

  textFont("Averia Sans Libre");
  textSize(HIGH);
  a_wid = textWidth(a);
  dot_wid = textWidth(dot);
  t_wid = textWidth(t);
  b_wid = textWidth(b);
  d_wid = textWidth(d);

  canvas.parent('sketch-holder');
}

function draw() {
  // responsive canvas environment
  var win_inner_width = HIGH*1.6;
  var padding_left = (holder_width - win_inner_width) / 2;

  // set text color and alignment
  fill(255);
  textAlign(CENTER);

  // easing function for text size
  var ease_val;
  var t_size;
  var ease = map(count,LOW,HIGH,0,1);

  if (ease < .5) {
    ease_val = 2*ease*ease;
  } else {
    ease_val = -1+(4-2*ease)*ease;
  }

  // set text size
  if (increase == true) {
    t_size = map(ease_val,0,1,LOW,HIGH);
  } else {
    t_size = map(ease_val,1,0,HIGH,LOW);
  }
  textSize(t_size);

  // write a.tbd to page
  text(a, padding_left, padding_top);
  text(dot, padding_left+HIGH*.4, padding_top);
  text("t", padding_left+HIGH*.65, padding_top);
  text("b", padding_left+HIGH*1.1, padding_top);
  text("d", padding_left+HIGH*1.6, padding_top);

  // increase text size counter
  if (increase == true) {
    count += 1;
  } else {
    count -= 1;
  }

  // reset counter if over high or under low
  if (count > HIGH) {
    increase = false;
  } else if (count < LOW) {
      increase = true;
  }

}

function setUpWindow() {
  if (windowWidth < 600) {
    LOW = 80.;
    HIGH = 100.;
    count = HIGH;
    nav_size = 18;
    padding_top = holder_height-10; 
  } else {
    LOW = 180.;
    HIGH = 200.;
    count = LOW;
    nav_size = 26;
    padding_top = holder_height-10; 
  }
}
// responsive canvas environment media queries
function windowResized() {
  resizeCanvas(holder_width, holder_height);
  setUpWindow();
}

akakak1212

If anyone else has this question, I found it had been asked+answered previously here.

Short answer: add clear() at the beginning of your draw loop.

jeremydouglass

By default, Processing / p5.js does not clear the canvas between frames -- like a sketchpad. If you want to (like for animation), use background()

• https://p5js.org/reference/#/p5/background

This function is typically used within draw() to clear the display window at the beginning of each frame, but it can be used inside setup() to set the background on the first frame of animation or if the background need only be set once.

akakak1212

thanks! that didn't work for me since my background is transparent, but adding a clear() at the beginning of my draw loop did the trick.

jeremydouglass

Sure -- you can also set the background color to transparent, or use clear().

Note that this transparency will work in p5.js but not in Processing (because there is nothing below the canvas level in Processing, so that surface doesn't support transparency -- you have to use PGraphics instead and/or reset it to a base color.