(C) 2014 Shintaro Seki
Download here and place the library files ("MagicCursor.js" and "MagicCursor-(ADDON).js") where you like,
or
via bower.
$ bower install MagicCursor.js --save
<!DOCTYPE html>
<title>A Simple Example</title>
<style>
html, body { height: 100%; width: 100%; }
body { margin: 0; padding: 0; background-color: #000; }
</style>
<body>
<script src="js/MagicCursor.js"></script>
<script>
new MagicCursor().watch();
</script>
</body>
new MagicCursor({
// Target DOM element.
target: document.body,
// Set true in some full screen applications (ex. reveal.js).
fullScreen: false,
// CSS z-index of canvas where the cursor is drawed.
zIndex: 5000,
// FPS of animation
fps: 30,
// Duration.
duration: 1, // [s]
// jQuery-style easing function.
easing: function(x, t, b, c, d) { return x; }, # linear
});
MagicCursor.Options.get("option-name")
> MagicCursor.Options.get("default")
draw: function (ctx, points, head, tail) {
duration: 1
easing: function (x, t, b, c, d) {
fillColor: Array[3]
fps: 30
fullScreen: false
lineColor: Array[3]
lineWidth: 2.5
radius: 7
...
Base option of all custom options.
# Base options
skeleton =
# Target DOM element.
target: document.body
# Set true in some full screen applications (ex. reveal.js).
fullScreen: false
# CSS z-index of canvas where the cursor is drawed.
zIndex: 5000
# FPS of animation.
fps: 30
# How long each curosr point is showed.
duration: 1 # [s]
# jQuery-style easing function.
# About easing functions: http://www.robertpenner.com/easing/
easing: (x, t, b, c, d) -> x # linear
# Draw function in each frame.
# - ctx: 2d context of canvas.
# - points: if `head` isn't null then [tail..., head] else [tail...]
# - head: The head point. [null|CursorPoint]
# - tail: The tail points, [Array]
draw: (ctx, points, head, tail) -> console.log "override me"
Default option of MagicCursor.
It's implemented as one of custom options.
MagicCursor.Options.add "default",
# Custum parameters.
# These params can be refered such as `this.param` in `draw()`.
fillColor: [100, 100, 255]
lineColor: [255, 255, 255]
radius: 7
lineWidth: 2.5
# Override draw().
draw: (ctx, points, head, tail) ->
drawRadius = (p, radius, lineWidth, frgba, srgba) ->
ctx.beginPath()
ctx.lineWidth = lineWidth
ctx.strokeStyle = "rgba(#{srgba.join(',')})"
ctx.fillStyle = "rgba(#{frgba.join(',')})"
ctx.arc p.x, p.y, radius, 0, Math.PI * 2
ctx.fill()
ctx.stroke()
for p in tail
t = 1 - p.param
t = 0 if t < 0
drawRadius p, @radius*t, @lineWidth*t, \
@fillColor.concat([t]), @lineColor.concat([t])
if head
drawRadius head, @radius, @lineWidth, \
@fillColor.concat([1]), @lineColor.concat([1])
// Set the option name as first argument.
new MagicCursor("default"); // is equivalent to `new MagicCursor()`
// Override some options
new MagicCursor("default", {
fps: 15,
duration: 2,
fillColor: [255, 100, 100]
});
MagicCursor.Options.add("new-custom-option-name", {
// fps, duration, etc. are inherited from the skeleton.
customOptionValue: something,
draw: function(ctx, points, head, tail) {
console.log(this.customOptionValue);
/* draw */
}
});
MagicCursor-line.coffee
MagicCursor.Options.add "line",
fps: 30
duration: 0.5
color: [255, 255, 255]
lineWidth: 2
radius: 5
draw: (ctx, points, head, tail) ->
if tail.length > 0
ctx.lineWidth = @lineWidth
ctx.strokeStyle = "rgb(#{@color.join(',')})"
ctx.beginPath()
ctx.lineTo p.x, p.y for p in points
ctx.stroke()
if head
ctx.lineWidth = 0
ctx.fillStyle = "rgb(#{@color.join(',')})"
ctx.beginPath()
ctx.arc head.x, head.y, @radius, 0, Math.PI * 2
ctx.fill()
new MagicCursor("line", {fps: 15}).watch();
MagicCursor.js is suitable for presentation.
This slide is just an example.