JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
$(function() {
var myCanvas, context, width, height;
var lines = [],
numberOfLines = 12;
var colours = ['#FFD800', '#FF6A00', '#FF0000', '#0094FF', '#0026FF', '#4800FF', '#7FFF8E', '#B6FF00', '#4CFF00', '#FFFFFF'];
var Line = function() {
return {
x: 0,
y: 0,
size: 4,
colour: '#FFFFFF',
distance: 1,
speed: 30,
increment: 0.8,
turn: 45,
wobble: 7,
rotation: random(0, 359),
randomVariance: 0,
opacity: 0.5,
clockwise: true,
glow: true,
interval: {},
tick: function() {
var oldX = this.x;
var oldY = this.y;
// Random wander
if (this.randomVariance) {
this.x += random((-1 * this.randomVariance) * this.distance, this.randomVariance * this.distance);
this.y += random((-1 * this.randomVariance) * this.distance, this.randomVariance * this.distance);
}
if (this.clockwise)
this.rotation -= this.turn;
else
this.rotation += this.turn;
// Wobble (point at which lines bend sharply)
if (this.wobble) {
if (this.rotation < 0) this.rotation += this.wobble;
if (this.rotation >= this.wobble) this.rotation -= this.wobble;
}
this.x = this.x + this.distance * Math.sin(this.rotation);
this.y = this.y + this.distance * Math.cos(this.rotation);
if (this.glow) {
drawLine(oldX, oldY, this.x, this.y, this.size * 6, this.colour, 0.03);
drawLine(oldX, oldY, this.x, this.y, this.size * 4, this.colour, 0.05);
}
drawLine(oldX, oldY, this.x, this.y, this.size, this.colour, this.opacity);
this.distance += this.increment;
return this;
},
init: function(details) {
for (var x in details) {
this[x] = details[x];
}
var self = this;
this.interval = setInterval(function() {
self.tick();
}, this.speed);
return this;
},
stop: function() {
clearInterval(this.interval);
}
};
};
if ($("canvas").length > 0) {
myCanvas = $("#canvas")[0];
context = myCanvas.getContext("2d");
resizeCanvas();
eventListeners();
startAnimation();
}
function resizeCanvas() {
myCanvas.width = $("canvas").width();
myCanvas.height = $("canvas").height();
width = myCanvas.width;
height = myCanvas.height;
}
$(window).on('resize', resizeCanvas);
function eventListeners() {
$('#submit').on('click', function() {
var options = {};
$('#controls input[type="text"]').each(function() {
options[$(this).attr('id')] = checkNumber($(this).val());
});
numberOfLines = options.numberOfLines;
var shareString = '';
for (var x in options) {
shareString += options[x] + '|';
}
$('#sharecode').val(shareString);
startAnimation(options);
return false;
});
$('#random').on('click', function() {
randomSettings();
});
$('#hide').on('click', function() {
$('#controls').hide();
});
$('#sharecode')
.on('paste', function() {
setTimeout(function() {
var shareString = $('#sharecode').val().split('|');
$('#controls input[type="text"]').not('#sharecode').each(function(x) {
$(this).val(shareString[x]);
});
$('#submit').trigger('click');
}, 100);
})
.on('focus', function() {
$(this).select();
});
}
function randomSettings() {
var settings = {
numberOfLines: random(2, 12),
size: random(1, 10),
distance: random(1, 30),
speed: random(2, 6) * 10,
increment: random(1, 10) / 10,
turn: random(1, 200),
wobble: random(1, 400),
opacity: random(3, 10) / 10
};
for (var x in settings) {
$('#' + x).val(settings[x]);
}
$('#submit').trigger('click');
}
function startAnimation(options) {
options = options ? options : {};
options.x = width / 2;
options.y = height / 2;
context.clearRect(0, 0, width, height);
for (var x = 0; x < lines.length; x++) {
lines[x].stop();
}
lines = [];
for (var y = 0; y < numberOfLines; y++) {
options.colour = colours[random(0, colours.length - 1)];
options.rotation = (360 / numberOfLines) * y;
lines.push(
Line().init(options)
);
}
}
function drawPoint(x, y, size, colour) {
context.fillStyle = colour;
context.fillRect(x, y, size, size);
}
function drawLine(x1, y1, x2, y2, size, colour, opacity) {
setOpacity(opacity);
context.beginPath();
context.strokeStyle = colour;
context.lineWidth = size;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
context.closePath();
}
function setOpacity(alpha) {
context.globalAlpha = alpha;
}
function random(min, max) {
return (Math.floor(Math.random() * ((max - min) + 1) + min));
}
function checkNumber(n) {
n = parseFloat(n);
if (isNaN(n) || n < 0) n = 0;
return n;
}
});