DAN ZEN EXPO - CODE EXHIBIT -
CREATIVITY FRAMEWORK
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Meta Creativity Framework Exercise 01 Multiuser</title>
<!-- for Google -->
<meta name="description" content="Creativity Framework - The mechanics and magic of Creativity by award winning Inventor, Dan Zen. Based on philosophy of Nodism." />
<meta name="keywords" content="Meta, Creativity, Framework, Meta Creativity Framework, Creativity Framework, Dan Zen, Inventor, Nodism" />
<meta name="author" content="Dan Zen" />
<meta name="copyright" content="Dan Zen" />
<!-- for Facebook -->
<meta property="og:title" content="Creativity Framework - the Magic of Creativity Explained" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://danzen.com/expo/images/poster.jpg" />
<meta property="og:url" content="http://danzen.com/expo/index.html" />
<meta property="og:description" content="Creativity Framework - The mechanics and magic of Creativity by award winning Inventor, Dan Zen. Based on philosophy of Nodism." />
<!-- for Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Creativity Framework - the Magic of Creativity Explained" />
<meta name="twitter:description" content="Creativity Framework - The mechanics and magic of Creativity by award winning Inventor, Dan Zen. Based on philosophy of Nodism." />
<meta name="twitter:image" content="http://danzen.com/expo/images/poster.jpg" />
<!-- for Apple -->
<meta name="viewport" content="width=device-width; initial-scale=.5; target-densitydpi=device-dpi;" />
<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="http://danzen.com/museum/apple-icon.png" />
<script>var zon = true; // true for comments from zim code</script>
<script src="http://d309knd7es5f10.cloudfront.net/zim_1.4.2.js"></script><!-- take off _min to see code -->
<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 -->
<script src="http://d309knd7es5f10.cloudfront.net/zimsocket_1.0.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.4.js"></script>
<style>
body {margin:0px; padding:0px; background-color:#CCC; background-image:url(backing3.jpg);}
#myCanvas {
position:absolute;
background-color:#FFF;
border-top:thin #999 solid;
border-bottom:thin #999 solid;
-moz-box-shadow: 0px 0px 20px 20px #999;
-webkit-box-shadow: 0px 0px 20px 20px #999;
box-shadow: 5px 5px 16px #888888;
}
</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 = 2000;
var height = 1000;
var frame = new zim.Frame(scaling, width, height);
frame.on("ready", function() {
zog("ready from ZIM Frame - Load");
var stage = frame.stage;
var stageW = frame.width;
var stageH = frame.height;
// handle asset loading and call main app function when complete
var contentPath = "exercises/";
var manifest = [{src:"oneBase.png", id:"base"}];
var labels = ["analyse", "aspect", "branches", "children", "content", "context", "endnodes", "future", "general", "join", "node", "nodezero", "now", "para", "parent", "past", "perspect", "sibling", "specific", "split", "sub", "super", "synthesize"];
var positions = [[1768, 688], [1237, 684], [991, 534], [1374, 747], [393, 746], [388, 476], [684, 762], [173, 745], [1490, 368], [1494, 535], [388, 607], [687, 419], [169, 609], [1678, 615], [1372, 474], [171, 474], [1216, 534], [1374, 610], [1498, 868], [1499, 685], [1621, 748], [1615, 477], [1794, 535]];
for (var i=0; i<labels.length; i++) {
manifest.push({src:"one/"+labels[i]+".png", id:labels[i]});
}
var preload = new createjs.LoadQueue(false, contentPath); // use true if on the same server
preload.on("complete", exercise); // call the main code when ready
preload.loadManifest(manifest);
var waiter = new zim.Waiter(stage, null, "violet");
waiter.show();
var socket;
function exercise() {
// put your code here (you can delete this code)
var words = "EXERCISE 01 ~ Drag labels to describe a hierarchy";
var instructions = new zim.Label(words,null,null,"#666666");
instructions.x = 80;
instructions.y = 34;
stage.addChild(instructions);
var icon = new createjs.Bitmap("icon.png");
stage.addChild(icon);
icon.alpha = .9;
icon.x = 20;
icon.y = 14;
var complete = new zim.Label("COMPLETE",60,null,"violet");
complete.x = 1250; complete.y = 54;
var prev = makeArrow(-90);
stage.addChild(prev);
prev.x = 1700;
prev.y = 20;
var next = makeArrow(90);
stage.addChild(next);
next.x = 1850;
next.y = 20;
prev.on("click", function() {zgo("framework.html")});
next.on("click", function() {zgo("exercise02.html")});
window.addEventListener("keydown", doKeys);
function doKeys(e) {
if (!e) e = event;
if (e.keyCode == 72) { // H
zim.deleteCookie('dzcfcp');
zim.deleteCookie('dzcfcp2');
zim.deleteCookie('dzcfcp3');
zim.deleteCookie('dzcfcp4');
zim.deleteCookie('dzcfcp5');
zim.deleteCookie('dzcfcp6');
zgo("framework.html");
}
if (e.keyCode == 37) {zgo("framework.html");}
if (e.keyCode == 39) {zgo("exercise02.html");}
zil(e);
}
var restartLabel = new zim.Label("RESTART", null, null, "#666");
var restart = new zim.Button(200,70,restartLabel,"#FCF","#F9F",null,0,0,0,0);
//stage.addChild(restart);
restart.x = 1304;
restart.y = 144;
restart.on("click", function() {
var pos = {};
var label;
for (var i=0; i<labels.length; i++) {
label = labelLookup[i];
pos["x"+i] = label.x = zim.rand(130, stageW-600);
pos["y"+i] = label.y = zim.rand(120, 300);
label.shadow = new createjs.Shadow("rgba(0,0,0,.2)", 5, 5, 20);
holder.addChild(label);
}
pos.command = "restart";
socket.setProperties(pos);
stage.removeChild(complete);
stage.removeChild(restart);
stage.update();
});
var groupLabel = new zim.Label("SINGLE", null, null, "#666");
var group = new zim.Button(180,70,groupLabel,"#FCF","#F9F",null,0,0,0,0);
stage.addChild(group);
group.x = 1800;
group.y = 900;
group.on("click", function() {
if (window.history.length > 1) {
window.history.back();
} else {
zgo("exercise01.html");
}
});
waiter.hide();
var base = new createjs.Bitmap(preload.getResult("base"));
zim.centerReg(base);
base.x = stageW/2;
base.y = stageH/2 + 100;
stage.addChild(base);
var holder = new createjs.Container();
var holderMatch = new createjs.Container();
var holderDone = new createjs.Container();
var labelLookup = [];
stage.addChild(holderDone);
stage.addChild(holder);
stage.addChildAt(holderMatch,0);
zim.drag(holder, new createjs.Rectangle(0,0,stageW-200,stageH-50));
holder.on("mousedown", function(e) {holder.addChild(e.target);});
holder.on("pressmove", function(e) {
var pos = {};
pos["x"+e.target.index] = Math.round(e.target.x);
pos["y"+e.target.index] = Math.round(e.target.y);
socket.setProperties(pos);
});
holder.on("click", function(e) {
if (zim.hitTestReg(e.target.labelMatch, e.target)) {
var pos = {};
pos["x"+e.target.index] = e.target.x = e.target.labelMatch.x;
pos["y"+e.target.index] = e.target.y = e.target.labelMatch.y;
pos.command = "drop";
holderDone.addChild(e.target);
e.target.shadow = null;
if (holder.numChildren <= 0) {
stage.addChild(complete);
stage.addChild(restart);
}
socket.setProperties(pos);
stage.update();
}
});
function makeArrow(rotation, color, backingColor, rollColor) {
if (zot(color)) color = "#CCC"; // if not color
if (zot(backingColor)) backingColor = "white";
if (zot(rollColor)) rollColor = "#FCF";
/*
Button(width, height, label,
backingColor, backingRollColor, borderColor, borderThickness,
corner, shadowColor, shadowBlur
)
*/
var arrow = new zim.Button(120,120,"",backingColor,rollColor,color,4,60,0,0);
arrow.alpha = .7;
// fake tab - adding at (arrow triangle) to the arrow button
// Triangle(a, b, c, fill, stroke, strokeSize, center)
var at = new zim.Triangle(80,60,60,color,null,null,true,7);
at.rotation = rotation;
at.x = arrow.width/2;
at.y = arrow.height/2;
at.mouseChildren = false; // so arrow does not get in way of rollover
at.mouseEnabled = false;
arrow.addChild(at);
return arrow;
}
multi();
function multi() {
// set parameters for the zim.Socket object
var server = "http://54.209.193.48:3000";
// var server = "http://localhost:3000";
var app = "zimmeta01";
var room = null; // just use the default room
var maxPeople = null; // just use the default of 0 which means unlimited
var fill = null; // just use the default of fill where clients leave
// we can send an optional initial object to the server
// this information will get sent to all the other clients in an otherjoin event
socket = new zim.Socket(server, app, room, maxPeople, fill);
socket.on("ready", function() {
zog("connected");
var label;
var labelMatch;
if (socket.size == 0) {
var pos = {};
for (var i=0; i<labels.length; i++) {
labelMatch = new createjs.Bitmap(preload.getResult(labels[i]));
holderMatch.addChild(labelMatch);
zim.centerReg(labelMatch);
labelMatch.x = positions[i][0];
labelMatch.y = positions[i][1];
label = new createjs.Bitmap(preload.getResult(labels[i]));
label.labelMatch = labelMatch;
label.index = i;
holder.addChild(label);
zim.centerReg(label);
pos["x"+i] = label.x = zim.rand(130, stageW-600);
pos["y"+i] = label.y = zim.rand(120, 300);
label.shadow = new createjs.Shadow("rgba(0,0,0,.2)", 5, 5, 20);
labelLookup.push(label);
}
socket.setProperties(pos);
} else {
for (var i=0; i<labels.length; i++) {
labelMatch = new createjs.Bitmap(preload.getResult(labels[i]));
holderMatch.addChild(labelMatch);
zim.centerReg(labelMatch);
labelMatch.x = positions[i][0];
labelMatch.y = positions[i][1];
label = new createjs.Bitmap(preload.getResult(labels[i]));
label.labelMatch = labelMatch;
label.index = i;
holder.addChild(label);
zim.centerReg(label);
label.x = socket.getLatestValue("x"+i);
label.y = socket.getLatestValue("y"+i);
label.shadow = new createjs.Shadow("rgba(0,0,0,.2)", 5, 5, 20);
labelLookup.push(label);
if (zim.hitTestReg(label.labelMatch, label)) {
label.x = label.labelMatch.x;
label.y = label.labelMatch.y;
holderDone.addChild(label);
label.shadow = null;
}
}
if (holder.numChildren <= 0) {
stage.addChild(complete);
stage.addChild(restart);
}
}
});
socket.on("data", function(data) {
//zog(data);
if (data.command == "restart") {
var label;
var labelMatch;
for (var i=0; i<labels.length; i++) {
label = labelLookup[i];
label.x = socket.getLatestValue("x"+i);
label.y = socket.getLatestValue("y"+i);
label.shadow = new createjs.Shadow("rgba(0,0,0,.2)", 5, 5, 20);
holder.addChild(label);
}
stage.removeChild(complete);
stage.removeChild(restart);
stage.update();
return;
}
var index;
for (var i in data) {
if (i.substr(0,1) == "x") {
index = Number(i.substr(1));
labelLookup[index].x = Number(data[i]);
} else if (i.substr(0,1) == "y") {
index = Number(i.substr(1));
labelLookup[index].y = Number(data[i]);
}
}
if (data.command == "drop") {
var lab = labelLookup[index];
if (zim.hitTestReg(lab.labelMatch, lab)) {
lab.x = lab.labelMatch.x;
lab.y = lab.labelMatch.y;
holderDone.addChild(lab);
lab.shadow = null;
if (holder.numChildren <= 0) {
stage.addChild(complete);
stage.addChild(restart);
}
}
}
stage.update();
});
}
stage.update();
} // end of app
}); // end of ready
</script>
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>