NGOMA

index.html

<!-- msg template -->
<script type="text/template" id="msg_template">
  <li class="content">
    <p class="img" style='background-image: url("<%= img %>")'> </p>
    <p class="msg"><%= msg %></p>
  </li>
</script>
  
<!-- main html -->
<a href="https://github.com/uriuriuriu/beat.js" target="_blank"><h1 id="title">NuChwezi Chan</h1></a>
<ul id="box"></ul>

ngoma.markdown

NGOMA

Thanks to the original artist, I've taken this, and now transmuted it into "NGOMA" - a plug-and-play chat HCI platform, built to add a communication layer to any persona designed via the NuChwezi Studio - https://studio.nuchwezi.com

Original Pen..

sample ver.1

ver.2 http://codepen.io/uriuriuriu/pen/rbxhf

A Pen by AK1N Nemesis Fixx (Fra. Mugasha~Mukasa) The First Nu Chwezi on CodePen.

License.

script.js

/*!
 * beat.js - This script drives the events in bpm base.
 * from uriuriuriu https://github.com/uriuriuriu/beat.js
 *
 * var beatJs = new beatJs({
 *   bpm: 120,
 *   rhythm:[4,4,4,2,2], // set to 16 in total.
 *   repeat: true
 * });
 * beatJs.push(pre_callback1);
 * beatJs.push(pre_callback2);
 * beatJs.run();
 * beatJs.stop();
 *
 */
(function(window){
  'use strict';
  function beatJs(options){
    var options = $.extend({
      bpm: 120,
      rhythm:[4,4,4,2,2],
      repeat: true
    }, options);
    this.options = options;
    this.isRun = false;
    this.rhythmCnt = 0;
    this.oneBeatMsec = 0;
    this.cnt = 0;
    this.animationID = "";
    this.startTime = 0;
    this.queue = [];
    this.rhythmMaxCnt = this.options.rhythm.length - 1;
  }
  beatJs.prototype.push = function(pre_callback){
    this.queue.push(pre_callback);
  };
  beatJs.prototype.run = function(){
    this.isRun = true;
    this.cnt = this.rhythmCnt = 0;
    this.startTime = new Date().getTime();
    this.oneBeatMsec = 15000 / this.options.bpm;
    var self = this;
    var queueCount = self.queue.length;
    function main(){
      self.queue[self.cnt%queueCount]();
      self.cnt++;
    }
    function checkUpdate(){
      var rhythm = self.options.rhythm[self.rhythmCnt];
      var now = new Date().getTime();
      var bool = false;
      if (self.oneBeatMsec * rhythm <= (now - self.startTime)) {
        self.startTime = now;
        self.rhythmCnt = (self.rhythmCnt + 1) % self.options.rhythm.length;
        bool = true;
      }
      return bool;
    };
    function loop(){
      if(!self.options.repeat && (self.rhythmMaxCnt < self.cnt)){
        self.stop();
        self.cnt = self.rhythmCnt = 0;
      }else{
        self.animationID = requestAnimationFrame( loop );
        if(checkUpdate()){
          main();
        };
      };
    };
    main();
    loop();
  };
    
  beatJs.prototype.stop = function(){
    this.isRun = false;
    cancelAnimationFrame(this.animationID);
  };
  
  window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame ||
           window.webkitRequestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.msRequestAnimationFrame ||
           window.oRequestAnimationFrame ||
           function(f) { return window.setTimeout(f, 1000 / 60); };
  }());
  window.cancelAnimationFrame = (function() {
  return window.cancelAnimationFrame ||
         window.cancelRequestAnimationFrame ||
         window.webkitCancelAnimationFrame ||
         window.webkitCancelRequestAnimationFrame ||
         window.mozCancelAnimationFrame ||
         window.mozCancelRequestAnimationFrame ||
         window.msCancelAnimationFrame ||
         window.msCancelRequestAnimationFrame ||
         window.oCancelAnimationFrame ||
         window.oCancelRequestAnimationFrame ||
         function(id) { window.clearTimeout(id); };
  }());
  
  window.beatJs = beatJs;
  
})(window);



// msg html template
var _msgTemplate = $("#msg_template").text();
var _createMsg = _.template(_msgTemplate);
function getMsgHtml(img, msg) {
  return _createMsg({"img": img, "msg":msg});
}

// main
var k = 0;
var beat = new beatJs({bpm:120,repeat:true});
var imgURL = "http://lorempixel.com/80/80/people/";
beat.push(function(){
  $("#box").prepend(getMsgHtml(imgURL,"one  "+k++));
});

/*
beat.push(function(){
  $("#box").prepend(getMsgHtml(imgURL,"two  "+k++));
});
beat.push(function(){
  $("#box").prepend(getMsgHtml(imgURL,"three  "+k++));
});
beat.push(function(){
  $("#box").prepend(getMsgHtml(imgURL,"knock! "+k++));
});
beat.push(function(){
  $("#box").prepend(getMsgHtml(imgURL,"knock! "+k++));
});

*/

beat.run();
$("#title").click(function(){
  if(beat.isRun){
    beat.stop();
  }else{
    beat.run();
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js"></script>

style.scss

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Josefin+Slab);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script:700);
@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 50 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}
@mixin longshadow($color) {
  text-shadow: makelongshadow($color);
}
$color: #ddd;
$bgColor: #111;

*{
color:$color;
}
body {
  background-color : #333;
  font-size:12px;
  margin:20px;
}
h1{
  text-align:center;
  font-size:50px;
  font-family: 'Dancing Script', cursive;
  font-weight:bold;
  line-height:50px;
  margin-bottom:20px;
  @include longshadow(darken($color, 80% ));
}
a{
  text-decoration: none;
}
h1:hover{
  cursor :pointer;
  color: #dddd22;
  z-index:100;
}
#box{
  margin:0 auto;
  width:600px;
}
@-webkit-keyframes showAnimation {
    0% {-webkit-transform:scale(0.1, 0.0); opacity: 0;}
   80% {-webkit-transform:scale(1.1, 0.1); opacity: 0.4;}
   94% {-webkit-transform:scale(1.04, 1.04); opacity: 0.8;}
  100% {-webkit-transform:scale(1,   1);   opacity: 1;}
}
.content{
  width:600px;
  margin-bottom:10px;
  display:box; display:-moz-box; display:-webkit-box;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation: showAnimation 0.25s ease-out;
}
.img{
  width:80px;
  height:80px;
  background-color:$bgColor;
  border:4px solid $bgColor;
  @include border-radius(10px, 10px);
}
.msg{
  width:500px;
  margin-left:10px;
  background-color:#ccc;
  color:#333;
  padding:10px;
  @include border-radius(10px, 10px);
  font-family: 'Josefin Slab', serif;
  font-size:28px;
  position: relative;
  border: 4px solid $bgColor;
}
.msg:after, .arrow_box:before {
	right: 100%;
	top: 50px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.msg:after {
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #ccc;
	border-width: 10px;
	margin-top: -30px;
}
.msg:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: $bgColor;
	border-width: 36px;
	margin-top: -36px;
}