# Fade Animation of character arrays

**URL:** <https://discourse.processing.org/t/fade-animation-of-character-arrays/15409>\
**Category:** Coding Questions\
**Created:** [November 11, 2019, 4:41pm UTC](https://discourse.processing.org/t/fade-animation-of-character-arrays/15409 "2019-11-11T16:41:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 11, 2019, 4:41pm UTC](https://discourse.processing.org/t/fade-animation-of-character-arrays/15409/1 "2019-11-11T16:41:45Z")

</div>

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!!

```auto
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);
     
    }
  }
 
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 14, 2019, 5:58pm UTC](https://discourse.processing.org/t/fade-animation-of-character-arrays/15409/2 "2019-11-14T17:58:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![byxx](https://avatars.discourse-cdn.com/v4/letter/b/df705f/32.png) [@byxx](https://discourse.processing.org/u/byxx)\
**Post date:** [November 14, 2019, 6:14pm UTC](https://discourse.processing.org/t/fade-animation-of-character-arrays/15409/3 "2019-11-14T18:14:54Z")

</div>

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.

> [@Beat unstable in graphic animation](https://discourse.processing.org/t/beat-unstable-in-graphic-animation/15493):
>
> Dear p5 community, [https://editor.p5js.org/byxx/sketches/EuJCp1iVI](https://editor.p5js.org/byxx/sketches/EuJCp1iVI) Although the basic functionality is there, it seems that the beat is not really(!) stable, which I considered to be cared for by p5 accurately… thanks for help here!! BX

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