1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> New Document </TITLE> 5 <META NAME="Generator" CONTENT="EditPlus"> 6 <META NAME="Author" CONTENT=""> 7 <META NAME="Keywords" CONTENT=""> 8 <META NAME="Description" CONTENT=""> 9 <style> 10 body { 11 background-color: rgb(29,32,32); 12 margin: 0; 13 overflow: hidden; 14 15 } 16 .label { 17 position: absolute; 18 top: 0; 19 left: 0; 20 padding: 5px 15px; 21 color: #eee; 22 font-size: 13px; 23 background-color: rgba(0, 0, 0, .15); 24 } 25 .instructions { 26 position: absolute; 27 bottom: 0%; 28 left: 0; 29 padding: 5px 15px; 30 color: #eee; 31 font-size: 13px; 32 background-color: rgba(0, 0, 0, .15); 33 } 34 .label { 35 position: absolute; 36 top: 0; 37 left: 0; 38 padding: 5px 15px; 39 color: #eee; 40 font-size: 13px; 41 background-color: rgba(0, 0, 0, .15); 42 } 43 canvas { display:block; } 44 </style> 45 </HEAD> 46 47 <BODY> 48 <head> 49 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1, shrink-to-fit=no"> 50 </head> 51 <body> 52 <canvas id=canvas></canvas> 53 <div class="label">SPARED THE MISERY OF HOPE</div> 54 <div class="instructions">MOVE MOUSE AROUND </div> 55 56 </body> 57 <script> 58 var ctx = canvas.getContext("2d"); 59 var body = []; 60 canvas.width = window.innerWidth; 61 canvas.height = window.innerHeight; 62 63 var mouse_pos_x = canvas.width/2; 64 var mouse_pos_y = canvas.height/2; 65 var delta = 1; 66 var step = 0; 67 var loop = 0; 68 var line = 0; 69 var lineMax = 20; 70 var lineMin = 5; 71 var TWO_PI = 2 * Math.PI; 72 var t = 0; 73 var animate = true; 74 var op = 1; 75 76 var bodyLength = 20; 77 78 canvas.addEventListener('mouseleave', mouse_leave); 79 80 canvas.addEventListener('mousemove', mouse_track); 81 82 function mouse_leave(){ 83 animate = true; 84 } 85 86 87 function mouse_track(event) { 88 animate = false; 89 if((Math.abs(mouse_pos_x - event.clientX) > delta) || (Math.abs(mouse_pos_y - event.clientY) > delta)){ 90 mouse_pos_x = event.clientX; 91 mouse_pos_y = event.clientY; 92 } 93 } 94 95 96 //Colours from: 97 //https://krazydad.com/tutorials/makecolors.php 98 99 var red = []; 100 var grn = []; 101 var blu = []; 102 103 center = 128; 104 width = 127; 105 frequency1 = 0.3; 106 frequency2 = 0.3; 107 frequency3 = 0.3; 108 109 phase1 = 0; 110 phase2 = 2; 111 phase3 = 4; 112 113 for (s = 0; s < bodyLength; s++) { 114 red[s] = Math.round(Math.sin(frequency1*s + phase1) * width + center); 115 grn[s] = Math.round(Math.sin(frequency2*s + phase2) * width + center); 116 blu[s] = Math.round(Math.sin(frequency3*s + phase3) * width + center); 117 } 118 119 size = Math.min(canvas.width, canvas.height)/50; 120 //See below 121 var startX = canvas.width/2 + size * (16 * Math.sin(0) * Math.sin(0) * Math.sin(0)); 122 var startY = canvas.height - (canvas.height/2 + ( size *( 13 * Math.cos(0) - 5 * Math.cos(0) - 2 * Math.cos(0) - Math.cos(0)))); 123 124 for (i = 0; i < bodyLength; i++) { 125 var b = { 126 x: startX, 127 y: startY 128 }; 129 body.push(b); 130 } 131 132 //****** DRAW ******// 133 134 function draw() { 135 136 t += 0.08; 137 t = t % TWO_PI; 138 139 if(line <= lineMin){ 140 op = 1; 141 line = lineMin+1; 142 } 143 if(line >= lineMax){ 144 op = -1; 145 line = lineMax-1; 146 } 147 loop++; 148 if(loop == 5){ 149 step++; 150 step = step % bodyLength; 151 loop = 0; 152 } 153 154 line = op + line; 155 156 if(animate){ 157 size = Math.min(canvas.width, canvas.height)/50; 158 //Heart curve from: 159 //http://mathworld.wolfram.com/HeartCurve.html 160 mouse_pos_x = canvas.width/2 + size * (16 * Math.sin(t) * Math.sin(t) * Math.sin(t)); 161 mouse_pos_y = canvas.height - (canvas.height/2 + ( size * ( 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)))); 162 } 163 164 canvas.width = window.innerWidth; 165 canvas.height = window.innerHeight; 166 167 for (i = (body.length-1); i > 0; i--) { 168 body[i].x = body[i-1].x; 169 body[i].y = body[i-1].y; 170 } 171 body[0].x = mouse_pos_x; 172 body[0].y = mouse_pos_y; 173 174 ctx.lineWidth = line; 175 ctx.strokeStyle = "rgb("+red[step]+","+grn[step]+","+blu[step]+")"; 176 ctx.fillStyle = "rgb("+red[step]+","+grn[step]+","+blu[step]+")"; 177 178 //Draw leading circle 179 ctx.beginPath(); 180 ctx.arc((body[0].x), (body[0].y), line/2, 0, TWO_PI); 181 ctx.fill(); 182 183 //Draw line 184 ctx.beginPath(); 185 ctx.moveTo(body[0].x, body[0].y); 186 187 for(s = 0; s < body.length - 2; s++){ 188 189 //Bezier curve along points taken from: 190 //http://stackoverflow.com/questions/7054272/how-to-draw-smooth-curve-through-n-points-using-javascript-html5-canvas 191 192 var xc = (body[s].x + body[s+1].x) / 2; 193 var yc = (body[s].y + body[s+1].y) / 2; 194 ctx.quadraticCurveTo(body[s].x, body[s].y, xc, yc); 195 } 196 ctx.stroke(); 197 198 //Draw trailing circle 199 ctx.beginPath(); 200 ctx.arc(xc, yc, line/2, 0, TWO_PI); 201 ctx.fill(); 202 203 window.requestAnimationFrame(draw); 204 } 205 window.requestAnimationFrame(draw); 206 </script> 207 </BODY> 208 </HTML>