Fade Animation of character arrays

Dear p5 community,

I build some character arrays as two shapes (shape1 and shape2)

I would like to blend over with a fade animation (1 sec) from shape 1 into shape2, after having been displayed for 10 secs.
During the fade in of shape2, shape1 should disappear as a fade out animation (1 sec), too.

My question: Is there a dedicated fade function?
However, I found a bit on getting it solved with the constrain keyword, but not really dug into this yet…

In object oriented programming I would roughly consider walking a route like shape1.fadeIn […]shape2.fadeOut , writng a fadeIn and a fadeOut function, but not sure in p5.

Later on I will have ten or so shapes blending over from one another in a certain order (shape1, shape2,…,shape10)

THX for your help!!

let shape1 = [

let shape2 = [

function setup() {


function draw() {
  let w = width /5;
  let h = height / 6;

  for (let j = 0; j < 6; j++) {
  for (let i = 0; i < 5; i++){
    let x = w * i ;
      let y = h * j ;
      let spot = shape1[j][i];
    text(spot, x + w/3,y+h/2.5);
  // HOW TO...?: shape2 should be shown after 10 secs with a fade in / while shape1 should be faded out
  for (let j = 0; j < 6; j++) {
  for (let i = 0; i < 5; i++){
    let x = w * i ;
      let y = h * j ;
      let spot = shape2[j][i];
    text(spot, x + w/2,y+h/1.2);

Are you trying to morph between two shapes – so, have different points move to new positions, becoming a new shape – or are you trying to cross-fade, where one slowly image becomes more transparent, and one becomes more opaque?

1 Like


I worked on the project and pretty much got a first working version written in the online p5 editor. If you like you can visit it here.

Its kind of cross-fading through an array of character arrays, whose elements are distributed on a grid…
Please have a look. My main problem now is the unstable beat (should be a perfect metronome and stay 100% in time) .

The coding design of the fade animations is of course at least not perfect and needs refactoring, too. But not too important for the moment…

1 Like