alert("Tesla coil - an electrical resonant transformer circuit used to produce high-voltage, low-current, high frequency alternating-current electricity. In other words, it's a fancy lightning bolt generator. Move your mouse/finger around the coil to feel the spark jumping from it to your mouse/finger. Moving your mouse over the table chars it and getting close to fluorescent lamp lights it up partially. Don't electrocute yourself and have fun! ^^"); var ctx, back, h, w, frame = 0, mousex, mousey, mouseOnScreen = false, minx, maxx, miny, maxy, randx, randy, char = 0, seglength = 0; var charx = [], chary = [], charcol = [], charlife = [], lampx = []; function start() { var canvas = document.getElementById('canvas'); var background = document.getElementById('background'); w = canvas.width = background.width = window.innerWidth; h = canvas.height = background.height = window.innerHeight; ctx = canvas.getContext('2d'); back = background.getContext('2d'); //-----------------------------------------------draw teslacoil //table back.fillStyle = '#4c3323'; back.fillRect(0, h * 0.8, w /2 +1, h * 0.2); back.fillStyle = '#472f21'; back.fillRect(w / 2, h * 0.8, w, h * 0.2); //coil back.fillStyle = '#bc4b12'; back.fillRect(w / 2 - 20, h / 2, 21, h * 0.8 - h / 2 ); back.fillStyle = '#824018'; back.fillRect(w / 2, h / 2, 20, h * 0.8 - h / 2 ); //coil "wires" back.strokeStyle = '#592c11'; back.lineWidth = 1; var y = h/2 + 5, step = 0; while(y < h * 0.8) { back.beginPath(); back.moveTo(w / 2 - 20, h /2 + step*5); back.lineTo(w / 2 + 20, y); back.stroke(); step++; y += 5; } //head right back.beginPath(); back.fillStyle = '#494951'; back.moveTo(w / 2 + 50, h / 2 - 40); back.arc(w / 2 + 50, h / 2 - 20, 20, -Math.PI/2, Math.PI/2); back.moveTo(w / 2 + 50, h / 2 - 40); back.lineTo(w / 2, h / 2 - 40); back.lineTo(w / 2, h / 2); back.lineTo(w / 2 + 50, h / 2); back.fill(); //head left back.beginPath(); back.fillStyle = '#555560'; back.moveTo(w / 2 - 50, h / 2 - 40); back.arc(w / 2 - 50, h / 2 - 20, 20, Math.PI/2, -Math.PI/2); back.moveTo(w / 2 - 50, h / 2 - 40); back.lineTo(w / 2 + 1, h / 2 - 40); back.lineTo(w / 2 + 1, h / 2); back.lineTo(w / 2 - 50, h / 2); back.fill(); //stand back.beginPath(); back.moveTo(w / 2 - 40, h * 0.8 - 30); back.lineTo(w / 2 - 40, h * 0.8); back.lineWidth = 5; back.strokeStyle = '#3c3d42'; back.lineCap = 'round'; back.stroke(); back.beginPath(); back.moveTo(w / 2 + 40, h * 0.8 - 30); back.lineTo(w / 2 + 40, h * 0.8); back.stroke(); back.fillStyle = '#65666d'; back.fillRect(w / 2 - 50, h * 0.8 - 5, 51, 5); back.fillRect(w / 2 - 50, h * 0.8 - 20, 51, 5); back.fillStyle = '#444444'; back.fillRect(w / 2, h * 0.8 - 5, 50, 5); back.fillRect(w / 2, h * 0.8 - 20, 50, 5); //fluorescent lamp back.beginPath(); back.fillRect(w - w * 0.2, 0, 20, 40); back.fillRect(w - w * 0.8 - 20, 0, 20, 40); seglength = (w*0.9)/20; for(var i = 0; i < 20; i++) lampx[i] = w * 0.05 + seglength * (i); maxx = w / 2 + 50; minx = w / 2 - 50; maxy = h / 2; miny = h / 2 - 40; draw(); } function draw() { frame++; ctx.clearRect(0, 0, w, h); ctx.save(); //---------------------------------------------------lightning generation //random points in tesla if(mouseOnScreen) { randx = Math.floor(Math.random() * (maxx - minx + 1) + minx); randy = Math.floor(Math.random() * (maxy - miny + 1) + miny); mouseOnScreen = false; } //count distance between nods, draw lightning ctx.moveTo(randx,randy); var distx = (mousex - randx) / 10; var disty = (mousey - randy) / 10; ctx.beginPath(); ctx.moveTo(randx, randy); for(var i = 0; i < 10; i++) { var col = Math.floor(Math.random() * 4); switch(col) { case 1: ctx.strokeStyle = 'rgba(125, 249, 255,0.5)'; break; case 2: ctx.strokeStyle = 'rgba(125, 159, 255,0.5)'; break; case 3: ctx.strokeStyle = 'rgba(190, 125, 255,0.5)'; break; case 4: ctx.strokeStyle = 'rgba(125, 255, 220,0.5)'; break; } if(i<5) ctx.lineWidth=3; else if(i<8) ctx.lineWidth=2; else ctx.lineWidth=1; var offx = Math.floor(Math.random() * 20); var offy = Math.floor(Math.random() * 20); offx *= Math.random() > 0.5? -1 : 1; offy *= Math.random() > 0.5? -1 : 1; ctx.lineTo(randx + distx * (i + 1) + offx, randy + disty * (i + 1) + offy); ctx.stroke(); } //------------------------------------------------------char generation //coordinate creation ctx.beginPath(); if(mousey > h * 0.8 + 5 && frame % 5 === 0) { charx[char] = mousex; chary[char] = mousey; charlife[char] = 20 + Math.floor(Math.random() * 10); char++; } //color update if(frame % 5 === 0) { for(var o = 0; o < char; o++) { charcol[o] = Math.floor(Math.random() * 172 + 66); if(charlife[o]>-100) charlife[o]--; } } //animation update for(var u = 0;u < char; u++) { ctx.beginPath(); ctx.arc(charx[u], chary[u], 5, 0 ,Math.PI*2); if(charlife[u] > 0) ctx.fillStyle = 'rgb(244,' + charcol[u] + ',66)'; ctx.fill(); if(charlife[u] < 0 ) { ctx.fillStyle = '#000000'; ctx.fill(); } if(charlife[u] < 0 && charlife[u] > -10) { ctx.beginPath(); ctx.ellipse(charx[u] - 5, chary[u] - 3, 5, 10, 0 , Math.floor(Math.random() * 10), Math.PI * 2); ctx.fillStyle = 'rgba(100, 100, 100,0.5)'; ctx.fill(); ctx.ellipse(charx[u] + 3, chary[u] + 2, 5, 10, Math.PI / Math.floor(Math.random() * 10), 0, Math.PI * 2); ctx.fillStyle = 'rgba(40, 40, 40,0.5)'; ctx.fill(); ctx.ellipse(charx[u], chary[u] - 5, 5, 10, Math.PI / Math.floor(Math.random() * 10), 0, Math.PI * 2); ctx.fillStyle = 'rgba(0, 0, 0,0.5)'; ctx.fill(); } //anti-lag (removes certain burn marks if limit exceeded) if(char > 200) { char--; charx.splice(0, 1); chary.splice(0, 1); charlife.splice(0, 1); } } //-------------------------------------------fluorescent lamp var lampseg = []; ctx.beginPath(); for(var p = 0; p < 20; p++) { if(mousey < h*0.2 && Math.abs(mousex-lampx[p]-seglength/2)<150) lampseg[p] = 3; if(mousey < h*0.2 && Math.abs(mousex-lampx[p]-seglength/2)<125) lampseg[p] = 2; if(mousey < h*0.2 && Math.abs(mousex-lampx[p]-seglength/2)<100) lampseg[p] = 1; if(lampseg[p] == 1) ctx.fillStyle = '#e1e6ef'; else if(lampseg[p] == 2) ctx.fillStyle = '#c9cdd6'; else if(lampseg[p] == 3) ctx.fillStyle = '#b6bac4'; else ctx.fillStyle= '#8c9099'; ctx.fillRect(lampx[p],10,seglength+1,20); } ctx.restore(); requestAnimationFrame(draw); } //computer mouse location function mousePos (event) { mouseOnScreen = true; mousex = event.clientX; mousey = event.clientY; } //phone touch location function fingerPos (event) { var touch = event.changedTouches[0]; mouseOnScreen = true; mousex = touch.clientX; mousey = touch.clientY; }

Interactive Tesla Coil