// This is the three main front end files, not including the backend node.js / socket.io code.
// File: Main.js - Communicates with the backend
var socket;
var instrument = "violin";
var wHeight;
var wWidth;
var earthSize = 600;
var earthimg, bggrad;
var audioType = ".mp3";
var play_multi_sound;
var audioM;
var sounds = [
"bass",
"clarinet",
"flute",
"percussion",
"trumpet",
"violin"
];
$(document).ready(function () {
wHeight = $(window).height();
wWidth = $(window).width();
visual();
var a = new Audio();
if(a.canPlayType){
if(!a.canPlayType('audio/mpeg;') && a.canPlayType('audio/ogg; codecs="vorbis"')){
audioType = ".oga";
}
$.each(sounds, function(index, value) {
for(i=1;i<=6;i++){
var na = new Audio();
na.id = value+"_"+i;
na.src = "http://audio.cloudorchestra.com/"+value+"/"+value+"_"+i+audioType;
na.preload="auto";
$("#audio").append(na);
na.load();
}
});
}
$(".press").click(function(){
$("#pickhint").fadeOut('slow');
});
$("#picker").change(function(){
instrument = $("#picker option:selected").val();
myCloud.setSound(instrument);
$("#pickhint").fadeOut('slow');
})
$("#credit-a").click(function(){
$("#credits").fadeIn('slow');
$("#about").fadeOut();
});
$("#about-a").click(function(){
$("#about").fadeIn('slow');
$("#credits").fadeOut();
});
$("#close-about").click(function(){
$("#about").fadeOut('slow');
});
$("#close-credit").click(function(){
$("#credits").fadeOut('slow');
});
canvas = Raphael("clouds", wWidth, wHeight);
bggrad = canvas.rect(0, 0, wWidth, wHeight).attr({fill:"86-#6da0b0:55-#a3b9c7", stroke:"none"});
earthimg = canvas.image("images/earth.png", wWidth/2-earthSize/2, wHeight/2-earthSize/2, earthSize, earthSize);
clouds = [];
myCloud = new cloud(canvas, 0, instrument);
myCloud.spawn(true);
clouds.push(myCloud);
function message(obj){
if ('disconnected' in obj){
if(clouds[obj.disconnected[0]]){
clouds[obj.disconnected[0]].remove();
}
}
if ('connected' in obj){
var newCloud = new cloud(canvas, obj.connected[0]);
newCloud.spawn();
clouds[obj.connected[0]] = newCloud;
}
if ('message' in obj){
//console.log(obj.message[1]);
$('#messages').html('' + (obj.message[0]) + ': ' + (obj.message[1]) + $('#messages').html());
if(clouds[obj.message[0]]){
clouds[obj.message[0]].soundoff(obj.message[1]);
}
}
}
function spawnClouds(id){
var newCloud = new cloud(canvas, id, instrument);
newCloud.spawn();
clouds[id] = newCloud;
}
socket = new io.Socket(null, {rememberTransport: false});
socket.on('connect', function () {
});
socket.on('message', function (obj) {
if ('buffer' in obj){
for (var i in obj.buffer) message(obj.buffer[i]);
} else message(obj);
if ('clientsBuffer' in obj){
for (var i in obj.clientsBuffer) {
spawnClouds(obj.clientsBuffer[i]);
}
}
});
socket.on('disconnect', function () {
});
socket.connect();
$(document).keydown(function (event) {
$("#pickhint").fadeOut('slow');
if(event.keyCode === 49) {
var play = instrument+"_1";
myCloud.soundoff(play);
socket.send(play);
$("#key-one").addClass("active");
var onepress = window.setTimeout(function() {
$("#key-one").removeClass("active");
}, 200);
}
if(event.keyCode === 50) {
var play = instrument+"_2";
myCloud.soundoff(play);
socket.send(play);
$("#key-two").addClass("active");
window.setTimeout(function() {
$("#key-two").removeClass("active");
}, 200);
}
if(event.keyCode === 51) {
var play = instrument+"_3";
myCloud.soundoff(play);
socket.send(play);
$("#key-three").addClass("active");
window.setTimeout(function() {
$("#key-three").removeClass("active");
}, 200);
}
if(event.keyCode === 56) {
var play = instrument+"_4";
myCloud.soundoff(play);
socket.send(play);
$("#key-four").addClass("active");
window.setTimeout(function() {
$("#key-four").removeClass("active");
}, 200);
}
if(event.keyCode === 57) {
var play = instrument+"_5";
myCloud.soundoff(play);
socket.send(play);
$("#key-five").addClass("active");
window.setTimeout(function() {
$("#key-five").removeClass("active");
}, 200);
}
if(event.keyCode === 48) {
var play = instrument+"_6";
myCloud.soundoff(play);
socket.send(play);
$("#key-six").addClass("active");
window.setTimeout(function() {
$("#key-six").removeClass("active");
}, 200);
}
});
//audio
var input;
if (window.Touch) {
input = "touchstart";
$("#enableSound").fadeIn();
$("#button").click(function(){
$("#enableSound").fadeOut();
});
}else{
input = "mouseup";
$("#hello").fadeIn();
$("#letsgo").click(function(){
$("#hello").fadeOut();
});
}
$("#key-one").bind(input,function(e){
e.preventDefault();
var play = instrument+"_1";
myCloud.soundoff(play);
socket.send(play);
return false;
});
$("#key-two").bind(input,function(e){
e.preventDefault();
var play = instrument+"_2";
myCloud.soundoff(play);
socket.send(play);
return false;
});
$("#key-three").bind(input,function(e){
e.preventDefault();
var play = instrument+"_3";
myCloud.soundoff(play);
socket.send(play);
return false;
});
$("#key-four").bind(input,function(e){
e.preventDefault();
var play = instrument+"_4";
myCloud.soundoff(play);
socket.send(play);
return false;
});
$("#key-five").bind(input,function(e){
e.preventDefault();
var play = instrument+"_5";
myCloud.soundoff(play);
socket.send(play);
return false;
});
$("#key-six").bind(input,function(e){
e.preventDefault();
var play = instrument+"_6";
myCloud.soundoff(play);
socket.send(play);
return false;
});
var channel_max = 10; // number of channels
audiochannels = new Array();
for (a=0;a 601){
earthSize = 450;
}
if(wHeight < 601){
earthSize = 360;
}
if(wHeight > 750){
earthSize = 600;
}
if(typeof canvas != 'undefined'){
canvas.setSize(wWidth, wHeight);
bggrad.attr({width: wWidth, height: wHeight});
earthimg.attr({ x: wWidth/2-earthSize/2, y: wHeight/2-earthSize/2, width: earthSize, height: earthSize });
}
}
$(window).resize(function() {
visual();
});
// File: cloud.js - Draws the Clouds
function cloud(R, id, type) {
var paper = R,
chart = R.set(),
rad = 40;
var cl = this;
var sound = "violin_1";
var one, two, three, four, five, six, seven;
cx = 150 + Math.floor(Math.random()*(wWidth-350));
cy = 100 + Math.floor(Math.random()*(wHeight-300));
chart.attr("title",id);
this.spawn = function (isme){
if(isme){
colors = ["#ffffff"];
rad = 50;
}else{
colors = ["#BCC8CE", "#D3DDE2", "#C5D8ED", "#AAB9C1", "#B2C6CE", "#E2E2E2"];
}
chart.push(
one = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), 0).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: rad}, 2000, "bounce"),
two = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), 0).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: rad}, 2000, "bounce"),
three = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), 0).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: rad}, 2000, "bounce"),
four = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), 0).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: rad}, 2000, "bounce"),
five = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), 0).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: rad}, 2000, "bounce"),
six = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), 0).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: rad}, 2000, "bounce"),
seven = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), 0).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: rad}, 2000, "bounce")
);
one.blur(6);
two.blur(5);
three.blur(3);
four.blur(3);
chart.click(function () {
cl.showSound();
play_multi_sound(sound);
});
}
this.soundoff = function (inst){
play_multi_sound(inst);
sound = inst;
this.showSound();
}
this.remove = function (){
chart.remove();
}
this.setSound = function (t){
sound = t+"_1";
}
this.showSound = function() {
one.animate({
"20%": {r: rad-10, easing: ">"},
"50%": {r: rad+20, easing: "bounce"},
"100%": {r: rad}
}, 200);
two.animate({
"20%": {r: rad-10, easing: ">"},
"50%": {r: rad+20, easing: "bounce"},
"100%": {r: rad}
}, 200);
three.animate({
"20%": {r: rad-10, easing: ">"},
"50%": {r: rad+20, easing: "bounce"},
"100%": {r: rad}
}, 200);
four.animate({
"20%": {r: rad-10, easing: ">"},
"50%": {r: rad+20, easing: "bounce"},
"100%": {r: rad}
}, 200);
five.animate({
"20%": {r: rad-10, easing: ">"},
"50%": {r: rad+20, easing: "bounce"},
"100%": {r: rad}
}, 200);
six.animate({
"20%": {r: rad-10, easing: ">"},
"50%": {r: rad+20, easing: "bounce"},
"100%": {r: rad}
}, 200);
seven.animate({
"20%": {r: rad-10, easing: ">"},
"50%": {r: rad+20, easing: "bounce"},
"100%": {r: rad}
}, 200);
}
return this;
};
// File: infocloud.js - extends the Raphael svg lib
Raphael.fn.infocloud = function (id, type) {
var paper = this,
chart = this.set(),
rad = 100;
var one, two, three, four, five, six;
colors = ["#BCC8CE", "#D3DDE2", "#C5D8ED", "#AAB9C1", "#B2C6CE", "#E2E2E2"]
cx = 150 + Math.floor(Math.random()*(wWidth-350));
cy = 100 + Math.floor(Math.random()*(wHeight-300));
chart.attr("title",id);
this.spawn = function (){
chart.push(
one = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
two = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
three = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
four = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
five = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
six = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
seven = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
one = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
two = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
three = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
four = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
five = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
six = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce"),
seven = paper.circle(cx+(Math.sin(Math.random())*(Math.random()*150)), cy+(Math.cos(Math.random())*(Math.random()*50)), rad).attr({fill:colors[Math.floor(colors.length * Math.random())], stroke:"none",'opacity':".35"}).animate({r: 40}, 2000, "bounce")
);
one.blur(6);
two.blur(5);
three.blur(3);
four.blur(3);
chart.click(function () {
showSound();
console.log("click");
play_multi_sound('multiaudio2');
});
}
this.soundoff = function (){
play_multi_sound('multiaudio1');
showSound();
}
this.remove = function (){
chart.remove();
}
return this;
};