DAN ZEN EXPO - CODE EXHIBIT -
ZIM EGG
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM EGG - Collective Coloring</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<!-- for Google -->
<meta name="description" content="ZIM EGG - Collective Coloring - multiuser with SocketIO and NodeJS - ZIM" />
<meta name="keywords" content="zimjs, socket, socketserver, socketio, nodejs, danzen, javascript, code, free, interactive media, modules, library, html5" />
<meta name="author" content="Dan Zen" />
<meta name="copyright" content="Dan Zen" />
<!-- for Facebook -->
<meta property="og:title" content="ZIM EGG - Collective Coloring - multiuser with SocketIO and NodeJS - ZIM" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://zimjs.com/images/egg.jpg" />
<meta property="og:url" content="http://zimjs.com/egg.html" />
<meta property="og:description" content="ZIM EGG - Collective Coloring - multiuser with SocketIO and NodeJS - ZIM" />
<!-- for Twitter -->
<meta name="twitter:card" content="summary" /> <!-- do not edit this line (must say "summary") -->
<meta name="twitter:title" content="ZIM EGG - Collective Coloring - multiuser with SocketIO and NodeJS - ZIM" />
<meta name="twitter:description" content="ZIM EGG - Collective Coloring - multiuser with SocketIO and NodeJS - ZIM" />
<meta name="twitter:image" content="http://zimjs.com/images/egg.jpg" />
<!-- for Apple -->
<meta name="viewport" content="width=device-width, maximum-scale=1, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon-precomposed" href="images/iconS_57.png" />
<!-- for CreateJS and ZIMjs http://zimjs.com - free to modify - Dan Zen 2015 -->
<!-- see http://zimjs.com/templates for more templates and meta tags -->
<script>var zon = true; // true for comments from zim code</script>
<script src="http://d309knd7es5f10.cloudfront.net/zim_1.4.2.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.4.js"></script>
<script src="http://d309knd7es5f10.cloudfront.net/zimsocket_1.0.js"></script>
<script src="http://code.createjs.com/createjs-2014.12.12.min.js"></script>
<!-- or can go to zimjs.com and createjs.com for individual modules -->
<style>
body {margin:0px; padding:0px; background-color:#FFF;}
#myCanvas {position:absolute; background-color:#FFF;}
</style>
<script>
// SCALING OPTIONS
// "none" sets canvas and stage to dimensions and does not scale if window changes
// "fit" sets canvas and stage to dimensions and scales to fit inside window size
// "outside" sets canvas and stage to dimensions and scales to fit outside window size
// "full" sets canvas and stage to window size (canvas is actually set to screen size)
var scaling = "fit"; // full automatically sets width and height to window size
var width = 640;
var height = 960;
var frame = new zim.Frame(scaling, width, height);
frame.on("ready", function() {
zog("ready from ZIM Frame");
// handle asset loading and call main app function when complete
var contentPath = "images/";
var manifest = [{src:"zim_socket_s.jpg", id:"logo"},{src:"logo_s.jpg", id:"danzen"}]; // array of objects
var preload = new createjs.LoadQueue(false, contentPath); // use true if on the same server
preload.on("complete", zimEgg); // call the main code when ready
preload.loadManifest(manifest);
function zimEgg() {
var stage = frame.stage;
var stageW = frame.width;
var stageH = frame.height;
var server = "http://54.209.193.48:3000";
var appName = "zimegg";
var socket = new zim.Socket(server, appName);
var currentColor;
var colorList = ["#f58e25","#acd241","#e472c4","#50c4b7","#d1a170","#555555"];
var backing = new createjs.Shape();
var g = backing.graphics;
var fillObj;
var backingColor = (zim.getCookie("zimeggbacking") == "black") ? ["#000","#333"] : ["#FFF","#EEE"];
fillObj = g.beginRadialGradientFill(backingColor, [0, 1], 0, 0, 0, 0, 0, 300).command;
g.p("EAACAsDQs+gBpNrAQpNq/AOzhQAOzgJCtZQJDtaMigRQMggSI4NXQI4NWBGTsQBGTupkLJQpjLHs9AAIgDAAg");
backing.dark = false;
backing.shadow = new createjs.Shadow("#CCC", 5, 5, 30);
backing.x = stageW/2;
backing.y = stageH/2-60;
zim.scale(backing, 1.4);
stage.addChild(backing);
backing.alpha = 0;
backing.cursor = "pointer";
backing.on("click", function() {
if (backing.dark = !backing.dark) {
fillObj.radialGradient(["#000","#333"], [0, 1], 0, 0, 0, 0, 0, 300);
zim.setCookie("zimeggbacking", "black", 100);
} else {
fillObj.radialGradient(["#FFF","#EEE"], [0, 1], 0, 0, 0, 0, 0, 300);
zim.deleteCookie("zimeggbacking");
}
stage.update();
});
zim.animate(backing, {alpha:1}, 700);
var logo = new createjs.Bitmap(preload.getResult("logo"));
stage.addChild(logo);
zim.scale(logo, .5);
logo.alpha = .8;
logo.x = 20;
logo.y = stageH - logo.getBounds().height*.5 - 16;
logo.cursor = "pointer";
logo.on("click", function(){zgo("http://zimjs.com/socket.html");});
var danzen = new createjs.Bitmap(preload.getResult("danzen"));
stage.addChild(danzen);
zim.scale(danzen, .45);
danzen.alpha = .4;
danzen.x = 540;
danzen.y = stageH - danzen.getBounds().height*.6-16;
danzen.on("click", function(){zgo("http://danzen.com");});
danzen.cursor = "pointer";
danzen.shadow = new createjs.Shadow("#999", 5, 5, 15);
var egg = new createjs.Container();
egg.setBounds(0,0,300,780);
egg.alpha = 0;
egg.cursor = "pointer";
stage.addChild(egg);
egg.x = stageW/2;
egg.rotation = 180;
egg.y = stageH-200;
makeEgg();
zim.animate(egg, {alpha:1}, 2000);
socket.on("ready", function() {
zog("connected");
var animatedData = socket.history.split("\n");
animatedData.pop(); // get rid of last empty element
setTimeout(function() {animate();}, 1000);
var colors = new createjs.Container();
colors.shadow = new createjs.Shadow("#BBB", 5, 5, 10);
stage.addChild(colors);
makeColors();
colors.alpha = 0;
colors.cursor = "pointer";
colors.on("click", function(e) {
for (var i=0; i<colors.numChildren; i++) {
colors.getChildAt(i).setStroke("#aaa");
colors.getChildAt(i).setStrokeSize(1);
}
pickColor(e.target);
});
egg.on("click", function(e) {
if(zot(currentColor)) return;
e.target.setFill(currentColor);
stage.update();
socket.setProperties({index:e.target.index, color:currentColor});
socket.appendToHistory(e.target.index + "," + colorList.indexOf(currentColor)+"\n");
});
function animate() {
if (animatedData.length <= 0) {
zim.animate(colors, {alpha:1}, 1000);
pickColor(colors.getChildAt(Math.floor(Math.random()*colors.numChildren)));
return;
}
var clearCheck = false;
if (animatedData.length > 400) clearCheck = true;
var num = 200;
if (animatedData.length > num) {
animatedData.splice(0, animatedData.length-num); // remove first elements until num left
}
var count = 0;
var animate = setInterval(function() {
var d = animatedData[count].split(",");
egg.getChildAt(d[0]).setFill(colorList[d[1]]);
stage.update();
count++;
if (count >= animatedData.length) {
clearInterval(animate);
zim.animate(colors, {alpha:1}, 1000);
pickColor(colors.getChildAt(Math.floor(Math.random()*colors.numChildren)));
if (clearCheck) {
socket.clearHistory();
var newHistory = animatedData.join("\n") + "\n";
socket.appendToHistory(newHistory);
}
return;
}
}, 100);
}
function makeColors() {
var radius = 20;
var spacing = 12;
var dab;
colors.x = (stageW-(colorList.length*(radius*2+spacing)-spacing))/2+46;
colors.y = 870;
for (var i=0; i<colorList.length; i++) {
dab = new zim.Circle(radius,colorList[i],"#aaa",1,20);
colors.addChild(dab);
dab.x = (radius*2+spacing)*i;
dab.color = colorList[i];
}
var collectiveColoring = new zim.Label("C O L L E C T I V E C O L O R I N G", 14, "courier new","#999");
stage.addChild(collectiveColoring);
collectiveColoring.x = 198;
collectiveColoring.y = 925;
}
function pickColor(dab) {
dab.setStrokeSize(2);
currentColor = dab.color;
if (currentColor == "#555555") {
dab.setStroke("orange");
} else {
dab.setStroke("#666");
}
stage.update();
}
socket.on("data", function(data) {
egg.getChildAt(data.index).setFill(data.color);
animatedData.push(data.index+","+colorList.indexOf(data.color));
stage.update();
});
});
socket.on("error", function() {
zog("connect error");
var pane = new zim.Pane(stage,620,130,"SORRY - EGG IS BROKEN","yellow");
pane.show();
});
function makeEgg() {
//new zim.Grid(egg, null, false);
//new zim.Guide(egg, false, false);
//new zim.Guide(egg, true, false);
// [shape, x, y, [shape info], mirror] // mirror defaults to true
// r = [w,h], c = [r], t = [a,b,r]
// will atomatically copy and flip from right side to left side
// unless mirror is set to false (middle most likely)
r="r"; c="c"; t="t";
var shapes = [
[t,5,-20,[20,80,-1,90]],
[r,5,-10,[90,60]],
[r,5,60,[40,30]],
[r,55,60,[40,30]],
[t,105,90,[100,110,-1,90]],
[t,225,240,[140,40,-1,90]],
[c,0,140,[40], false],
[c,90,140,[40]],
[c,180,140,[40]],
[c,0,140,[20], false],
[c,90,140,[20]],
[c,180,140,[20]],
[r,5,190,[215,20]],
[r,5,220,[20,40]],
[r,35,220,[60,60]],
[r,105,220,[20,40]],
[r,135,220,[20,40]],
[r,165,220,[50,60]],
[r,-30,270,[60,60], false],
[r,40,290,[20,40]],
[r,70,290,[20,40]],
[r,100,270,[60,60]],
[r,170,290,[15,40]],
[r,195,290,[15,40]],
[r,225,250,[40,50]],
[t,225,310,[40,160,-1,180]],
[t,-40,340,[80,80,80,180], false],
[t,95,410,[80,80,80,0]],
[t,70,340,[80,80,80,180]],
[t,198,410,[70,80,80,0]],
[t,215,340,[70,40,-1,270]],
[t,170,480,[50,140,-1,180]],
[c,0,445,[20],false],
[c,0,515,[40],false],
[c,0,515,[20],false],
[c,70,515,[20]],
[c,50,465,[20]],
[c,50,565,[20]],
[c,0,585,[20],false],
[r,170,420,[45,50]],
[t,150,610,[80,80,80,0]],
[t,160,420,[190,100,-1,270]],
[r,5,620,[35,70]],
[r,50,620,[30,70]],
[t,90,620,[80,70,-1,180]],
[t,5,700,[80,20,-1,180]]
]
var shape; var data; var mirror;
for (var i=0; i<shapes.length; i++) {
data = shapes[i];
if (data[0] == r) {
shape = new zim.Rectangle(data[3][0],data[3][1],"#777");
} else if (data[0] == c) {
shape = new zim.Circle(data[3][0],"#777");
} else if (data[0] == t) {
shape = new zim.Triangle(data[3][0],data[3][1],data[3][2],"#777");
shape.regX = shape.width;
shape.regY = shape.height;
shape.x = data[1];
shape.y = data[2];
shape.rotation = data[3][3];
egg.addChild(shape);
if (zot(data[4])) {
mirror = shape.clone();
mirror.regX = mirror.width;
mirror.regY = mirror.height;
mirror.x = -data[1];
mirror.y = data[2];
mirror.rotation = -data[3][3];
mirror.scaleX = -1;
egg.addChild(mirror);
}
continue;
}
addShape(shape,data[1],data[2]);
if (zot(data[4])) {
mirror = shape.clone();
mirror.scaleX = -1;
addShape(mirror,-data[1],data[2]);
}
}
function addShape(shape, x, y) {
shape.regX = 0;
shape.regY = 0;
shape.x = x;
shape.y = y;
egg.addChild(shape);
}
for (i=0; i<egg.numChildren; i++) {
egg.getChildAt(i).index = i;
}
}
stage.update();
} // end of zimEgg
}); // end of ready
</script>
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>