top of page

< Back

(Patrice Pinardo and Bandi Enkh-Amgalan, 2023)

    "A Field of Daisies" is an original project that delves into the dynamic capabilities of Adobe Animate's timeline feature. Leveraging the cyclic nature of the timeline and introducing a level of randomness to the selection of petals, this project ensures that each blooming flower becomes a one-of-a-kind creation. This artistic endeavor is a subtle nod to the quote, "In a field of daisies, be a wildflower," inviting viewers to appreciate the irony that, despite their similarities, every daisy drawn is inherently and beautifully unique.

    The challenge in creating this interactive feature is to log past mouse activity in deciding the following movement of any hit flowers. To save and use such information, we can add/ extend a property we created to an object -> by first saying "stage.mouseVelocity = { x: 0, y: 0 };", we are dynamically creating a new property to the object (i.e., stage) to save and use later on*.

    Another notable find is the "mouseChildren" property that JavaScript carries.
Shortly, it is used to control whether the children of a display object respond to mouse events.

    If mouseChildren is set to true, the children of the object will respond to mouse events individually. If false*, the children will not respond to mouse events, and the events will be dispatched only to the parent object. Here, since the whole collection of flowers is created by creating individual flowers that each had to create their individual collection of petals, this layered process required the removal of these children/ this capability so as to not confuse the program of which object to move due to mouse movement.


Reference Code:


this.stop()
var rootRef = this;

var flowerBinArray = new Array();

var numColumns = 20
var numRows = 11

var numFlowers = 50
var isMousePressed = false
var selectedFlower = null
var gameActive = true


function spawnFlower(flowerX) {
   
   var bin = new lib.FlowerBin();

   var numPetals = Math.round(Math.random()*3 + 3)
   var rotationJitter = Math.random()*360
   
   for (var x = 0; x<numPetals; x++) {
       var petals = new lib.Petals();
       var petalRotation = 360/numPetals

       petals.rotation = (x) * petalRotation + rotationJitter
       
       petals.x = 0
       petals.y = 0

       petals.scale = .15
       
       bin.addChild(petals);
       
   }
   
   bin.x = Math.random()*1400 + 50
   bin.y = Math.random()*450 + 50
   return bin;
}


stage.enableMouseOver(20);

for (var flowerIndex = 0; flowerIndex<numFlowers; ++flowerIndex) {
   var flower = spawnFlower()
   flower.velocity = { x: 0, y: 0 };
   rootRef.addChild(flower);
   flower.mouseChildren = false;
   flower.addEventListener("mouseover", onFlowerMouseOver);
   flowerBinArray.push(flower);
}

createjs.Ticker.addEventListener("tick", onMainTick)

var mouseHistory = []
var mouseVelocityLookback = 5
var mouseHistoryIndex = 0
var flowerVelocityScale = 0.06;
stage.mouseVelocity = { x: 0, y: 0 };
var velocityDecay = 0.95;

function onMainTick() {
   
    for (var flowerIndex = 0; flowerIndex<numFlowers; ++flowerIndex) {
       var flower = flowerBinArray[flowerIndex];
       flower.x += flower.velocity.x;
       flower.y += flower.velocity.y;
       flower.velocity.x *= velocityDecay;
       flower.velocity.y *= velocityDecay;
       
       var stageCanvasWidth = 1500
       var stageCanvasHeight = 550
       
       if (flower.x > stageCanvasWidth - 50) {
           flower.x = stageCanvasWidth - 50
           flower.velocity.x *= -1;
       }
       if (flower.x < 50) {
           flower.x = 50
           flower.velocity.x *= -1;
       }
       if (flower.y > stageCanvasHeight - 50) {
           flower.y = stageCanvasHeight - 50
           flower.velocity.y *= -1;
       }
       if (flower.y < 50) {
           flower.y = 50
           flower.velocity.y *= -1;
       }

   }

   var mousePosition = { x: stage.mouseX, y: stage.mouseY };
   if (mouseHistory.length < mouseVelocityLookback) {
       mouseHistory.push(mousePosition);
   } else {
       var oldestIndex = (mouseHistoryIndex + mouseVelocityLookback - 1) % mouseVelocityLookback;
       stage.mouseVelocity.x = stage.mouseX - mouseHistory[mouseHistoryIndex].x;
       stage.mouseVelocity.y = stage.mouseY - mouseHistory[mouseHistoryIndex].y;
       mouseHistory[mouseHistoryIndex] = mousePosition;
   }
   mouseHistoryIndex = (mouseHistoryIndex + 1) % mouseVelocityLookback;
}

function onFlowerMouseOver(evt) {

// console.log(`mouse over on flowerX=${evt.target.x} flowerY=${evt.target.y} mouseX=${stage.mouseX} mouseY=${stage.mouseY}`);

   var flower = evt.target;
   flower.velocity = {
       x: stage.mouseVelocity.x * flowerVelocityScale,
       y: stage.mouseVelocity.y * flowerVelocityScale
   };
}
 

© Patrice Pinardo

bottom of page