Random color movieclip html5/canvas

Report · Aug 26, 2018

Is it possible to color movieclips in a randon color picked out a list ?

there is a discussion that worked well on AS3 (Re: change color on every loop ), but i want to make ik work in html5/canvas.

Regards,

KN

Report · Aug 27, 2018

Hi.

Yeah. There is.

But please keep in mind that there are issues when using filters in HTML5 Canvas:

Color effects are published as a filter and subject to the same limitations. (2)
Filters are very expensive and are not updated once applied. Cache as bitmap is automatically enabled when a filter is applied. This can prevent animations from updating.
Applying "cache as bitmap" to an animated instance will prevent the animation from updating.

I recommend you to consider presetting the styles/colors in different frames and then pick them randomly.

JavaScript code:

this.setColors = function()
{
    var w = exportRoot.target.nominalBounds.width * exportRoot.target.scaleX;
    var h = exportRoot.target.nominalBounds.height * exportRoot.target.scaleY;
    var index = exportRoot.allowRepetition ? Math.floor(Math.random() * exportRoot.colors.length) : exportRoot.count %      exportRoot.colors.length;
    var r = exportRoot.colors[index].r;
    var g = exportRoot.colors[index].g;
    var b = exportRoot.colors[index].b;
if (!exportRoot.allowRepetition && exportRoot.count % exportRoot.colors.length == 0)
{
    exportRoot.colors.sort(function(a, b)
    {
          if (Math.random() < 0.5)
              return -1;
          else
              return 1;
    });
}
exportRoot.target.filters = [new createjs.ColorFilter(0, 0, 0, 1, r, g, b, 1)];
exportRoot.target.cache(-w * 0.5, -h * 0.5, w, h);
exportRoot.count++;
}
if (!this.hasStarted)
{
    this.colors =
    [
          {r:180, g:35,  b:11},
          {r:212, g:192, b:26},
          {r:29,  g:221, b:34},
          {r:33,  g:124, b:237},
          {r:131, g:12,  b:199}
    ];
    this.target = this.rec;
    this.allowRepetition = false;
    this.count = 0;
    this.hasStarted = true;
}
this.setColors();

FLA download:

animate_cc_html5_random_colors.zip - Google Drive

Regards,

JC

Report · Aug 27, 2018

thanks !

This is very helpful but have still some problems.

The first color you see is always the first color of the list, can this color be a random color?

Can i use this in a movieclip ? When i copy the frames in an movieclip and place this movieclip on the main stage its not working anymore ?