heck yeah nice splash
parent
c718a6b5fd
commit
dd5f0f4184
Binary file not shown.
After Width: | Height: | Size: 205 B |
Binary file not shown.
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
After Width: | Height: | Size: 687 KiB |
@ -0,0 +1,46 @@
|
|||||||
|
(function(exports){
|
||||||
|
|
||||||
|
var Scratcher = {};
|
||||||
|
exports.Scratcher = Scratcher;
|
||||||
|
|
||||||
|
Scratcher.scratch = function(){
|
||||||
|
|
||||||
|
var dom = $("#scratcher");
|
||||||
|
dom.style.display = "block";
|
||||||
|
|
||||||
|
Scratcher.scratchAnim(true)
|
||||||
|
.then(function(){
|
||||||
|
publish("slideshow/next");
|
||||||
|
})
|
||||||
|
.then(function(){
|
||||||
|
return Scratcher.scratchAnim(false);
|
||||||
|
})
|
||||||
|
.then(function(){
|
||||||
|
dom.style.display = "none";
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
subscribe("slideshow/scratch", Scratcher.scratch);
|
||||||
|
|
||||||
|
|
||||||
|
Scratcher.scratchAnim = function(scratchIn){
|
||||||
|
var dom = $("#scratcher");
|
||||||
|
var deferred = Q.defer();
|
||||||
|
var frame = 0;
|
||||||
|
var interval = setInterval(function(){
|
||||||
|
frame++;
|
||||||
|
if(frame>19){
|
||||||
|
clearInterval(interval);
|
||||||
|
deferred.resolve();
|
||||||
|
}else{
|
||||||
|
Scratcher.gotoFrame(scratchIn, frame);
|
||||||
|
}
|
||||||
|
},40);
|
||||||
|
return deferred.promise;
|
||||||
|
};
|
||||||
|
Scratcher.gotoFrame = function(scratchIn, frame){
|
||||||
|
var dom = $("#scratcher");
|
||||||
|
dom.style.backgroundPosition = (scratchIn?0:-100)+"% "+(frame*-100)+"%";
|
||||||
|
};
|
||||||
|
|
||||||
|
})(window);
|
@ -0,0 +1,204 @@
|
|||||||
|
Loader.addToManifest(Loader.manifest,{
|
||||||
|
splash_peep: "assets/splash/splash_peep.json",
|
||||||
|
connection: "assets/splash/connection.json"
|
||||||
|
});
|
||||||
|
|
||||||
|
function Splash(config){
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
self.id = config.id;
|
||||||
|
|
||||||
|
// Dimensions, yo
|
||||||
|
var width = $("#main").clientWidth;
|
||||||
|
var height = $("#main").clientHeight;
|
||||||
|
var x = -(width-960)/2;
|
||||||
|
var y = -(height-540)/2;
|
||||||
|
|
||||||
|
// DOM
|
||||||
|
self.dom = document.createElement("div");
|
||||||
|
self.dom.className = "object";
|
||||||
|
self.dom.style.left = x+"px";
|
||||||
|
self.dom.style.top = y+"px";
|
||||||
|
|
||||||
|
// APP
|
||||||
|
var app = new PIXI.Application(width, height, {transparent:true, resolution:2});
|
||||||
|
app.view.style.width = width;
|
||||||
|
app.view.style.height = height;
|
||||||
|
self.dom.appendChild(app.view);
|
||||||
|
|
||||||
|
// CONTAINERS
|
||||||
|
var edgesContainer = new PIXI.Container();
|
||||||
|
var peepsContainer = new PIXI.Container();
|
||||||
|
app.stage.addChild(edgesContainer);
|
||||||
|
app.stage.addChild(peepsContainer);
|
||||||
|
|
||||||
|
// PEEPS
|
||||||
|
var peeps = [];
|
||||||
|
self.addPeep = function(x, y){
|
||||||
|
var peep = new SplashPeep({ x:x, y:y, app:app });
|
||||||
|
peeps.push(peep);
|
||||||
|
peepsContainer.addChild(peep.graphics);
|
||||||
|
};
|
||||||
|
|
||||||
|
// EDGES
|
||||||
|
var edges = [];
|
||||||
|
self.addEdge = function(from, to){
|
||||||
|
var edge = new SplashEdge({ from:from, to:to });
|
||||||
|
edges.push(edge);
|
||||||
|
edgesContainer.addChild(edge.graphics);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create RINGS
|
||||||
|
var _createRing = function(xRadius, count){
|
||||||
|
yRadius = xRadius*(350/400);
|
||||||
|
var increment = (Math.TAU/count)+0.0001;
|
||||||
|
for(var angle=0; angle<Math.TAU; angle+=increment){
|
||||||
|
var a = angle-(Math.TAU/4);
|
||||||
|
var x = width/2 + Math.cos(a)*xRadius;
|
||||||
|
var y = height/2 + Math.sin(a)*yRadius;
|
||||||
|
self.addPeep(x,y);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
_createRing(400, 20);
|
||||||
|
_createRing(520, 25);
|
||||||
|
_createRing(640, 30);
|
||||||
|
_createRing(760, 35);
|
||||||
|
|
||||||
|
// Connect all within a radius
|
||||||
|
var _connectAllWithinRadius = function(radius){
|
||||||
|
|
||||||
|
var r2 = radius*radius;
|
||||||
|
|
||||||
|
for(var i=0;i<peeps.length;i++){
|
||||||
|
var peep1 = peeps[i];
|
||||||
|
|
||||||
|
for(var j=i+1;j<peeps.length;j++){
|
||||||
|
var peep2 = peeps[j];
|
||||||
|
|
||||||
|
// Are they close enough?
|
||||||
|
var dx = peep2.x-peep1.x;
|
||||||
|
var dy = peep2.y-peep1.y;
|
||||||
|
if(dx*dx+dy*dy < r2){
|
||||||
|
self.addEdge(peep1, peep2);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
_connectAllWithinRadius(250);
|
||||||
|
|
||||||
|
// Animiniminimination
|
||||||
|
var update = function(delta){
|
||||||
|
Tween.tick();
|
||||||
|
for(var i=0;i<peeps.length;i++) peeps[i].update(delta);
|
||||||
|
for(var i=0;i<edges.length;i++) edges[i].update(delta);
|
||||||
|
};
|
||||||
|
app.ticker.add(update);
|
||||||
|
update(0);
|
||||||
|
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
///////////// ADD, REMOVE, KILL ///////////////
|
||||||
|
///////////////////////////////////////////////
|
||||||
|
|
||||||
|
// Add...
|
||||||
|
self.add = function(INSTANT){
|
||||||
|
return _add(self);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Remove...
|
||||||
|
self.remove = function(INSTANT){
|
||||||
|
return _remove(self);
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function SplashPeep(config){
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
self.config = config;
|
||||||
|
|
||||||
|
// Graphics!
|
||||||
|
var g = _makeMovieClip("splash_peep", {scale:0.3});
|
||||||
|
self.graphics = g;
|
||||||
|
if(Math.random()<0.5) g.scale.x*=-1; // Flip?
|
||||||
|
|
||||||
|
// Them variables...
|
||||||
|
self.app = config.app;
|
||||||
|
self.x = config.x;
|
||||||
|
self.y = config.y;
|
||||||
|
var initX = config.x;
|
||||||
|
var initY = config.y;
|
||||||
|
var initRotation = (Math.random()-0.5)*(Math.PI-0.4);
|
||||||
|
var radius = 5+Math.random()*20;
|
||||||
|
var swing = 0.05+Math.random()*0.45;
|
||||||
|
var angle = Math.random()*Math.TAU;
|
||||||
|
var speed = (0.05+Math.random()*0.95)/60;
|
||||||
|
|
||||||
|
self.update = function(delta){
|
||||||
|
|
||||||
|
// Them variables...
|
||||||
|
angle += speed*delta;
|
||||||
|
var x = initX + Math.cos(angle)*radius;
|
||||||
|
var y = initY + Math.sin(angle)*radius;
|
||||||
|
var r = initRotation + Math.cos(angle)*swing;
|
||||||
|
|
||||||
|
// NEAR MOUSE?
|
||||||
|
var Mouse = self.app.renderer.plugins.interaction.mouse.global;
|
||||||
|
var dx = Mouse.x-x;
|
||||||
|
var dy = Mouse.y-y;
|
||||||
|
var rad = 200;
|
||||||
|
var bulgeX = 0;
|
||||||
|
var bulgeY = 0;
|
||||||
|
var dist2 = dx*dx+dy*dy;
|
||||||
|
if(dist2 < rad*rad){
|
||||||
|
var bulge = Math.sin(((rad-Math.sqrt(dist2))/rad)*Math.TAU/4)*50;
|
||||||
|
var bulgeAngle = Math.atan2(-dy,-dx);
|
||||||
|
bulgeX = Math.cos(bulgeAngle)*bulge;
|
||||||
|
bulgeY = Math.sin(bulgeAngle)*bulge;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Graphics!
|
||||||
|
g.x = x + bulgeX;
|
||||||
|
g.y = y + bulgeY;
|
||||||
|
g.rotation = r;
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function SplashEdge(config){
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
self.config = config;
|
||||||
|
|
||||||
|
// Graphics!
|
||||||
|
var g = _makeMovieClip("connection");
|
||||||
|
g.anchor.x = 0;
|
||||||
|
g.anchor.y = 0.5;
|
||||||
|
g.height = 1;
|
||||||
|
self.graphics = g;
|
||||||
|
|
||||||
|
// Them variables...
|
||||||
|
self.from = config.from;
|
||||||
|
self.to = config.to;
|
||||||
|
|
||||||
|
self.update = function(delta){
|
||||||
|
|
||||||
|
// Just update graphics!
|
||||||
|
var f = self.from.graphics;
|
||||||
|
var t = self.to.graphics;
|
||||||
|
var dx = t.x-f.x;
|
||||||
|
var dy = t.y-f.y;
|
||||||
|
var a = Math.atan2(dy,dx);
|
||||||
|
var dist = Math.sqrt(dx*dx+dy*dy);
|
||||||
|
|
||||||
|
g.x = f.x;
|
||||||
|
g.y = f.y;
|
||||||
|
g.rotation = a;
|
||||||
|
|
||||||
|
g.width = dist;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
@ -0,0 +1,29 @@
|
|||||||
|
SLIDES.push({
|
||||||
|
|
||||||
|
id: "intro",
|
||||||
|
add:[
|
||||||
|
|
||||||
|
// Splash in background
|
||||||
|
{ id:"splash", type:"Splash" },
|
||||||
|
|
||||||
|
// Circular Wordbox
|
||||||
|
{
|
||||||
|
id:"intro_text", type:"TextBox",
|
||||||
|
box:{
|
||||||
|
x:160, y:10, width:640, height:500,
|
||||||
|
align:"center", size:19,
|
||||||
|
text_id:"intro"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Button
|
||||||
|
{
|
||||||
|
id:"intro_button", type:"Button", x:385, y:466,
|
||||||
|
text_id:"intro_button", fontSize:16, upperCase:false,
|
||||||
|
message:"slideshow/scratch"
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
|
removeAllOnKill: true
|
||||||
|
|
||||||
|
});
|
Loading…
Reference in New Issue