html交互式效果,HTML5交互式创意设计——Lightning_Web

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var NUM_PARTICLES = ((ROWS = 5) * (COLS = 11)),

LIMIT_MAX = Math.pow(400, 2),

LIMIT_MIN = Math.pow(50, 2),

CL_1 = 8 / LIMIT_MAX,

CL_2 = 10 / LIMIT_MAX,

CL_3 = 12 / LIMIT_MAX,

SL = 5 / LIMIT_MAX,

MARGIN = 150,

SPACING = 150,

COLOR = 220,

color,

PUSH = 0.95,

POP = 0.15,

tog = true,

container, ctx,

particle,

canvas,

p, list,

a, offset,

count = 0,

w, h,

mx, my,

dx, dy,

d, l, ds,

s,

newiterations, i, j, k,

ClearnData, Clearn;

c = [0, 0, 0]

bg = [13, 27, 34];

pt1 = {

x: 0,

y: 0

};

pt2 = {

x: 0,

y: 0

};

half = {

x: 0,

y: 0

};

ho = {

x: 0,

y: 0

};

iterations = [pt1, pt2];

particle = {

vx: 0,

vy: 0,

x: 0,

y: 0

};

function init() {

container = document.getElementById('container');

canvas = document.createElement('canvas');

ctx = canvas.getContext('2d');

list = [];

l = [];

ds = [];

w = canvas.width = (COLS - 1) * SPACING + MARGIN * 2;

h = canvas.height = (ROWS - 1) * SPACING + MARGIN * 2;

container.style.marginLeft = Math.round(w * -0.5) + 'px';

container.style.marginTop = Math.round(h * -0.5) + 'px';

ClearnData = (Clearn = ctx.createImageData(w, h)).data;

for (i = 0; i < NUM_PARTICLES; i++) {

p = Object.create(particle);

if (i % 2 == 0) {

p = Object.create(particle);

p.x = p.ox = MARGIN + SPACING * (i % COLS);

p.y = p.oy = MARGIN + SPACING * Math.floor(i / COLS);

}

list[i] = p;

l[i] = false;

ds[i] = 0;

if ((i + 1) % 4 == 0) {

ClearnData[i] = 255;

} else {

ClearnData[i] = 11;

}

}

container.addEventListener('mousemove', function(e) {

bounds = container.getBoundingClientRect();

mx = pt2.x = e.clientX - bounds.left;

my = pt2.y = e.clientY - bounds.top;

});

container.appendChild(canvas);

}

function step() {

if (tog = !tog) {

for (i = 0; i < NUM_PARTICLES; i = i + 2) {

p = list[i];

d = (dx = mx - p.x) * dx + (dy = my - p.y) * dy;

f = ((LIMIT_MAX + LIMIT_MIN) / 2) / d;

if (d < LIMIT_MAX && d > LIMIT_MIN) { //只针对半径小于限制的粒子

t = Math.atan2(dy, dx);

p.vx += f * Math.cos(t);

p.vy += f * Math.sin(t);

l[i] = true;

ds[i] = LIMIT_MAX - d;

}

p.x += p.vx + (p.ox - p.x) * POP; //PUSH向外步长，POP还原步长

p.y += p.vy + (p.oy - p.y) * POP;

p.vx = 0;

p.vy = 0;

}

} else { //显示粒子

ctx.putImageData(Clearn, 0, 0);

for (i = 0; i < NUM_PARTICLES; i = i + 2) {

p = list[i];

color = "#ffffff";

if (l[i] == true) {

pt1 = {

x: p.x,

y: p.y

};

c = [7 + ~~(ds[i] * CL_1), 12 - ~~(ds[i] * CL_2), 15 - ~~(ds[i] * CL_3)];

color = '#' + c[0].toString(16) + '0' + c[1].toString(16) + '0' + c[2].toString(16) + '0';

s = Math.max(1, ~~(ds[i] * SL));

lightning();

l[i] = false;

}

ctx.strokeStyle = '#000000';

ctx.lineWidth = 5;

ctx.beginPath();

ctx.arc(~~p.x, ~~p.y, 20, 0, Math.PI * 2, true);

ctx.closePath();

ctx.fillStyle = color;

ctx.fill();

ctx.stroke();

}

}

requestAnimationFrame(step);

}

function lightning() {

iterations = [pt1, pt2];

for (k = 0; k < 8; k++) { //二分法取点

newiterations = [iterations[0]]

for (j = 1; j < iterations.length; j++) {

newiterations.push(getRandMidpoint(iterations[j - 1], iterations[j], 100 / (k * k + 1)))

newiterations.push(iterations[j])

}

iterations = newiterations.concat([])

}

ctx.beginPath();

ctx.moveTo(iterations[0].x, iterations[0].y);

ctx.lineWidth = s;

ctx.strokeStyle = color;

for (k = 1; k < iterations.length; k++) {

ctx.lineTo(iterations[k].x, iterations[k].y);

}

ctx.stroke()

ctx.closePath()

}

function getRandMidpoint(pa, pb, range) {

a = Math.atan2(pb.y - pa.y, pb.x - pa.x) + Math.PI / 2;

half = {

y: (pb.y - pa.y) / 2 + pa.y,

x: (pb.x - pa.x) / 2 + pa.x

};

offset = Math.random() * range - range / 2;

ho = {

x: Math.cos(a) * offset + half.x,

y: Math.sin(a) * offset + half.y

}

return ho;

}

init();

step();