top of page

< Back

(Pinardo, 2023)

An further exploration of the same mechanics that built 'A Field of Daisies', 'Faces' also incorporates Adobe Animate's use of internal timelines to choose a certain aspect of the face drawn in creating a person. 5 options for the individual's hairstyle, face, eyebrow, eye, nose and mouth shapes are available. A secondary scaling of said features are also incorporated to further stylize the individual. The test being: can we attach Event Listeners onto a face that has been created through code?

Above, you will find an image of me floating around. Find and click me to find out. This is what I look like:









Below are certain notes with relation to the software's timeline feature. To incorporate which frame to use in building the face, I had created a global 'choose frame' function:

    function randomFrame() {
   
        var randomFrameNum = Math.round(Math.random()*5)-1
        return randomFrameNum
   
     }

It is important to note that frame 1 starts at "0", and thus the frame choices are 0-4 instead of 1-5.

Reference code:

 



this.stop()

var fmText = this.findMeText
var introText = this.introText

var faceBin = this.faceBin
var faceArray = new Array();

var numColumns = 20
var numRows = 11

var patriceEnterX = Math.round(Math.random()*numColumns)
var patriceEnterY = Math.round(Math.random()*numRows)

var clicked = false;
var endGame = false;
   
for (var x = 0; x < numColumns; x++) {
   
   for (var y = 0; y < numRows; y++) {
       
       var xDifference = x * 100
       var yDifference = y * 100
       
       var face
       
       if (x == patriceEnterX && y == patriceEnterY) {
           face = new lib.Patrice();
           face.addEventListener("click", onClick)
           face.alpha = 1
           face.isPatrice = true
       } else {
           face = new lib.EntireFace();
           face.alpha = .4
           face.isPatrice = false
       }
       
       face.x = xDifference
       face.y = yDifference
       face.scale = .18
   
       faceBin.addChild(face)
       faceArray.push(face);
       
   }
}

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

function onMainTick() {
   
   if (!clicked) {    
       for (var i = 0; i < faceArray.length; i++) {
           var thisFace = faceArray[i]
           thisFace.x -= .5
           
           if (thisFace.x < -100) {
               thisFace.x = numColumns*100-100        
               thisFace.gotoAndStop(0)
           }
       }
   } else {
       
       for (var i = 0; i < faceArray.length; i++) {
           
           var thisFace = faceArray[i]
           
           if (thisFace.isPatrice == false) {
               if(thisFace.alpha > .1) {
                   thisFace.alpha -= .005
               }

           } 
       }
   }

}

function onClick() {
   
   clicked = true
   
}
 

© Patrice Pinardo

bottom of page