2018-03-27 17:39:08 +00:00
|
|
|
/******************************************
|
|
|
|
|
|
|
|
THE PENCIL
|
|
|
|
it's purely visual. replace the cursor
|
|
|
|
draw / erase / click
|
|
|
|
|
|
|
|
******************************************/
|
|
|
|
|
|
|
|
function Pencil(){
|
|
|
|
|
|
|
|
var self = this;
|
|
|
|
self.canvas = createCanvas( $("#pencil"), 100, 100 );
|
|
|
|
self.ctx = self.canvas.getContext('2d');
|
|
|
|
|
2018-04-06 17:13:42 +00:00
|
|
|
// Sprites
|
2018-03-27 17:39:08 +00:00
|
|
|
self.sprite = new Sprite({
|
2018-04-24 18:12:38 +00:00
|
|
|
img: "pencil",
|
2018-03-27 17:39:08 +00:00
|
|
|
frames:3, sw:200, sh:200,
|
|
|
|
});
|
2018-04-06 17:13:42 +00:00
|
|
|
self.toolsSprite = new Sprite({
|
2018-04-24 18:12:38 +00:00
|
|
|
img: "sandbox_tools",
|
2018-04-06 17:13:42 +00:00
|
|
|
frames:6, sw:200, sh:200,
|
|
|
|
});
|
|
|
|
self.sprite.pivotX = self.toolsSprite.pivotX = 0;
|
|
|
|
self.sprite.pivotY = self.toolsSprite.pivotY = 200;
|
|
|
|
self.sprite.scale = self.toolsSprite.scale = 0.75;
|
|
|
|
|
2018-03-27 17:39:08 +00:00
|
|
|
var _size = 100;
|
|
|
|
var _margin = 10;
|
|
|
|
var _offset = 10;
|
|
|
|
self.colors = [
|
2018-04-18 18:02:27 +00:00
|
|
|
"#888",
|
2018-03-27 17:39:08 +00:00
|
|
|
"#000",
|
|
|
|
"#ff5555"
|
|
|
|
];
|
|
|
|
|
2018-03-27 19:20:22 +00:00
|
|
|
// Go to frame?
|
|
|
|
self.gotoFrame = function(frame){
|
|
|
|
self.sprite.gotoFrame(frame);
|
|
|
|
};
|
|
|
|
|
2018-03-27 17:39:08 +00:00
|
|
|
// Update
|
|
|
|
self.update = function(){
|
|
|
|
|
|
|
|
// Pencil's rotation
|
|
|
|
if(isNaN(self.x)) self.x=0;
|
|
|
|
if(isNaN(self.y)) self.y=0;
|
|
|
|
var xy_velocity = ((Mouse.x-self.x) + (Mouse.y-self.y))/10; // in down-right direction
|
|
|
|
var gotoRotation = -sigmoid(xy_velocity) * Math.TAU/8;
|
|
|
|
self.sprite.rotation = self.sprite.rotation*0.8 + gotoRotation*0.2;
|
2018-04-06 17:13:42 +00:00
|
|
|
self.toolsSprite.rotation = self.sprite.rotation;
|
2018-03-27 17:39:08 +00:00
|
|
|
|
|
|
|
// Pencil's offset
|
|
|
|
var gotoOffset = Mouse.pressed ? -8 : 10;
|
|
|
|
_offset = _offset*0.5 + gotoOffset*0.5;
|
|
|
|
|
|
|
|
// Update position
|
|
|
|
self.x = Mouse.x;
|
|
|
|
self.y = Mouse.y;
|
|
|
|
|
2018-03-27 19:20:22 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
// Draw
|
|
|
|
self.draw = function(){
|
|
|
|
|
2018-03-27 17:39:08 +00:00
|
|
|
// Move DOM there
|
2018-04-25 18:46:26 +00:00
|
|
|
self.canvas.style.left = (self.x-_margin) + "px";
|
|
|
|
self.canvas.style.top = (self.y-_size+_margin) + "px";
|
2018-03-27 17:39:08 +00:00
|
|
|
|
2018-04-06 17:13:42 +00:00
|
|
|
// Which sprite? (normal by default...)
|
|
|
|
var sprite = self.sprite;
|
|
|
|
var sim = slideshow.simulations.sims[0];
|
|
|
|
if(sim){
|
|
|
|
var frame = sim.connectorCutter.sandbox_state;
|
|
|
|
if(frame!=0){
|
|
|
|
sprite = self.toolsSprite;
|
|
|
|
sprite.gotoFrame(frame);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-27 17:39:08 +00:00
|
|
|
// Reset canvas
|
|
|
|
var ctx = self.ctx;
|
|
|
|
ctx.clearRect(0,0,self.canvas.width,self.canvas.height);
|
|
|
|
ctx.save();
|
|
|
|
ctx.translate(_margin*2, 200-_margin*2);
|
|
|
|
|
|
|
|
// Draw pencil's dot
|
|
|
|
if(!Mouse.pressed){
|
2018-03-27 19:20:22 +00:00
|
|
|
ctx.save();
|
2018-03-27 17:39:08 +00:00
|
|
|
ctx.fillStyle = self.colors[self.sprite.currentFrame];
|
|
|
|
ctx.beginPath();
|
2018-03-27 19:20:22 +00:00
|
|
|
ctx.globalAlpha = 0.5;
|
2018-04-18 18:02:27 +00:00
|
|
|
ctx.arc(0, 0, 5, 0, Math.TAU);
|
2018-03-27 17:39:08 +00:00
|
|
|
ctx.fill();
|
2018-03-27 19:20:22 +00:00
|
|
|
ctx.restore();
|
2018-03-27 17:39:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// Draw pencil
|
2018-04-06 17:13:42 +00:00
|
|
|
sprite.x = _offset;
|
|
|
|
sprite.y = -_offset;
|
|
|
|
sprite.draw(ctx);
|
2018-03-27 17:39:08 +00:00
|
|
|
|
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}
|