mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-07-20 10:46:01 +02:00
in the beginning
This commit is contained in:
Peter Cottle
commit
a817cec5f5
23 changed files with 4243 additions and 0 deletions
BIN
src/.index.html.swp
Normal file
BIN
src/.index.html.swp
Normal file
Binary file not shown.
36
src/index.html
Normal file
36
src/index.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>The Art of Presence</title>
|
||||
<meta name="author" content="Christian Swinehart And Peter Cottle">
|
||||
<link rel="stylesheet" href="style/main.css" type="text/css" charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="viewport" width="800" height="600"></canvas>
|
||||
|
||||
<script src="../lib/jquery-1.8.0.min.js"></script>
|
||||
<!-- Include the individual source files so we can extend-->
|
||||
<script src="../arbor_src/etc.js"></script>
|
||||
<script src="../arbor_src/kernel.js"></script>
|
||||
<script src="../arbor_src/graphics/colors.js"></script>
|
||||
<script src="../arbor_src/graphics/primitives.js"></script>
|
||||
<script src="../arbor_src/graphics/graphics.js"></script>
|
||||
<script src="../arbor_src/tween/easing.js"></script>
|
||||
<script src="../arbor_src/tween/tween.js"></script>
|
||||
<script src="../arbor_src/physics/atoms.js"></script>
|
||||
<script src="../arbor_src/physics/barnes-hut.js"></script>
|
||||
<script src="../arbor_src/physics/physics.js"></script>
|
||||
<script src="../arbor_src/physics/system.js"></script>
|
||||
<script src="../arbor_src/dev.js"></script>
|
||||
|
||||
<script src="../lib/Tween.js"></script>
|
||||
<script src="../lib/rgbcolor.js"></script>
|
||||
<script src="../lib/EventEmitter.min.js"></script>
|
||||
<script src="util.js"></script>
|
||||
<script src="mine.js"></script>
|
||||
<script src="legacy.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
145
src/legacy.js
Normal file
145
src/legacy.js
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
Renderer = function(canvas) {
|
||||
canvas = $(canvas).get(0);
|
||||
var ctx = canvas.getContext("2d");
|
||||
var particleSystem = null;
|
||||
|
||||
var that = {
|
||||
init: function(system){
|
||||
particleSystem = system;
|
||||
particleSystem.screen({padding:[100, 100, 100, 100],
|
||||
step:.02});
|
||||
$(window).resize(that.resize);
|
||||
that.resize();
|
||||
that.initMouseHandling();
|
||||
},
|
||||
|
||||
drawNode: function(node, pt) {
|
||||
// node: {mass:#, p:{x,y}, name:"", data:{}}
|
||||
// pt: {x:#, y:#} node position in screen coords
|
||||
node.draw(ctx, pt);
|
||||
},
|
||||
|
||||
drawEdge: function(edge, pt1, pt2) {
|
||||
// edge: {source:Node, target:Node, length:#, data:{}}
|
||||
// pt1: {x:#, y:#} source position in screen coords
|
||||
// pt2: {x:#, y:#} target position in screen coords
|
||||
edge.draw(ctx, pt1, pt2);
|
||||
},
|
||||
|
||||
redraw: function(){
|
||||
if (particleSystem === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.clearRect(0,0, canvas.width, canvas.height);
|
||||
particleSystem.eachEdge(this.drawEdge);
|
||||
particleSystem.eachNode(this.drawNode);
|
||||
},
|
||||
|
||||
resize: function(){
|
||||
var w = $(window).width(),
|
||||
h = $(window).height();
|
||||
// resize the canvas element to fill the screen
|
||||
canvas.width = w; canvas.height = h;
|
||||
// inform the system so it can map coords for us
|
||||
particleSystem.screenSize(w,h);
|
||||
that.redraw();
|
||||
},
|
||||
|
||||
initMouseHandling: function(){
|
||||
// no-nonsense drag and drop (thanks springy.js)
|
||||
selected = null;
|
||||
nearest = null;
|
||||
var dragged = null;
|
||||
var oldmass = 1;
|
||||
|
||||
$(canvas).mousedown(function(e){
|
||||
var pos = $(this).offset();
|
||||
var p = {x:e.pageX-pos.left, y:e.pageY-pos.top};
|
||||
selected = nearest = dragged = particleSystem.nearest(p);
|
||||
|
||||
if (selected.node !== null){
|
||||
dragged.node.tempMass = constants.clickDragMass;
|
||||
dragged.node.fixed = true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
$(canvas).mousemove(function(e){
|
||||
var old_nearest = nearest && nearest.node._id;
|
||||
var pos = $(this).offset();
|
||||
var s = {x:e.pageX-pos.left, y:e.pageY-pos.top};
|
||||
|
||||
nearest = particleSystem.nearest(s);
|
||||
if (!nearest) { return; }
|
||||
|
||||
if (dragged !== null && dragged.node !== null) {
|
||||
var p = particleSystem.fromScreen(s);
|
||||
dragged.node.p = {x:p.x, y:p.y};
|
||||
dragged.tempMass = constants.clickDragMass;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$(window).bind('mouseup',function(e){
|
||||
if (dragged===null || dragged.node===undefined) return
|
||||
dragged.node.fixed = false;
|
||||
dragged.node.tempMass = constants.baseMass;
|
||||
dragged = null;
|
||||
selected = null;
|
||||
return false;
|
||||
});
|
||||
|
||||
},
|
||||
}
|
||||
return that;
|
||||
}
|
||||
|
||||
function makeEdgeAddClosure(sys, node1, node2) {
|
||||
var c = function() {
|
||||
var e = sys.addEdge(node1, node2);
|
||||
if (e) {
|
||||
e.afterConstruct();
|
||||
}
|
||||
};
|
||||
return c;
|
||||
}
|
||||
|
||||
var Maps = function(elt){
|
||||
sys = arbor.ParticleSystem(4000, 500, 0.5, false, 55, 0.005, 'verlet')
|
||||
sys.renderer = Renderer("#viewport") // our newly created renderer will have its .init() method called shortly by sys...
|
||||
|
||||
// Add some random nodes and edges to the graph!
|
||||
nodes = [];
|
||||
for (var i = 0; i < 15; i++) {
|
||||
var id = randomString(8);
|
||||
var node = sys.addNode(id);
|
||||
node.afterConstruct();
|
||||
nodes.push(node);
|
||||
}
|
||||
|
||||
var randNode = function() {
|
||||
var length = nodes.length;
|
||||
var index = Math.floor(Math.random() * length);
|
||||
return nodes[index];
|
||||
};
|
||||
|
||||
var closures = [];
|
||||
for (var i = 0; i < 20; i++) {
|
||||
var node1 = randNode();
|
||||
var node2 = randNode();
|
||||
// lol will it ever end?
|
||||
while (node1 === node2) {
|
||||
node2 = randNode();
|
||||
}
|
||||
engine.addEdge(node1, node2);
|
||||
}
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
var node2 = randNode();
|
||||
while (nodes[i] === node2) {
|
||||
node2 = randNode();
|
||||
}
|
||||
engine.addEdge(nodes[i], node2);
|
||||
}
|
||||
}
|
||||
261
src/mine.js
Normal file
261
src/mine.js
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
|
||||
/**
|
||||
* Globals
|
||||
*/
|
||||
var ee = null;
|
||||
var sys = null;
|
||||
var engine = null;
|
||||
var graphicsEffects = {};
|
||||
|
||||
$(document).ready(function(){
|
||||
engine = new Engine();
|
||||
ee = new EventEmitter();
|
||||
|
||||
var mcp = Maps("#maps");
|
||||
|
||||
var repulsionBreathe = function(r) {
|
||||
sys.parameters({repulsion: r});
|
||||
};
|
||||
var b = new Breather(repulsionBreathe, 6050, 4000);
|
||||
|
||||
graphicsEffects.edgeStrokeEffect = new GraphicsEffect('edgeStroke', {wait: 1000});
|
||||
});
|
||||
/**
|
||||
* Extend the Arbiter classes below with my own custom functionality to
|
||||
* stop this horrible object cross link stuff
|
||||
*/
|
||||
Node.prototype.afterConstruct = function() {
|
||||
this.positions = [];
|
||||
};
|
||||
|
||||
Node.prototype.draw = function(ctx, pt) {
|
||||
this.drawCircleNode(ctx, pt);
|
||||
};
|
||||
|
||||
Node.prototype.drawCircleNode = function(ctx, pt) {
|
||||
ctx.strokeStyle = graphics.nodeEdge;
|
||||
ctx.lineWidth = graphics.nodeStrokeWidth;
|
||||
ctx.fillStyle = graphics.nodeFill;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(pt.x, pt.y, 10, 0, Math.PI*2, true);
|
||||
ctx.closePath();
|
||||
ctx.stroke();
|
||||
ctx.fill();
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Edge
|
||||
*/
|
||||
Edge.prototype.afterConstruct = function() {
|
||||
//this.pastEdges = [];
|
||||
};
|
||||
|
||||
Edge.prototype.draw = function(ctx, pt1, pt2) {
|
||||
this.drawLine(ctx, pt1, pt2);
|
||||
};
|
||||
|
||||
Edge.prototype.drawLine = function(ctx, pt1, pt2, opacityPercent) {
|
||||
var color = new Color(graphics.edgeStroke);
|
||||
color.a = color.a * (opacityPercent === undefined ? 1 : opacityPercent);
|
||||
|
||||
ctx.lineWidth = graphics.edgeWidth + 1;
|
||||
ctx.strokeStyle = color.toRGBA();
|
||||
ctx.fillStyle = null;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pt1.x, pt1.y);
|
||||
ctx.lineTo(pt2.x, pt2.y);
|
||||
ctx.stroke();
|
||||
};
|
||||
|
||||
|
||||
function GraphicsEffect(gKey, options) {
|
||||
this.baseColor = graphics[gKey];
|
||||
|
||||
this.closure = (function(base_color) {
|
||||
var oSetter = function(o) {
|
||||
var color = new Color(base_color);
|
||||
color.a *= o;
|
||||
graphics[gKey] = color.toRGBA();
|
||||
};
|
||||
return oSetter;
|
||||
})(this.baseColor);
|
||||
|
||||
this.breather = new Breather(
|
||||
this.closure,
|
||||
options.midpoint || 0.9,
|
||||
options.amp || 0.85,
|
||||
options.period || 0.1,
|
||||
options.wait || 0
|
||||
);
|
||||
}
|
||||
|
||||
GraphicsEffect.prototype.pause = function() {
|
||||
this.breather.stop();
|
||||
};
|
||||
|
||||
GraphicsEffect.prototype.resume = function() {
|
||||
this.breather.next();
|
||||
};
|
||||
|
||||
/**
|
||||
* Breather
|
||||
*/
|
||||
function Breather(closure, baseline, delta, period, wait) {
|
||||
this.delta = delta;
|
||||
this.baseline = baseline;
|
||||
this.closure = closure;
|
||||
|
||||
this.t = 0;
|
||||
this.interval = 1/40 * 1000; // 40fps
|
||||
|
||||
var period_in_seconds = period || time.breathePeriod;
|
||||
this.period = 2 * Math.PI * 1000 * period_in_seconds;
|
||||
|
||||
this.interpolationFunction = TWEEN.Easing.Wave.Triangle;
|
||||
|
||||
if (wait) {
|
||||
var _this = this;
|
||||
setTimeout(function() {
|
||||
_this.start();
|
||||
}, wait);
|
||||
} else {
|
||||
this.start();
|
||||
}
|
||||
}
|
||||
|
||||
Breather.prototype.start = function() {
|
||||
this.t = 0;
|
||||
this.next();
|
||||
};
|
||||
|
||||
Breather.prototype.next = function() {
|
||||
var _this = this;
|
||||
this.timeout = setTimeout(function() {
|
||||
_this.breathe();
|
||||
}, this.interval);
|
||||
};
|
||||
|
||||
Breather.prototype.stop = function() {
|
||||
clearTimeout(this.timeout);
|
||||
};
|
||||
|
||||
Breather.prototype.breathe = function() {
|
||||
this.t += this.interval;
|
||||
|
||||
var value = Math.sin(this.t / this.period) * this.delta + this.baseline;
|
||||
this.closure(value);
|
||||
|
||||
this.next();
|
||||
};
|
||||
|
||||
/**
|
||||
* Particle System Engine
|
||||
*
|
||||
* Handles async stuff like adding the edges, etc
|
||||
*/
|
||||
function Engine() {
|
||||
this.addEdgeTimeout = null;
|
||||
this.edgeClosures = [];
|
||||
}
|
||||
|
||||
Engine.prototype.addEdge = function(node1, node2) {
|
||||
this.touchEdgeTimer();
|
||||
|
||||
this.edgeClosures.push(this.edgeClosureFactory(node1, node2));
|
||||
};
|
||||
|
||||
Engine.prototype.edgeClosureFactory = function(node1, node2) {
|
||||
var c = function() {
|
||||
var e = sys.addEdge(node1, node2);
|
||||
if (e) {
|
||||
e.afterConstruct();
|
||||
}
|
||||
};
|
||||
return c;
|
||||
};
|
||||
|
||||
Engine.prototype.touchEdgeTimer = function(key) {
|
||||
if (this.addEdgeTimeout) {
|
||||
return;
|
||||
}
|
||||
|
||||
var _this = this;
|
||||
this.addEdgeTimeout = setTimeout(function() {
|
||||
_this.startEdgeScheduler();
|
||||
}, 100);
|
||||
};
|
||||
|
||||
Engine.prototype.startEdgeScheduler = function() {
|
||||
// start scheduler
|
||||
var s = new Scheduler(this.edgeClosures, time.edgeAddInterval, 'add_edge');
|
||||
s.start();
|
||||
|
||||
this.resetEdges();
|
||||
};
|
||||
|
||||
Engine.prototype.resetEdges = function() {
|
||||
this.edgeClosures = [];
|
||||
this.addEdgeTimeout = null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Cover Photo
|
||||
*/
|
||||
function CoverPhoto(id, profile_pic_src, cover_photo_src) {
|
||||
this.pp_src = profile_pic_src;
|
||||
this.cp_src = cover_photo_src;
|
||||
this.profile_id = id;
|
||||
|
||||
// this is where I _should_ use templating... but i wont :P
|
||||
this.html = '' +
|
||||
'<div id="' + id + 'coverphoto" class="coverPhotoWrapper">' +
|
||||
'<div class="coverPhotoDiv">' +
|
||||
'<img src="' + this.cp_src + '"/>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div id="' + id + 'profilepic" class="profilePicCenter">' +
|
||||
'<div class="profilePicDiv">' +
|
||||
'<img src="' + this.pp_src + '"/>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
;
|
||||
|
||||
$('body').append(this.html);
|
||||
this.cp_node = $('#' + id + 'coverphoto')[0];
|
||||
this.pp_node = $('#' + id + 'profilepic')[0];
|
||||
};
|
||||
|
||||
CoverPhoto.prototype.show = function() {
|
||||
var _this = this;
|
||||
// let it get drawn first so it animates
|
||||
setTimeout(function() {
|
||||
_this.toggleShow(true);
|
||||
}, 10);
|
||||
};
|
||||
|
||||
CoverPhoto.prototype.hide = function() {
|
||||
this.toggleShow(false);
|
||||
};
|
||||
|
||||
CoverPhoto.prototype.toggle = function() {
|
||||
$(this.cp_node).toggleClass('visible');
|
||||
$(this.pp_node).toggleClass('visible');
|
||||
};
|
||||
|
||||
CoverPhoto.prototype.toggleShow = function(bool) {
|
||||
$(this.cp_node).toggleClass('visible', bool);
|
||||
$(this.pp_node).toggleClass('visible', bool);
|
||||
};
|
||||
|
||||
var profile_pic_src = 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/368844_545515979_1956877679_n.jpg';
|
||||
var cover_photo_src = 'https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/c0.0.851.315/p851x315/564389_10150741774845980_1149055874_n.jpg';
|
||||
var c = new CoverPhoto('pcottle', profile_pic_src, cover_photo_src);
|
||||
|
||||
c.show();
|
||||
setTimeout(function() {
|
||||
c.hide();
|
||||
}, 2000);
|
||||
|
||||
94
src/util.js
Normal file
94
src/util.js
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/**
|
||||
* Util classes
|
||||
*/
|
||||
|
||||
function Scheduler(closures, interval, type) {
|
||||
if (!closures || !closures.length || !interval || !type) {
|
||||
throw new Error('invalid params');
|
||||
}
|
||||
|
||||
this.done = false;
|
||||
this.closures = closures;
|
||||
this.interval = interval;
|
||||
this.type = type;
|
||||
this.timeOut = null;
|
||||
this.index = 0;
|
||||
|
||||
ee.addListener('scheduler_stop', this.stopSchedule, this);
|
||||
}
|
||||
|
||||
Scheduler.prototype.start = function() {
|
||||
// set the first interval
|
||||
this.index = 0;
|
||||
this.done = false;
|
||||
this.setNext();
|
||||
};
|
||||
|
||||
Scheduler.prototype.setNext = function(interval) {
|
||||
var _this = this;
|
||||
this.timeOut = setTimeout(function() {
|
||||
_this.step();
|
||||
}, interval || this.interval);
|
||||
};
|
||||
|
||||
Scheduler.prototype.stopSchedule = function(type) {
|
||||
console.log('received event signal');
|
||||
if (type == 'all' || type == this.type) {
|
||||
// either of these should work...
|
||||
this.done = true;
|
||||
clearTimeout(this.timeOut);
|
||||
}
|
||||
};
|
||||
|
||||
Scheduler.prototype.step = function() {
|
||||
if (this.done) {
|
||||
return;
|
||||
}
|
||||
|
||||
//console.log(this.type + ' is stepping with index ' + this.index);
|
||||
var results = this.closures[this.index]() || {};
|
||||
this.index++;
|
||||
|
||||
if (results.done || this.index >= this.closures.length) {
|
||||
this.done = true;
|
||||
return;
|
||||
}
|
||||
this.setNext(results.interval);
|
||||
};
|
||||
|
||||
/**
|
||||
* Constants....!!!
|
||||
*/
|
||||
var constants = {
|
||||
clickDragMass: 20,
|
||||
baseMass: 1,
|
||||
};
|
||||
|
||||
var time = {
|
||||
edgeAddInterval: 200,
|
||||
breathePeriod: 0.3
|
||||
};
|
||||
|
||||
/**
|
||||
* Graphics style
|
||||
*/
|
||||
var graphics = {
|
||||
// colors
|
||||
edgeStroke: 'rgba(94%, 96%, 98%, 0.5)', // '#EFF5FB',
|
||||
nodeEdge: 'rgba(94%, 96%, 98%, 0.9)', // '#EFF5FB',
|
||||
nodeFill: '#0066cc',
|
||||
|
||||
// widths
|
||||
nodeStrokeWidth: 15,
|
||||
edgeWidth: 2,
|
||||
};
|
||||
|
||||
function randomString(string_length) {
|
||||
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
|
||||
var randomstring = '';
|
||||
for (var i=0; i<string_length; i++) {
|
||||
var rnum = Math.floor(Math.random() * chars.length);
|
||||
randomstring += chars.substring(rnum,rnum+1);
|
||||
}
|
||||
return randomstring;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue