A Pen by Jordan.

BPM-Synced-Emotion-Generator.markdown

BPM Synced Emotion Generator

Click the screen to flash it white and change one element of the face. Click along to a beat to get the flash & face change happening in time with music. Every other snare, beat, hi-hat... YOU control how seizure inducing it will be. Best on a beamer in a dark room full of sweaty friends.

Face arrays and generator functionality from http://www.newmoticons.com/

BPM functionality from http://www.all8.com/tools/bpm.htm

A Pen by Jordan on CodePen.

License.

index.html

<div id="randFace"></div>

script.js

var oldFaces = new Array();

var eyes = [
['-'],
['❛ั'],
['o'],
['♥'],
['^'],
['~'],
['╹'],
['ↂ'],
['ꏿ'],
['･｀','´･'],
['◑','◐'],
['▶','◀'],
['☆','◎'],
['Ơ̴̴̴̴̴̴͡'],
['⦿͡'],
['⛢'],
['⚆'],
['⚈'],
['☮'],
['◕'],
['•ิ'],
['☯'],
['◠'],
['◡'],
[' ͡°'],
['Ѽ'],
['◒'],
['◓'],
['◑'],
['◐'],
['◍'],
['◍'],
['♂'],
['◉'],
['⏑'],
['ñ'],
['⌀'],
['⊖'],
['⊗'],
['⊘'],
['◞ิ','◟ิ*'],
['⊙'],
['✖'],
['⊚'],
['⊛'],
['∅'],
['•'],
['ᄒ'],
['შ'],
['მ'],
['ნ'],
['გ'],
['၀'],
['࿃'],
[' ࿉ '],
['ර'],
['ඦ'],
['൭'],
['ਠ'],
['ঢ'],
['='],
['¤'],
['ᴖ̶̴̷͈̿'],
['ヘ'],
['구'],
['©'],
['π'],
['☀'],
['◠'],
['⚈'],
['Ơ̴̴̴̴̴̴͡'],
['✔'],
['⇀','↼'],
['↼','⇀'],
['⨀ེ'],
['⌅'],
['㈠'],
['☼'],
['♁'],
['♡'],
['⚙'],
['⚥'],
['⚲'],
['࿉'],
['▣'],
['◜●','●◝'],
['◜◦','◦◝'],
['⎔'],
[' ゜ '],
['￣'],
['ˆ'],
['♡'],
['¬'],
['〰'],
['☢'],
['❍'],
['⨀ེ'],
[' ◦ ⃝- '],
[' ◦ ⃝  '],
['◜','◝'],
['❑'],
['･ิ'],
['龴'],
['(✹ཽ)'],
['ↂ'],
['⚈'],
['⊂•⊃'],
['❑','❒'],
['σ'],
['♨'],
['☯'],
['◎⃝'],
['•͡˘'],
['꒡'],
['✖'],
['⎚'],
['☉'],
['♁'],
[' ´ ',' ｀ '],
['✕'],
['◒','◓'],
['✘'],
['☁'],
['☠'],
['☻'],
['☫'],
['❂'],
['☮'],
['◯'],
['ꐐ'],
['ಠ'],
['༆'],
['〄'],
['ⓧ'],
['⌒'],,
['(❛)','(❛)'],
['༎ຶ'],
['⺤'],
['(✹ཽ)'],
['७'],
['♕'],
['ຈ'],
['-ิิ','•ิ'],
['“⌒','⌒”'],
['⛢']];

var mouths = [
['▿'],
['_'],
['-'],
['ﾛ'],
['㍕'],
['ᆺ'],
['ど'],
['ᘦ̲'],
['ᘦ'],
['人'],
['෴'],
['д'],
['益'],
['▂'],
['ᴗ'],
['`皿′'],
['∀'],
['ठ̯'],
[' ω '],
['▿'],
['‿'],
['౪'],
[' ͜ʖ'],
['¬'],
['っ'],
['⊆'],
['‿‿'],
[' □ '],
[' ◡ '],
['㇁'],
['_㇁'],
['﹏'],
['ϖ'],
['⑃'],
['ᴥ'],
['∠'],
['⍛'],
[',_ゝ'],
['_ʖ'],
['ゝ'],
['◞ʖ◟'],
['◞ʖ◟'],
['﹏ु'],
['ϖ'],
['⌓'],
['_ᴥ_'],
['ᴥ'],
['⼼_'],
['⼼‿'],
[' ▱ '],
['ڡ'],
[' ˒̫̮ '],
['◞౪◟']];

var faces = [
['꒰ෆु',' ु꒱'],
['♫.(',').♫'],
['◥█(',')█◣ '],
['┌∩┐|','|┌∩┐'],
['∞⎦','⎣∞'],
['१|','|५'],
['☠|','|☠'],
['◢◣','◢◣'],
['º╲','╱º'],
['╭','╮'],
['⪿ ',' ⫀'],
[' ⎩ ',' ⎭'],
['₢','ꀣ'],
['꒰','꒱'],
['ヽ(',')ﾉ'],
['',''],
['ლ,ᔑ','ᔐ.ლ'],
['☁•','•☁ '],
['┗[',']┛'],
['¯_(',')_/¯'],
['(_/¯',')_/¯'],
['-','-'],
['ᕦ','ᕤ'],
['⸉ᘓ','ᘐ⸊'],
['^','^'],
['(っ',')っ'],
['(๑','๑)'],
['✌(',')✌ '],
['☂/','/☂'],
['♱','♱'],
['ლ!','!ლ'],
['✌⎦','⎣✌'],
['☞.','.☞'],
['↙(',')↗'],
['▰.','.▰'],
['⚣ˁ','ˀ⚣'],
['⎰≀.','≀⎰'],
['⊂ ',' ⊃'],
['▞▞▞|','|▞▞▞'],
['⊆','⊇'],
['⊂','⊃'],
['㐈','㐈'],
['ミ','ミ'],
['づ丆','丆づ'],
['☁ 。',' 。☁'],
['ლ✰','✰ლ'],
['⊂(',')つ'],
['(.づ',')づ.'],
['[⑇','•⑇]'],
['(.〜','〜.)'],
['へ(',')へ'],
['(',')*✲ﾟ*'],
['ɾ','ɹ'],
['(✿',')'],
['ლ(́','‵ლ)'],
['ヾ(',')ノ'] ,
['(((＼（','）／)))'],
['(',';)'],
['∊','∍'],
['◤','◥'],
['◖','◗'],
['ゞ(',')ゞ'],
['ヽ༼','༽ﾉ'],
['(╯',')╯'],
['(',')b'],
['༼','༽'],
['о(',')ｙ'],
['°˖✧◝(',')◜✧˖°'],
];

var eye = mouth = face = emo = null;

function rand(n) {
  return ~~(Math.random()*n)
}
  
function choice(a) {
  return a[rand(a.length)] 
}


function generate(){
  eye = choice(eyes);
  mouth = choice(mouths);
  face = choice(faces);
  build();
}

function shuffle(){
  switch(rand(3))
  {
    case 0:
      eye = choice(eyes);
      break;
    case 1:
      mouth = choice(mouths);
      break;
    case 2:
      face = choice(faces);
      break;
  }
  build();
}

function build(){
  if (eye.length == 1) eye[1] = eye[0];
  emo = face[0] + eye[0] + mouth[0] + eye[1] + face[1];
  console.log(emo);
  $("#randFace").html( emo );
}

$("html").click(function() {
  refreshDisplay();
  //calculate BPM
  TapForBPM();
  
});

function refreshDisplay(){
  //make everything white
  TweenMax.to(
    'body',
    0, 
    {
      'backgroundColor':'#FFFFFF'
    }
  );
  
  //randomize one element of the face
  shuffle();
  $(window).resize();
  
  //fade to black background with white face
  TweenMax.to(
    'body',
    averageMS/1000, 
    {
      'backgroundColor':'#000000', 
      ease:"Power4.easeOut"
    }
  );    
}

/*
 * center & size
*/
$(window).resize(function(){
  $('#randFace').css({
    position:'absolute',
    left: ($(window).width() -   $('#randFace').outerWidth())/2,    
    top: ($(window).height() -      $('#randFace').outerHeight())/2
  });
});

/*
 * BPM from
 * http://www.all8.com/tools/bpm.htm 
*/
var timeoutWaitSeconds = 4;
var count = 0;
var msecsFirst = 0;
var msecsPrevious = 0;
var averageBPM = null;
var averageMS = 461.53;

function ResetCount()
{
  count = 0;
  averageBPM = null;
}

function TapForBPM(e)
{
  window.clearInterval(refreshInterval);
  timeSeconds = new Date;
  msecs = timeSeconds.getTime();
  if ((msecs - msecsPrevious) > 1000 * timeoutWaitSeconds)
  {
    count = 0;
  }

  if (count == 0)
  {
    averageBPM = null;
    msecsFirst = msecs;
    count = 1;
  }
  else
  {
    bpmAvg = 60000 * count / (msecs - msecsFirst);
    averageMS = 60000 / bpmAvg;
    averageBPM = Math.round(bpmAvg * 100) / 100;
    count++;
    refreshInterval = setInterval("refreshDisplay()",averageMS);
  }
  msecsPrevious = msecs;
  return true;
}

/*
 * animate on every beat
*/
var refreshInterval;

/*
 * STARTUP
*/
//generate one new face
generate();
refreshDisplay();
$(window).resize();

style.css

#randFace{
  font-size: 6em;
  color: white;
}
body{
  background-color: black;
}