Fade Animation of character arrays

p5.js Coding Questions
1

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 = [
['','','1a','','',''],
['','1b','','1h','',''],
['1c','','','','1g',''],
['','1d','','1f','',''],
['','','1e','','',''],
['','','','','',''],
];

let shape2 = [
['','','2a','','',''],
['','2b','','2h','',''],
['2c','','','','2g',''],
['','2d','','2f','',''],
['','','2e','','',''],
['','','','','',''],
];

function setup() {

    createCanvas(400,400);
}

function draw() {
background(220);
  
  let w = width /5;
  let h = height / 6;
  
  //GRID
  line(w,0,w,height);
  line(w*2,0,w*2,height);
  line(w*3,0,w*3,height);
  line(w*4,0,w*4,height);
  
  line(0,h,width,h);
  line(0,h*2,width,h*2);
  line(0,h*3,width,h*3);
  line(0,h*4,width,h*4);
  line(0,h*5,width,h*5);

  //shape1
  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];
    //textAlign(CENTER);
    textSize(32);
    fill(255,0,0);
    text(spot, x + w/3,y+h/2.5);
    }
  }
  
  //shape2 
  
  // 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];
    textSize(32);
    fill(0,255,0);
    text(spot, x + w/2,y+h/1.2);
     
    }
  }
 
}
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
3

Jeremy!

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…
THX
BX

1 Like