Here is a (literally) 5 minute plugin I tossed together using the Illuminated library (
Linky)
Here is the result:
DEMO (Note that the illuminated lib is baked into the compiled.js file along with Impact)
Here is the plugin:
ig.module('plugins.illuminated')
.defines(function () {
var Lamp = illuminated.Lamp
, Vec2 = illuminated.Vec2
, DiscObject = illuminated.DiscObject
, RectangleObject = illuminated.RectangleObject
, Lighting = illuminated.Lighting
, DarkMask = illuminated.DarkMask;
Illuminated = ig.Class.extend({
maskColor:'rgba(0,0,0,0.9)',
darkMask:null,
canvas:null,
context:null,
light1:null,
light2:null,
disc:null,
rect:null,
objects:null,
lighting1:null,
lighting2:null,
init:function () {
var canvas = ig.$('#canvas');
var ctx = canvas.getContext('2d');
this.light1 = new Lamp({
position: new Vec2(100,250),
distance:400,
diffuse:0.8,
color:'rgba(239,184,134,1)',
radius:100,
samples:6,
angle:36,
roughness:0.5,
size:32
});
this.light2 = new Lamp({
position: new Vec2(300,50),
distance:400,
diffuse:0.8,
color:'#CFF',
radius:100,
samples:6,
angle:36,
roughness:0.5,
size:32
});
this.disc = new DiscObject({ center:new Vec2(100, 100), radius:30 });
this.rect = new RectangleObject({ topleft:new Vec2(250, 200), bottomright:new Vec2(350, 250) });
this.objects = [ this.disc, this.rect ];
this.lighting1 = new Lighting({
light:this.light1,
objects:this.objects
});
this.lighting2 = new Lighting({
light:this.light2,
objects:[ this.disc, this.rect ]
});
this.darkMask = new DarkMask({ lights:[this.light1, this.light2] });
this.lighting1.compute(640, 480);
this.lighting2.compute(640,480);
this.darkMask.compute(640, 480);
ctx.globalCompositeOperation = "lighter";
this.lighting1.render(ctx);
this.lighting2.render(ctx);
ctx.globalCompositeOperation = "source-over";
this.darkMask.render(ctx);
},
update:function () {
this.runDemo();
},
checkChanged: function(){
if (ig.input.pressed('leftClick')) {
this.light1.position.x = ig.input.mouse.x;
this.light1.position.y = ig.input.mouse.y;
this.darkMask = new DarkMask({ lights:[this.light1, this.light2] });
this.lighting1.compute(640, 480);
this.lighting2.compute(640, 480);
this.darkMask.compute(640, 480);
ig.system.context.globalCompositeOperation = "lighter";
this.lighting1.render(ig.system.context);
this.lighting2.render(ig.system.context);
ig.system.context.globalCompositeOperation = "source-over";
this.darkMask.render(ig.system.context);
}
if (ig.input.pressed('rightClick')) {
this.light2.position.x = ig.input.mouse.x;
this.light2.position.y = ig.input.mouse.y;
this.darkMask = new DarkMask({ lights:[this.light1, this.light2] });
this.lighting1.compute(640, 480);
this.lighting2.compute(640, 480);
this.darkMask.compute(640, 480);
ig.system.context.globalCompositeOperation = "lighter";
this.lighting1.render(ig.system.context);
this.lighting2.render(ig.system.context);
ig.system.context.globalCompositeOperation = "source-over";
this.darkMask.render(ig.system.context);
}
},
runDemo:function () {
this.checkChanged();
ig.system.context.globalCompositeOperation = "lighter";
this.lighting1.render(ig.system.context);
this.lighting2.render(ig.system.context);
ig.system.context.globalCompositeOperation = "source-over";
}
})
});
Obviously you wouldn't build your plugin like how I built this one, but the idea is the same. In this case, I'm using the Impact plugin to set-up the lights and the dark mask and then calling the illuminated library to do all of the rendering/heavy math, passing in the Impact canvas as a parameter so it all just
works without having to wrap an external lib as a module or doing any modification to the lib. If this was to be used outside of a demonstration, I'd add methods to make the library and impact work better together: such as add/remove lights, dynamically add objects, etc.
But this is how I go about creating a plugin for an external library. I hope I helped :)