Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: floriancargoet/365-days-on-canvas
base: 62c4d45ecf
...
head fork: floriancargoet/365-days-on-canvas
compare: 9a753f97b6
Checking mergeability… Don't worry, you can still create the pull request.
  • 3 commits
  • 1 file changed
  • 0 commit comments
  • 1 contributor
Showing with 135 additions and 23 deletions.
  1. +135 −23 365.js
View
158 365.js
@@ -1,7 +1,14 @@
Canvas365.registerDay('365', function(){
// classes and globals
- BBoxRegistry = {
+
+ var Util = {
+ rand : function (max){
+ return Math.floor(Math.random()*max);
+ }
+ };
+
+ var BBoxRegistry = {
objects : [],
bboxes : [],
update : function(object, bbox){
@@ -27,8 +34,9 @@ Canvas365.registerDay('365', function(){
},
getObjectsAt : function(x, y){
var all = this.objects;
- return this.getBBoxesAt(x, y).map(function(bbox, i){
- return all[i];
+ var boxes = this.bboxes;
+ return this.getBBoxesAt(x, y).map(function(bbox){
+ return all[boxes.indexOf(bbox)];
});
}
};
@@ -48,14 +56,22 @@ Canvas365.registerDay('365', function(){
this.targetY = this.y;
};
+ StickMan.prototype.onClick = function(){
+ if(mode === 'edit'){
+ var colors = ['white', 'red', 'cyan', 'blue', 'black'];
+ this.config.strokeStyle = colors[Util.rand(colors.length)];
+ }
+ };
+
StickMan.prototype.draw = function(){
var ctx = this.ctx;
var config = this.config;
+ ctx.save();
+
ctx.lineWidth = config.lineWidth || 2;
ctx.strokeStyle = config.strokeStyle || 'black';
- ctx.save();
ctx.translate(this.x, this.y);
ctx.scale(this.scale, this.scale);
@@ -288,7 +304,10 @@ Canvas365.registerDay('365', function(){
this.x = config.x;
this.y = config.y;
this.radius = config.radius;
+ this.register();
+ };
+ Sun.prototype.register = function(){
BBoxRegistry.update(this, {
x1 : this.x - this.radius,
y1 : this.y - this.radius,
@@ -297,6 +316,13 @@ Canvas365.registerDay('365', function(){
});
};
+ Sun.prototype.onClick = function(){
+ if(mode === 'edit'){
+ this.radius = this.config.radius + (this.radius + 2) % 10;
+ this.register();
+ }
+ };
+
Sun.prototype.draw = function(){
var ctx = this.ctx;
var config = this.config;
@@ -523,6 +549,12 @@ Canvas365.registerDay('365', function(){
});
};
+ Bird.prototype.onClick = function(){
+ if(mode === 'edit'){
+ this.config.color = [0, 0, 0];
+ }
+ };
+
Bird.prototype.draw = function(){
var ctx = this.ctx;
var config = this.config;
@@ -551,12 +583,61 @@ Canvas365.registerDay('365', function(){
this.m = 7 * (1 + Math.sin(this.t));
};
+ var ModeSelector = function(ctx, config){
+ this.ctx = ctx;
+ this.config = config;
+ this.x = config.x;
+ this.y = config.y;
+ this.register();
+ };
+
+ ModeSelector.prototype.register = function(){
+ var me = this;
+ this.config.modes.forEach(function(mode, i){
+ var x1 = me.x + 2 + 12*i;
+ var y1 = me.y + 2;
+ BBoxRegistry.update(mode, {
+ x1 : x1,
+ y1 : y1,
+ x2 : x1 + 10,
+ y2 : y1 + 10
+ });
+ mode.onClick = me.onModeClick;
+ });
+ };
+
+ ModeSelector.prototype.onModeClick = function(x, y){
+ // mode = global, this = clicked mode object
+ mode = this.mode;
+ };
+
+ ModeSelector.prototype.draw = function(){
+ var ctx = this.ctx;
+ var config = this.config;
+ ctx.save();
+ ctx.fillStyle = 'white';
+
+ ctx.translate(this.x, this.y);
+
+ ctx.fillRect(0, 0, config.modes.length * 12 + 2, 14);
+
+ config.modes.forEach(function(mode, i){
+ ctx.fillStyle = mode.color;
+ ctx.fillRect(2 + 12*i, 2, 10, 10);
+ });
+
+ ctx.restore();
+ };
+
+ ModeSelector.prototype.update = function(){};
+
// globals
var drawList = [];
var transparentBird;
var beach;
var boxes = [];
+ var mode;
return {
init : function(ctx){
@@ -615,17 +696,30 @@ Canvas365.registerDay('365', function(){
scale : 0.7
}));
+ drawList.push(new ModeSelector(ctx, {
+ x : 10,
+ y : 10,
+ modes : [{
+ mode : 'none',
+ color : 'red'
+ },{
+ mode : 'edit',
+ color : 'green'
+ },{
+ mode : 'add',
+ color : 'orange'
+ }]
+ }));
+
// This bird will be attached to the mouse pointer when it's
// in the sky. A click will make it black and fix its position
// and create a new transparent bird
- function rand(max){
- return Math.floor(Math.random()*max);
- }
+
function makeBird(){
return new Bird(ctx, {
x : -100,
y : -100,
- color : [rand(255), rand(255), rand(255)],
+ color : [Util.rand(255), Util.rand(255), Util.rand(255)],
opacity : 0.5,
scale : 0.5 + Math.random()
});
@@ -646,27 +740,41 @@ Canvas365.registerDay('365', function(){
var x = ev.clientX - canvasX;
var y = ev.clientY - canvasY;
+ // dispatch clicks
+ var hoveredObj = BBoxRegistry.getObjectsAt(x, y);
+ hoveredObj.forEach(function(o){
+ if(o.onClick){
+ o.onClick(x, y);
+ }
+ });
+
// add bird
if(y < beach.config.yWater){
- transparentBird.config.opacity = 1;
- transparentBird.register();
- drawList.push(transparentBird);
- transparentBird = makeBird();
+ if(mode === 'add'){
+ transparentBird.config.opacity = 1;
+ transparentBird.register();
+ drawList.push(transparentBird);
+ transparentBird = makeBird();
+ }
}
// movement
else {
stickman.goTo(x, stickman.y); // animated
}
+
}, false);
ctx.canvas.addEventListener('mousemove', function(ev){
var x = ev.clientX - canvasX;
var y = ev.clientY - canvasY;
- transparentBird.x = x;
- transparentBird.y = y;
+ if(mode === 'add'){
+ transparentBird.x = x;
+ transparentBird.y = y;
+ }
boxes = BBoxRegistry.getBBoxesAt(x, y);
+
}, false);
},
@@ -678,17 +786,21 @@ Canvas365.registerDay('365', function(){
item.draw();
});
- boxes.forEach(function(box, i){
- ctx.beginPath();
- ctx.fillStyle = 'orange';
- ctx.rect(box.x1, box.y1, box.x2 - box.x1, box.y2 - box.y1);
- ctx.stroke();
- });
+ if(mode === 'edit'){
+ boxes.forEach(function(box, i){
+ ctx.beginPath();
+ ctx.fillStyle = 'orange';
+ ctx.rect(box.x1, box.y1, box.x2 - box.x1, box.y2 - box.y1);
+ ctx.stroke();
+ });
+ }
// transparent bird
- if(transparentBird.y < beach.config.yWater){
- transparentBird.update();
- transparentBird.draw();
+ if(mode === 'add'){
+ if(transparentBird.y < beach.config.yWater){
+ transparentBird.update();
+ transparentBird.draw();
+ }
}
}
};

No commit comments for this range

Something went wrong with that request. Please try again.