JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

/* App

*/

var app = {

presets: [

/* Respectively

{scale | speed | cursor | width} | {composite | night} | {shader | rr | rg | rb | ra | r1 | gr | gg | gb | ga | g1 | br | bg | bb | ba | b1 | ar | ag | ab | aa | a1}

*/

{

name: 'Default',

value: '4.51 31.58 285.71 10 normal 0 1 0 0 0 1 0 0 0 0 0.5 0.8 0 0 0 0 0 -0 0 0 40 -5'

}, {

name: 'Fluid',

value: '4.51 31.58 285.71 10 multiply 0 1 0.7 -1 1 0 1.3 0 -1 1 0 0 1 -1 1 -1 0 0 0 0 30 -5'

}, {

name: 'Pink',

value: '5 75 2000 10 difference 1 1 0 0 0 0 .6 0 0 0 .5 -.3 0 0 0 2 0 0 0 0 30 -5'

}, {

name: 'Fire',

value: '5 20 175 10 multiply 1 1 0 0 1 1 0 0 1 1 0 0 0 0 0 0 0 0 0 0 10 -5'

}, {

name: 'Original',

value: '4.51 31.58 285.71 10 multiply 0 0 0.7 -1 1 0 1.3 0 -1 1 0 0 1 -1 1 -1 0 0 0 0 30 -5'

}, {

name: 'Sharp',

value: '4.51 31.58 285.71 10 multiply 0 1 0 0 0 0 0 0 1.1 0 0 0 1 -1 -0.7 0 0.1 0 0 0 100 -20'

}, {

name: 'Neon',

value: '4.51 31.58 285.71 10 multiply 1 1 0 0 0 0 1 0 -1 1 2.8 -1 0.7 0.3 -0.5 0.5 1 0 0 0 30 -5'

}, {

name: 'Hot',

value: '4.51 31.58 285.71 10 multiply 1 1 0 0 0 1.6 2 0 0 2 5 -1.1 0 1.3 0 0 0.1 0 0 0 30 -5'

}, {

name: 'Energy',

value: '3.38 -75.94 436.09 3 screen 1 1 0 0 0 1.7 0.8 0 0 2 5 -1.1 0 1.3 0 0 0.1 0.7 0 0 10 -0.6'

}

],

config: {}, // Nothing here, since the first preset in the list is loaded by default.

storage: {

dragging: false,

isdemo: true,

path: [],

shapes: [],

last: null,

composites: ["normal", "multiply", "screen", "overlay", "darken", "lighten",

"color-dodge", "color-burn", "hard-light", "soft-light",

"difference", "exclusion", "hue", "saturation", "color",

"luminosity", "clear", "copy", "destination", "source-over",

"destination-over", "source-in", "destination-in", "source-out",

"destination-out", "source-atop", "destination-atop", "xor", "lighter"

],

order: ['scale', 'speed', 'cursor', 'linewidth', 'composite', 'night', 'shader',

'rr', 'rg', 'rb', 'ra', 'r1',

'gr', 'gg', 'gb', 'ga', 'g1',

'br', 'bg', 'bb', 'ba', 'b1',

'ar', 'ag', 'ab', 'aa', 'a1'

]

}

}

/* Menu

*/

$('.trigger-menu').on('click', function(e) {

e.stopPropagation();

$('#wrapper').toggleClass('wrapped');

})

$('.trigger-clear').on('click', function(e) {

app.storage.shapes = [];

})

$('.trigger-save').on('click', function() {

if (typeof(Storage) === "undefined")

return alert('Sorry! No Web Storage support...');

var presets = JSON.parse(localStorage['presets'] || null) || [],

name = prompt('Name this preset', 'preset_' + presets.length),

values = [];

if (!name)

return;

var order = app.storage.order;

app.storage.order.forEach(function(input) {

if (!$('#' + input).length)

return;

var $input = $('#' + input);

if ($input.is('[type="checkbox"]'))

values.push($input.prop('checked') ? '1' : '0');

else

values.push($input.val());

})

if (values.length != order.length)

return alert('Sorry! The configuration length & input order length doesn\'t match...');

presets.push({

name: name,

value: values.join(' ')

});

localStorage.setItem('presets', JSON.stringify(presets));

$('#preset').append('' + name + '');

});

$('.canvas').on('click', function() {

$('#wrapper').removeClass('wrapped');

})

/* Controls (sidebar)

*/

if (typeof Storage !== 'undefined')

app.presets = app.presets.concat(JSON.parse(localStorage['presets'] || null) || []);

app.presets.forEach(function(preset, index) {

$('#preset').append('' + preset.name + '');

});

app.storage.composites.forEach(function(composite) {

$('#composite').append('' + composite + '');

})

$('[data-config]').on('change', function() {

app.config[$(this).data('config')] = $(this).val();

});

$('[data-config="width"]').on('change', function() {

document.getElementById('width').setAttribute('stdDeviation', $(this).val());

});

$('[data-shader]').on('change', function() {

var order = ['r', 'g', 'b', 'a', '1'],

value = [];

for (var x = 0; x < 4; x++) {

for (var y = 0; y < 5; y++) {

if (!$('#' + order[x] + order[y]).length)

continue;

value.push(parseFloat(Number($('#' + order[x] + order[y]).val()).toFixed(2)));

}

}

document.getElementById('matrix').setAttribute('values', value.join(' '));

});

$('#shader').on('change', function() {

$(this).prop('checked') ? $('body').addClass('has-shader') : $('body').removeClass('has-shader');

});

$('#night').on('change', function() {

$(this).prop('checked') ? $('body').addClass('has-night') : $('body').removeClass('has-night');

});

function handleTouche(e) {

var original = e.originalEvent;

if (original && window.TouchEvent && original instanceof TouchEvent) {

if (original.changedTouches && original.changedTouches.length)

return {

x: original.changedTouches[0].clientX,

y: original.changedTouches[0].clientY

};

else if (original.targetTouches && original.targetTouches.length)

return {

x: original.targetTouches[0].clientX,

y: original.targetTouches[0].clientY

};

} else {

return {

x: e.clientX,

y: e.clientY

};

}

}

$('.slider').each(function() {

var $slider = $(this),

$input = $(this).find('input'),

min = typeof $(this).data('min') === 'undefined' ? 1 : $(this).data('min'),

max = typeof $(this).data('max') === 'undefined' ? 100 : $(this).data('max'),

step = $(this).data('step') || 0,

acc = $(this).data('accuracy') || 0,

vertical = $(this).hasClass('slider-vertical');

var $thumb = $(this).find('.slider-thumb');

$thumb.on('mousedown touchstart', function() {

clearTimeout(app.storage.timeoutDragging);

app.storage.dragging = $input;

});

$input.data('update', function(e, animate, def) {

if (e) {

var coordinates = handleTouche(e);

var mouse = vertical ? (coordinates.y - $slider.offset().top) / $slider.height() : (coordinates.x - $slider.offset().left) / $slider.width(),

value = min + ((vertical ? 1 - mouse : mouse) * (max - min));

value = +(Math.max(min, Math.min(max, step ? Math.round(value / step) * step : value))).toFixed(acc);

} else {

var value = def ? def : $input.val();

}

var percent = (((value - min) / (max - min)) * 100) + '%';

if (animate) {

vertical ? $thumb.animate({

'bottom': percent

}, {

duration: 1000

}) : $thumb.animate({

'left': percent

}, {

duration: 1000,

step: function(i) {

var a = (min + (i / 100) * (max - min)).toFixed(acc);

$input.val(a).trigger('change');

$('label[for="' + ($input.attr('id')) + '"]').length && $('label[for="' + ($input.attr('id')) + '"]').find('span').html(a);

},

complete: function() {

$input.val(value).trigger('change');

$('label[for="' + ($input.attr('id')) + '"]').length && $('label[for="' + ($input.attr('id')) + '"]').find('span').html(value);

}

});

} else {

vertical ? $thumb.css({

'bottom': percent

}) : $thumb.css({

'left': percent

});

$('label[for="' + ($input.attr('id')) + '"]').length && $('label[for="' + ($input.attr('id')) + '"]').find('span').html(value);

$input.val(value).trigger('change');

}

});

$(this).on('click', function(e) {

if (app.storage.dragging)

return;

$input.data('update')(e, true);

})

});

$(document).on('mouseup', function() {

app.storage.timeoutDragging = setTimeout(function() {

app.storage.dragging = false;

}, 100);

}).on('mousemove', function(e) {

if (!app.storage.dragging)

return;

var $input = app.storage.dragging;

$input.data('update')(e);

})

$('#preset').on('change', function() {

var order = app.storage.order,

value = $(this).val();

value.split(' ').forEach(function(v, i) {

if (!order[i] || !$('#' + order[i]).length)

return;

var $input = $('#' + order[i]);

if ($input.data('update')) {

$input.data('update')(null, order[i] == 'cursor' ? false : true, v);

} else if ($input.is('[type="number"]')) {

$({

a: $input.val()

}).animate({

a: v

}, {

duration: 1000,

step: function(i) {

$input.val(i.toFixed(1)).trigger('change');

},

complete: function() {

$input.val(v).trigger('change');

}

});

} else if ($input.is('[type="checkbox"]')) {

$input.prop('checked', v == 1 ? true : false).trigger('change');

} else {

$input.val(v).trigger('change');

}

});

}).trigger('change');

/* Drawing

*/

var temporary = document.querySelector('canvas#temporary'),

temporaryCtx = temporary.getContext('2d'),

render = document.querySelector('canvas#render'),

renderCtx = render.getContext('2d');

render.width = temporary.width = window.innerWidth;

render.height = temporary.height = window.innerHeight;

temporaryCtx.strokeStyle = "#ccc";

$(render).on('mousedown touchstart', function(e) {

if (app.storage.isdemo) {

app.storage.shapes = [];

app.storage.isdemo = false;

}

var coordinates = handleTouche(e);

app.storage.path = [coordinates];

temporaryCtx.beginPath();

temporaryCtx.moveTo(coordinates.x, coordinates.y);

}).on('mousemove touchmove', function(e) {

if (!app.storage.path.length)

return;

var now = +new Date();

var last = app.storage.path[app.storage.path.length - 1];

var coordinates = handleTouche(e);

if (last.x == coordinates.x && last.y == coordinates.y)

return;

if (now - app.storage.last > 50 && Math.sqrt((last.x - coordinates.x) * (last.x - coordinates.x) + (last.y - coordinates.y) * (last.y - coordinates.y)) > 10) {

app.storage.path.push({

x: coordinates.x,

y: coordinates.y

});

app.storage.last = now;

}

temporaryCtx.lineTo(coordinates.x, coordinates.y);

temporaryCtx.stroke();

temporaryCtx.beginPath();

temporaryCtx.moveTo(coordinates.x, coordinates.y);

}).on('mouseup touchend touchcancel touchleave mouseleave', function(e) {

if (!app.storage.path.length)

return;

var coordinates = handleTouche(e);

temporaryCtx.lineTo(coordinates.x, coordinates.y);

temporaryCtx.stroke();

app.storage.path.push({

x: coordinates.x,

y: coordinates.y

});

temporary.width = temporary.width;

temporaryCtx.strokeStyle = "#ccc";

app.storage.shapes.push(app.storage.path);

app.storage.path = [];

});

function drawPath(time, color, offset) {

renderCtx.strokeStyle = color;

var offset = offset || 0;

app.storage.shapes.forEach(function(path, index) {

renderCtx.beginPath();

var shapeid = index;

path.forEach(function(curve, index) {

var thisVariation = app.config.scale * Math.sin(((index * app.config.cursor + time) / (path.length * app.config.speed)) + offset);

var thisCurve = {

x: curve.x + thisVariation,

y: curve.y + thisVariation

};

if (!index)

renderCtx.moveTo(thisCurve.x, thisCurve.y);

else if (index != path.length - 1) {

var nextVariation = app.config.scale * Math.sin((((index + 1) * app.config.cursor + time) / (path.length * app.config.speed)) + offset);

var nextCurve = {

x: path[index + 1].x + nextVariation,

y: path[index + 1].y + nextVariation

};

var xc = (thisCurve.x + nextCurve.x) / 2;

var yc = (thisCurve.y + nextCurve.y) / 2;

renderCtx.quadraticCurveTo(thisCurve.x, thisCurve.y, xc, yc);

}

});

renderCtx.stroke();

});

}

function animate(time) {

render.width = render.width;

renderCtx.globalCompositeOperation = app.config.composite;

renderCtx.lineWidth = 5;

renderCtx.lineCap = "round";

drawPath(time, 'rgb(255, 0, 0)', 1000);

drawPath(time, 'rgb(0, 255, 0)', 2000);

drawPath(time, 'rgb(0, 0, 255)', 3000);

return requestAnimationFrame(animate);

}

animate();

$(window).resize(function() {

render.width = temporary.width = window.innerWidth;

render.height = temporary.height = window.innerHeight;

});

function demo() {

var shapes = [

[{

"x": 585,

"y": 125

}, {

"x": 588,

"y": 136

}, {

"x": 592,

"y": 218

}, {

"x": 594,

"y": 296

}, {

"x": 595,

"y": 307

}],

[{

"x": 580,

"y": 133

}, {

"x": 591,

"y": 129

}, {

"x": 668,

"y": 128

}, {

"x": 725,

"y": 186

}, {

"x": 713,

"y": 243

}, {

"x": 610,

"y": 284

}, {

"x": 533,

"y": 294

}, {

"x": 524,

"y": 290

}],

[{

"x": 756,

"y": 123

}, {

"x": 758,

"y": 133

}, {

"x": 764,

"y": 203

}, {

"x": 774,

"y": 279

}, {

"x": 776,

"y": 302

}, {

"x": 776,

"y": 303

}],

[{

"x": 764,

"y": 121

}, {

"x": 773,

"y": 115

}, {

"x": 829,

"y": 110

}, {

"x": 875,

"y": 133

}, {

"x": 884,

"y": 152

}, {

"x": 850,

"y": 161

}, {

"x": 806,

"y": 170

}, {

"x": 806,

"y": 181

}, {

"x": 849,

"y": 243

}, {

"x": 890,

"y": 296

}, {

"x": 895,

"y": 302

}],

[{

"x": 922,

"y": 288

}, {

"x": 926,

"y": 278

}, {

"x": 949,

"y": 217

}, {

"x": 972,

"y": 135

}, {

"x": 979,

"y": 112

}, {

"x": 986,

"y": 120

}, {

"x": 1028,

"y": 209

}, {

"x": 1073,

"y": 281

}, {

"x": 1088,

"y": 314

}, {

"x": 1088,

"y": 314

}],

[{

"x": 951,

"y": 245

}, {

"x": 961,

"y": 244

}, {

"x": 1037,

"y": 238

}, {

"x": 1045,

"y": 237

}],

[{

"x": 1053,

"y": 108

}, {

"x": 1058,

"y": 121

}, {

"x": 1096,

"y": 194

}, {

"x": 1130,

"y": 251

}, {

"x": 1137,

"y": 268

}, {

"x": 1139,

"y": 257

}, {

"x": 1151,

"y": 210

}, {

"x": 1159,

"y": 183

}, {

"x": 1182,

"y": 220

}, {

"x": 1211,

"y": 256

}, {

"x": 1225,

"y": 274

}, {

"x": 1230,

"y": 264

}, {

"x": 1275,

"y": 162

}, {

"x": 1299,

"y": 92

}, {

"x": 1300,

"y": 89

}]

],

position = {

x: null,

y: null,

w: null,

h: null

}

shapes.forEach(function(shape) {

shape.forEach(function(point) {

position.x = Math.min(point.x, position.x || point.x);

position.y = Math.min(point.y, position.y || point.y);

position.w = Math.max(point.x, position.w || point.x);

position.h = Math.max(point.y, position.h || point.y);

});

});

var rW = (window.innerWidth * 0.75) / (position.w - position.x),

rH = (window.innerHeight * 0.75) / (position.h - position.y),

wH = (window.innerWidth / 2 - ((position.w - position.x) * rH) / 2),

hH = (window.innerHeight / 2 - ((position.h - position.y) * rH) / 2),

wW = (window.innerWidth / 2 - ((position.w - position.x) * rW) / 2),

hW = (window.innerHeight / 2 - ((position.h - position.y) * rW) / 2);

shapes.forEach(function(shape) {

shape.forEach(function(point) {

if (rH < rW) {

point.x = (point.x - position.x) * rH + wH;

point.y = (point.y - position.y) * rH + hH;

} else {

point.x = (point.x - position.x) * rW + wW;

point.y = (point.y - position.y) * rW + hW;

}

});

});

app.storage.shapes = shapes;

}

demo();