//DATA
const paletteOptions = {
noFlip: {
bg: [
0X8ccfe4,
0x6d80d6,
0x5e4e7f,
0xde97e4,
0xf8a2b2,
0xf8aa75,
0xd8c672,
],
fg: [
0x6569f6,
0x663fbc,
0xd757e3,
0xfc4f6d,
0xfd7e28,
0xf1d24c,
],
},
flip: {
bg: [
0X8ccfe4,
0x6d80d6,
0x5e4e7f,
0xde97e4,
0xf8a2b2,
0xf8aa75,
0xd8c672,
0xfd7e28,
0xfc4f6d,
0xd757e3,
0x6569f6,
0x5cb7f7,
],
fg: [
0x6569f6,
0x663fbc,
0xd757e3,
0xfc4f6d,
0xfd7e28,
0xf1d24c,
0xd8c672,
0xf8aa75,
0xf8a2b2,
0xde97e4,
0x5e4e7f,
0x6d80d6,
],
},
alternate: {
bg: [
0X8ccfe4,
0x5cb7f7,
0x5e4e7f,
0x663FBC,
0xDE97E4,
0xFC4F6D,
0XF8AA75,
],
fg: [
0x6569f6,
0x6d80d6,
0XD757E3,
0xde97e4,
0XFD7E28,
0XF8AA75,
0XF1D34C,
],
},
}
const data = {
palette: paletteOptions.alternate, //which sequence of color animations to use
settings: {
startColor: '#5050E6',
animate: true,
colorAnimTime: 5, //time to transition between colors in sec
rotationAnimTime: 20, //time to rotate the blur around its circle in sec
maxScaleChange: .3, //percentage to increase or decrease size of circle from starting scale
minScale: .25, //scale in percentage from root circle size of 100 pixels
maxScale: 2.25,
randomScaling: false, //when false, animate to positions specified in motionSequence, else animate to random scale within minScale,maxScale, maxScaleChange (when relativeScaling is true)
relativeScaling: false, //whether to scale relative to starting size or according to min, max
thresholdScaling: false, //only will work if relativeScaling is turned off
scaleThresholdMin: .75, //if an items current scale is under the minimum threshold...
scaleThresholdMax: 1.5, //...animate it over the maximum, and v.v.
allowContainerScaling: false, //if true, use containerScale to augment the overall scale of the animation
containerScale: 1.25, //factor by which to scale the container to achieve overall cluster size relative to screen
randomPositioning: false, //when false, animate to positions specified in motionSequence, else animate to random position within maxPositionChange
maxPositionChange: 100, //max pixels to move circle each animation cycle from starting position
allowInteractivity: false, //whether or not to make the animation respond to user input
interactiveMode: null, //['shift','glow','zoom','rotate']
shiftFactor: 100, //factor by which to exaggerate the movement of the container on mouse move
shiftDirection: 1, //-1 to shift toward cursor, 1 to shift away
glowColor: '#FFFFFF',
glowAlpha: .25,
unequalZooming: false, //when true, allows both x and y scaling
zoomMin: 1,
zoomMax: 1.5,
rotationLimiter: 10, //container will rotate 1/x degrees each tick - higher the number, slower the rotation when interactiveMode rotate is set
animateBlur: false, //when true, all circles will have a blur, and the opacity of these will be animated according to motionSequence
animBlurThreshold: 1, //when animateBlur true, any cluster animating to a scale above animBlurThreshold will show its blur, and any below animBlurThreshold will hide blur
mapAlpha: true, //when true, alpha values will be assigned based on scale - largest equals brightest. When false, any blur over threshold will be totally visible, and any blur under will be totally hidden
ambientRotation: true, //when true, container will continuously spin, and utilize rotationLimiter to determine speed of rotation
},
clusters: [
{
name: 'cluster1',
x: 37,
y: 144,
scale: 2.6,
rotation: 180,
},
{
name: 'cluster2',
x: -30,
y: -175,
scale: 2,
rotation: 90,
direction: -1
},
{
name: 'cluster3',
x: 494,
y: 0,
scale: 1.6,
rotation: 45,
direction: -1,
},
{
name: 'cluster4',
x: 134,
y: -381,
scale: .4,
rotation: 315,
},
{
name: 'cluster5',
x: 466,
y: -359,
scale: 1,
rotation: 135,
},
{
name: 'cluster6',
x: 306,
y: 345,
scale: .6,
rotation: 225,
direction: -1,
},
{
name: 'cluster7',
x: -279,
y: 58,
scale: .5,
rotation: 270,
},
{
name: 'cluster8',
x: -262,
y: -421,
scale: 1.4,
rotation: 30,
direction: -1,
},
{
name: 'cluster9',
x: -534,
y: -59,
scale: .8,
},
{
name: 'cluster10',
x: -184,
y: 431,
scale: 1.2,
rotation: 315,
direction: -1,
},
],
clusterConnections: [
{
from: 1,
to: 2,
},
{
from: 1,
to: 7,
},
{
from: 1,
to: 3,
},
{
from: 1,
to: 2,
},
{
from: 1,
to: 6,
},
{
from: 1,
to: 10,
},
{
from: 1,
to: 2,
},
{
from: 10,
to: 7,
},
{
from: 10,
to: 9,
},
{
from: 7,
to: 9,
},
{
from: 7,
to: 8,
},
{
from: 1,
to: 2,
},
{
from: 2,
to: 8,
},
{
from: 1,
to: 2,
},
{
from: 3,
to: 2,
},
{
from: 3,
to: 4,
},
{
from: 3,
to: 5,
},
{
from: 3,
to: 6,
},
],
motionSequence: [
[ //1
{
x: -86,
y: 231,
scale: 1.6,
},
{
x: 119,
y: -58,
scale: 2.6,
},
{
x: 552,
y: 115,
scale: .8,
},
{
x: 182,
y: -385,
scale: 1.2,
},
{
x: 514,
y: -203,
scale: .6,
},
{
x: 214,
y: 415,
scale: 1.4,
},
{
x: -302,
y: -203,
scale: 2,
},
{
x: -84,
y: -445,
scale: .8,
},
{
x: -567,
y: 48,
scale: .5,
},
{
x: -346,
y: 337,
scale: .4,
},
],
[ //2
{
x: 143,
y: 255,
scale: 1.2,
},
{
x: -25,
y: -155,
scale: 1.4,
},
{
x: 329,
y: 38,
scale: 1.6,
},
{
x: 159,
y: -381,
scale: 2,
},
{
x: 491,
y: -239,
scale: 1,
},
{
x: 472,
y: 380,
scale: .4,
},
{
x: -265,
y: -59,
scale: .8,
},
{
x: -428,
y: -330,
scale: .5,
},
{
x: -411,
y: 223,
scale: 2.6,
},
{
x: -79,
y: 451,
scale: .6,
},
],
[ //3
{
x: 349,
y: 281,
scale: 1.6,
},
{
x: -217,
y: -83,
scale: .4,
},
{
x: 171,
y: -87,
scale: 2.6,
},
{
x: -271,
y: -329,
scale: .6,
},
{
x: 199,
y: -401,
scale: 1.4,
},
{
x: 541,
y: -5,
scale: 1,
},
{
x: -207,
y: 159,
scale: 2,
},
{
x: -551,
y: -83,
scale: .8,
},
{
x: -231,
y: 411,
scale: 1.2,
},
{
x: 80,
y: 382,
scale: .5,
},
],
[ //4
{
x: 395,
y: 61,
scale: .6,
},
{
x: -163,
y: -31,
scale: 1.6,
},
{
x: 143,
y: -191,
scale: 2,
},
{
x: -497,
y: -261,
scale: 1.2,
},
{
x: -153,
y: -445,
scale: .4,
},
{
x: 532,
y: -232,
scale: .5,
},
{
x: 9,
y: 201,
scale: .8,
},
{
x: -401,
y: 283,
scale: 2.6,
},
{
x: -37,
y: 425,
scale: .8,
},
{
x: 345,
y: 383,
scale: 1.4,
},
],
[ //5
{
x: 517,
y: -114,
scale: 1.6,
},
{
x: -427,
y: 238,
scale: 1.4,
},
{
x: -82,
y: -147,
scale: 2.6,
},
{
x: -567,
y: -146,
scale: .6,
},
{
x: -237,
y: -412,
scale: 1.2,
},
{
x: 307,
y: -346,
scale: .8,
},
{
x: 86,
y: 190,
scale: 1.9,
},
{
x: -147,
y: 392,
scale: .8,
},
{
x: 232,
y: 447,
scale: .5,
},
{
x: 467,
y: 286,
scale: .4,
},
],
[ //6
{
x: 386,
y: -230,
scale: .8,
},
{
x: -225,
y: 23,
scale: .5,
},
{
x: -136,
y: -220,
scale: 1.6,
},
{
x: -548,
y: 112,
scale: 1.4,
},
{
x: -496,
y: -272,
scale: .4,
},
{
x: 118,
y: -388,
scale: 1.2,
},
{
x: 40,
y: 118,
scale: 2.6,
},
{
x: -234,
y: 378,
scale: .6,
},
{
x: 284,
y: 398,
scale: 1,
},
{
x: 518,
y: 86,
scale: 2,
},
],
[ //7
{
x: 179,
y: -136,
scale: 2,
},
{
x: -53,
y: 168,
scale: 1.6,
},
{
x: -195,
y: -126,
scale: 2.6,
},
{
x: -443,
y: 324,
scale: 1,
},
{
x: -571,
y: 30,
scale: 1.2,
},
{
x: -144,
y: -419,
scale: .5,
},
{
x: 209,
y: 346,
scale: .8,
},
{
x: 29,
y: 424,
scale: .4,
},
{
x: 523,
y: 218,
scale: 1.4,
},
{
x: 601,
y: -96,
scale: .6,
},
],
],
}
//DOM
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
let stage = new createjs.Stage('canvas');
//EASEL
let clusterContainer; //holds all clusters
let clusterTinter; //holds cluster container, tints fg
let bg;
let clustersArray = [];
let linesArray = [];
let resizeTimer;
//ANIMATION
let tl,
tl2,
clusterColorTimeline; //timelines
let step = 1; //iterator for positions
const numClusters = data.clusters.length;
let sequence = 1;
const numSequences = data.motionSequence.length;
//INTERACTIVITY
let glow;
let rotationTween, rotateVal;
function init() { //once canvas is sized
window.addEventListener('resize', handleResize, false);
sizeCanvas();
buildStage();
buildGUI();
const {animate,allowInteractivity,interactiveMode} = data.settings;
if (animate){
initAnimations();
}
if (allowInteractivity){
initInteractivity(interactiveMode);
}
}
function buildGUI(){
const gui = new dat.GUI();
const {settings} = data;
const animFolder = gui.addFolder('Animation');
const interactiveFolder = gui.addFolder('Interactivity');
animFolder.add(settings, 'animate');
animFolder.add(settings, 'colorAnimTime', 1, 10).step(1);
animFolder.add(settings, 'rotationAnimTime', 5,50).step(1);
animFolder.add(settings, 'maxScaleChange', .1,3).step(.1);
animFolder.add(settings, 'minScale', .1,1).step(.1);
animFolder.add(settings, 'maxScale', 1,3).step(.1);
animFolder.add(settings, 'randomScaling');
animFolder.add(settings, 'relativeScaling');
animFolder.add(settings, 'thresholdScaling');
animFolder.add(settings, 'scaleThresholdMin',.1,1).step(.1);
animFolder.add(settings, 'scaleThresholdMax',1,3).step(.1);
animFolder.add(settings, 'allowContainerScaling');
animFolder.add(settings, 'containerScale',.1,3).step(.1);
animFolder.add(settings, 'randomPositioning');
animFolder.add(settings, 'maxPositionChange',10,500).step(10);
interactiveFolder.add(settings, 'allowInteractivity');
interactiveFolder.add(settings, 'interactiveMode',['choose','rotate','shift','glow','zoom']);
interactiveFolder.add(settings, 'shiftFactor',10,500).step(10);
interactiveFolder.add(settings, 'shiftDirection',{'Away' : 1, 'Toward': -1});
interactiveFolder.addColor(settings, 'glowColor');
interactiveFolder.add(settings, 'glowAlpha',.1,1).step(.1);
interactiveFolder.add(settings, 'unequalZooming');
interactiveFolder.add(settings, 'zoomMin',.1,1).step(.1);
interactiveFolder.add(settings, 'zoomMax',1,2).step(.1);
animFolder.add(settings, 'rotationLimiter',1,20).step(1);
animFolder.add(settings, 'animateBlur');
animFolder.add(settings, 'animBlurThreshold',.5,1.5).step(.1);
animFolder.add(settings, 'mapAlpha');
animFolder.add(settings, 'ambientRotation');
const submitter = { Submit:function(){ clearCanvas() }};
gui.add(submitter,'Submit');
}
function sizeCanvas() { //first step
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
function handleResize(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(clearCanvas,500);
}
function clearCanvas(){
stage.removeAllChildren();
stage.clear();
TweenLite.ticker.removeEventListener('tick');
TweenMax.killAll(true,true,true,true); //only available with TweenMax
createjs.Ticker.reset();
stage.enableDOMEvents(false);
context.clearRect(0, 0, canvas.width, canvas.height);
clustersArray = [];
linesArray = [];
//ANIMATION
tl = tl2 = clusterColorTimeline = null;
step = 1;
sequence = 1;
setTimeout(()=>{
sizeCanvas();
buildStage();
const {animate, interactiveMode, allowInteractivity} = data.settings;
if (animate){
initAnimations();
}
if (allowInteractivity){
initInteractivity(interactiveMode);
}
},250);
}
function buildStage(){
const {allowInteractivity,interactiveMode} = data.settings;
buildBackground();
buildClusterContainer();
buildClusterLines();
if (allowInteractivity && interactiveMode.includes('glow')){
buildGlow();
}
stage.update();
}
function buildBackground(){
bg = new createjs.Shape();
bg.graphics.f('#7ECCE6').drawRect(0, 0, canvas.width, canvas.height);
bg.name = 'bg';
stage.addChild(bg);
}
function buildClusterContainer(){
const { settings } = data;
clusterTinter = new createjs.Container();
clusterContainer = new createjs.Container();
clusterContainer.x = canvas.width/2
clusterContainer.y = canvas.height/2
if (settings.allowContainerScaling){
clusterContainer.scaleX = clusterContainer.scaleY = settings.containerScale;
}
clusterContainer.name = 'clusterContainer';
buildClusters();
clusterTinter.addChild(clusterContainer);
stage.addChild(clusterTinter);
}
function buildClusters(){
data.clusters.forEach((clusterData,i)=> {
const cluster = buildCluster(clusterData);
clusterContainer.addChild(cluster);
clustersArray.push(cluster);
});
}
function buildCluster(params,i){
const {x = 0,y = 0,scale = 1, blur = true, rotation = 0, name = `cluster${i}`} = params;
const {settings} = data;
const cluster = new createjs.Container();
cluster.setTransform(x,y,scale,scale);
cluster.name = name;
const circle = buildCircle();
cluster.addChild(circle);
if (settings.animateBlur){
const blur1 = buildBlur1();
cluster.addChild(blur1);
const blur2 = buildBlur2();
cluster.addChild(blur2);
if (!blur || settings.animateBlur && scale < settings.animBlurThreshold){
blur1.alpha = 0;
blur2.alpha = 0;
}
blur1.rotation = rotation;
blur2.rotation = rotation;
} else {
if (blur){
const blur1 = buildBlur1();
cluster.addChild(blur1);
const blur2 = buildBlur2();
cluster.addChild(blur2);
}
}
return cluster;
}
function buildCircle(fillColor = data.settings.startColor){
const circle = new createjs.Shape();
circle.graphics.beginFill(fillColor).drawCircle(0, 0, 50);
circle.name = 'circle';
return circle;
}
function buildBlur1(){
const blur1 = buildCircle();
blur1.setTransform(0,0.1,0.75,0.75,0,0,0,0,30.7);
blur1.filters = [new createjs.BlurFilter(15, 15, 3)];
blur1.cache(-52,-52,104,104);
blur1.name = 'blur1';
return blur1;
}
function buildBlur2(){
const blur2 = buildCircle();
blur2.setTransform(0,-0.2,1.5,1.5,0,0,0,0,16.2);
blur2.filters = [new createjs.BlurFilter(60, 60, 2)];
blur2.cache(-52,-52,104,104);
blur2.name = 'blur2';
return blur2;
}
function buildGlow(){
const {glowColor, glowAlpha} = data.settings;
glow = buildCircle(data.settings.glowColor);
glow.filters = [new createjs.BlurFilter(15, 15, 3)];
glow.cache(-52,-52,104,104);
glow.alpha = glowAlpha;
glow.name = 'glow';
glow.x = -50;
glow.y = -50;
}
function initAnimations(){
TweenLite.ticker.addEventListener('tick', handleTick, stage); //update each time tweenlite updates
initBackgroundAnimation();
initClusterColorAnimation();
initClusterAnimation();
}
function initInteractivity(interactiveMode){
document.addEventListener('mousemove',handleMouseMove, false);
const {settings} = data;
if (settings.interactiveMode === 'glow'){
initGlow();
}
}
function handleTick(){
const {settings} = data;
if (settings.interactiveMode === 'rotate' && settings.allowInteractivity){
updateRotation();
} else if (settings.ambientRotation){
updateAmbientRotation();
}
updateClusterLines();
stage.update();
}
function handleMouseMove(event){
const x = event.clientX;
const y = event.clientY;
handleInteractivity(x,y);
}
function handleInteractivity(x,y){
const {settings} = data;
switch (settings.interactiveMode){
case 'rotate':
handleRotate(x,y);
break;
case 'zoom':
handleZoom(x,y);
break;
case 'glow':
handleGlow(x,y);
break;
case 'shift':
handleShift(x,y);
break;
}
}
function initGlow(){
//stage.addChildAt(glow,1);
stage.addChild(glow);
}
function mapRange(value, low1, high1, low2, high2) {
return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}
function handleRotate(x,y){
const w = canvas.width;
const midX = w / 2;
const posX = x - midX;
const {rotationLimiter} = data.settings;
if (posX > 0){
rotateVal = -1/rotationLimiter;
} else {
rotateVal = 1/rotationLimiter;
}
}
function updateRotation(){
clusterContainer.rotation = clusterContainer.rotation += rotateVal;
}
function updateAmbientRotation(){
const {rotationLimiter} = data.settings;
clusterContainer.rotation = clusterContainer.rotation += 1/rotationLimiter;
}
function handleZoom(x,y){
const {zoomMin,zoomMax, unequalZooming} = data.settings
const w = canvas.width;
const midX = w / 2;
const posX = x - midX;
const absPosX = Math.abs(posX);
const zoomValX = mapRange(absPosX,0,midX, zoomMax,zoomMin);
let zoomValY;
if (unequalZooming){
const h = canvas.height;
const midY = h / 2;
const posY = y - midY;
const absPosY = Math.abs(posY);
zoomValY = mapRange(absPosY,0,midY, zoomMax,zoomMin);
} else {
zoomValY = zoomValX
}
TweenLite.to(clusterContainer, 0.3, {
scaleX: zoomValX,
scaleY: zoomValY,
});
}
function handleGlow(x,y){
TweenLite.to(glow, 0.3, {
x: x,
y: y,
});
}
function handleShift(x,y){
const {shiftFactor,shiftDirection} = data.settings;
const w = canvas.width;
const h = canvas.height;
const midX = w / 2;
const midY = h / 2;
const posX = x - midX;
const posY = y - midY;
const valX = (posX / midX) * shiftFactor * shiftDirection;
const valY = (posY / midY) * shiftFactor * shiftDirection;
TweenLite.to(clusterContainer, 0.5, {
regX: valX,
regY: valY,
});
// clusterContainer.regX = valX;
// clusterContainer.regY = valY;
}
function buildClusterLines(){
const { clusterConnections, settings} = data;
clusterConnections.forEach((connection,i)=> {
const line = new createjs.Shape();
const originCluster = clustersArray[connection.from - 1];
const destinationCluster = clustersArray[connection.to - 1];
line.graphics.s(settings.startColor).moveTo(originCluster.x,originCluster.y).lineTo(destinationCluster.x,destinationCluster.y);
clusterContainer.addChildAt(line,0);
const lineObj = {
originCluster: originCluster,
destinationCluster: destinationCluster,
line: line
}
linesArray.push(lineObj);
});
}
function updateClusterLines(){
const {clusterConnections, settings} = data;
linesArray.forEach((lineObj,i)=>{
const {line,originCluster,destinationCluster} = lineObj;
line.graphics.clear().s(settings.startColor).moveTo(originCluster.x,originCluster.y).lineTo(destinationCluster.x,destinationCluster.y);
});
}
function initBackgroundAnimation(){
const { palette, settings} = data;
bg.cache(0, 0, canvas.width, canvas.height); //left, top, width, height
tl2 = new TimelineMax({
repeat:-1,
yoyo: true,
});
palette.bg.forEach((paletteColor,i)=> {
tl2.add(TweenLite.to(bg, settings.colorAnimTime, {
easel:{tint:paletteColor},
}));
});
}
function initClusterColorAnimation(){
const { settings, palette, clusters } = data;
const { colorAnimTime } = settings;
clusterColorTimeline = new TimelineMax({
repeat:-1,
yoyo: true,
});
palette.fg.forEach((paletteColor,i)=> {
clusterTinter.cache(0,0,canvas.width,canvas.height);
clusterColorTimeline.to(clusterTinter, colorAnimTime , {easel:{tint:paletteColor}}, `cluster${i}`)
});
}
function initClusterAnimation(){
const { clusters, settings } = data;
tl = new TimelineMax({
repeat:-1,
//yoyo: settings.randomPositioning ? false : true, //MH TODO: animation not repeating
});
clusters.forEach((clusterData,i)=>{
const clusterObject = clustersArray[i];
const isLast = i === numClusters-1;
if (clusterData.blur !== false){
const direction = clusterData.direction || 1
rotateBlur(clusterObject,'tween1',direction);
}
scaleAndMove(clusterObject,clusterData,isLast,i);
})
}
function rotateBlur(item,animGroup,direction = 1, scale = 1){
const {settings} = data;
tl.to(item, settings.rotationAnimTime, {
rotation:360 * direction,
repeat: -1,
},animGroup);
tl.to(item, settings.rotationAnimTime, {
rotation:360 * direction,
repeat: -1,
},animGroup);
}
function scaleAndMove(item,clusterData,isLast,itemIndex){
const {settings, motionSequence} = data;
const animGroup = `tween${step}`;
let newScale;
if (settings.randomScaling){
if (settings.relativeScaling){
const scaleChange = generateRandom(0,settings.maxScaleChange,true);
newScale = (clusterData.scale + scaleChange).toFixed(2);
} else {
if (settings.thresholdScaling){
let curScale = item.scaleX;
if (curScale > settings.scaleThresholdMax){
newScale = generateRandom(settings.minScale,settings.scaleThresholdMin);
} else {
newScale = generateRandom(settings.scaleThresholdMax,settings.maxScale);
}
} else {
newScale = generateRandom(settings.minScale,settings.maxScale);
}
}
} else {
newScale = motionSequence[sequence-1][itemIndex].scale;
if (settings.animateBlur){
const blur1 = item.getChildByName('blur1');
const blur2 = item.getChildByName('blur2');
let newAlpha;
if (settings.mapAlpha){
newAlpha = mapRange(newScale,.4,2.6, 0,1)
} else {
if (newScale > settings.animBlurThreshold){
newAlpha = 1;
} else {
newAlpha = 0;
}
}
tl.to(blur1, settings.colorAnimTime, {
alpha: newAlpha,
},animGroup);
tl.to(blur2, settings.colorAnimTime, {
alpha: newAlpha,
},animGroup);
}
}
let newPositionX, newPositionY, onCompleteFunction;
if (settings.randomPositioning){
const positionChangeX = generateRandom(0,settings.maxPositionChange,true,true);
const positionChangeY = generateRandom(0,settings.maxPositionChange,true,true);
newPositionX = clusterData.x + positionChangeX;
newPositionY = clusterData.y + positionChangeY;
onCompleteFunction = isLast ? repeatScaleAndMove : null;
} else {
newPositionX = motionSequence[sequence-1][itemIndex].x;
newPositionY= motionSequence[sequence-1][itemIndex].y;
onCompleteFunction = isLast ? repeatScaleAndMove : null;
}
tl.to(item, settings.colorAnimTime, {
scaleX:newScale,
scaleY:newScale,
x: newPositionX,
y: newPositionY,
ease: Sine.easeInOut,
onComplete: onCompleteFunction
},animGroup);
}
function repeatScaleAndMove(){
const { clusters, settings } = data;
step+=1;
if (sequence === numSequences){
sequence = 1;
} else {
sequence+=1;
}
clusters.forEach((clusterData,i)=>{
const clusterObject = clustersArray[i];
const isLast = i === numClusters-1;
scaleAndMove(clusterObject,clusterData,isLast,i);
})
}
function generateRandom(min = 0,max = 1,withDirection = false,isInt = false){
const direction = withDirection ? Math.round(Math.random()) * 2 - 1 : 1;
const numberFloat = (Math.random() * (max - min) + min)*direction;
if (isInt){
return Math.round(numberFloat);
} else {
return numberFloat;
}
}
init(); //
!
