-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
90 lines (88 loc) · 2.56 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
$(document).ready( function() {
var n = 16;
clr = "#D3D3D3"
mode = 'normal';
$('#container').height($('#container').width() + 'px');
function generate(n) {
for (var i = n; i > 0; i--) {
for (var j = n; j > 0; j--) {
$('#container').append("<div class='box' data-custom='no' data-per='-0.1'></div>");
}
}
var s = 100/n;
s = s + '%';
$('.box').width(s);
$('.box').height($('.box').width() + 'px');
$('.box').css("box-sizing","border-box");
}
generate(n);
$('body').append("<p>Mode: Normal</p>");
$('#reset').click(function() {
n = prompt("Tell the size of one side of the grid", "16");
$('#container').empty();
generate(n);
mode = 'normal';
$('p').remove();
$('body').append("<p>Mode: Normal</p>");
$('.box').hover(mouseIn, mouseOut);
});
$('#random').click(function() {
$('.box').css("background-color","LightGray");
$('.box').data("custom", "no");
mode = 'random';
$('p').remove();
$('body').append("<p>Mode: Random</p>");
$('.box').hover(mouseIn, mouseOut);
});
$('#opac').click(function() {
$('.box').css("background-color","LightGray");
$('#container').empty();
generate(n);
mode = 'opac';
$('p').remove();
$('body').append("<p>Mode: Opacity</p>");
$('.box').hover(mouseIn, mouseOut);
});
$('#trail').click(function() {
$('.box').css("background-color","LightGray");
mode = 'trail';
$('p').remove();
$('body').append("<p>Mode: Trail</p>");
$('.box').hover(mouseIn, mouseOut);
});
function shadeColor(color, percent) {
var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
}
function mouseIn() {
if(mode == 'normal' || mode == 'trail') {
$(this).css("background-color", "black");
}
else if(mode == 'opac') {
var prc = $(this).data("per");
if (prc >= -1) {
var col = shadeColor(clr,prc);
$(this).css("background-color", col);
}
prc += -0.1;
$(this).data('per', prc);
}
else if (mode == 'random') {
if ($(this).data("custom") == "no") {
$(this).data("custom", "yes");
var r =Math.floor((Math.random()*256));
var g =Math.floor((Math.random()*256));
var b =Math.floor((Math.random()*256));
var c = 'rgb('+r+','+g+','+b+')';
$(this).css("background-color", c);
}
}
}
function mouseOut() {
if(mode == 'trail') {
console.log('test');
$(this).stop().animate({ backgroundColor: "#D3D3D3" }, 300);
}
}
$('.box').hover(mouseIn, mouseOut);
});