Recreating a P5.js interactive animation in Adobe Animate

Hi.

Here's a suggestion on how to adapt this code to Animate using CreateJS' graphical capabilities.

JavaScript / JS code:

var root = this;
var container;
var shapes = [];

function main()
{
	root.stop();
	container = root.container;
	container.mouseChildren = false;
	container.on("mousedown", mousePressed);
	createjs.Ticker.timingMode = createjs.Ticker.RAF;
	createjs.Ticker.on("tick", draw);
}

function draw()
{	
	var i, shape;
	
	for (i = shapes.length - 1; i > -1; i--)
	{
		shape = shapes[i];
		shape.graphics.clear();
		shape.graphics.beginFill("rgba(" + shape.colr + "," + shape.colg + "," + shape.colb + "," + shape.op + ")");
		shape.graphics.drawCircle(0, 0, shape.dia);
		shape.dia += 1;
		shape.op -= 0.01;
		
		if (shape.op[i] <= 0)
		{
			shape.parent.removeChild(shape);
			shape._off = true; // needed in some versions of Animate
			shapes.splice(i, 1);
		}
	}
}

function mousePressed(e)
{
	var shape = new createjs.Shape();
	
	shape.x = e.stageX / stage.scaleX;
	shape.y = e.stageY / stage.scaleY;
	shape.colr = random(0, 255);
	shape.colg = random(0, 255);
	shape.colb = random(0, 255);
	shape.op = 1;
	shape.dia = 0;
	container.addChild(shape);
	shapes.push(shape);
}

function random(min, max)
{
	return min + Math.random() * (max - min);
}

main();

Download / FLA / source / files:

https://bit.ly/3CWFABz

I hope it helps.

Regards,

JC