HEART1

[ { "path": "DNAheart.html", "content": "\r\n\r\n\r\n \r\n HEART1\r\n \r\n\r\n\r\n\r\n

\r\n \r\n\r\n\r\n" }, { "path": "script.js", "content": "window.requestAnimationFrame =\r\n window.__requestAnimationFrame ||\r\n window.requestAnimationFrame ||\r\n window.webkitRequestAnimationFrame ||\r\n window.mozRequestAnimationFrame ||\r\n window.oRequestAnimationFrame ||\r\n window.msRequestAnimationFrame ||\r\n (function () {\r\n return function (callback, element) {\r\n var lastTime = element.__lastTime;\r\n if (lastTime === undefined) {\r\n lastTime = 0;\r\n }\r\n var currTime = Date.now();\r\n var timeToCall = Math.max(1, 33 - (currTime - lastTime));\r\n window.setTimeout(callback, timeToCall);\r\n element.__lastTime = currTime + timeToCall;\r\n };\r\n })();\r\nwindow.isDevice = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(((navigator.userAgent || navigator.vendor || window.opera)).toLowerCase()));\r\nvar loaded = false;\r\nvar init = function () {\r\n if (loaded) return;\r\n loaded = true;\r\n var mobile = window.isDevice;\r\n var koef = mobile ? 0.5 : 1;\r\n var canvas = document.getElementById('heart');\r\n var ctx = canvas.getContext('2d');\r\n var width = canvas.width = koef * innerWidth;\r\n var height = canvas.height = koef * innerHeight;\r\n var rand = Math.random;\r\n ctx.fillStyle = \"rgba(0,0,0,1)\";\r\n ctx.fillRect(0, 0, width, height);\r\n\r\n var heartPosition = function (rad) {\r\n //return [Math.sin(rad), Math.cos(rad)];\r\n return [Math.pow(Math.sin(rad), 3), -(15 * Math.cos(rad) - 5 * Math.cos(2 * rad) - 2 * Math.cos(3 * rad) - Math.cos(4 * rad))];\r\n };\r\n var scaleAndTranslate = function (pos, sx, sy, dx, dy) {\r\n return [dx + pos[0] * sx, dy + pos[1] * sy];\r\n };\r\n\r\n window.addEventListener('resize', function () {\r\n width = canvas.width = koef * innerWidth;\r\n height = canvas.height = koef * innerHeight;\r\n ctx.fillStyle = \"rgba(0,0,0,1)\";\r\n ctx.fillRect(0, 0, width, height);\r\n });\r\n\r\n var traceCount = mobile ? 20 : 50;\r\n var pointsOrigin = [];\r\n var i;\r\n var dr = mobile ? 0.3 : 0.1;\r\n for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 210, 13, 0, 0));\r\n for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 150, 9, 0, 0));\r\n for (i = 0; i < Math.PI * 2; i += dr) pointsOrigin.push(scaleAndTranslate(heartPosition(i), 90, 5, 0, 0));\r\n var heartPointsCount = pointsOrigin.length;\r\n\r\n var targetPoints = [];\r\n var pulse = function (kx, ky) {\r\n for (i = 0; i < pointsOrigin.length; i++) {\r\n targetPoints[i] = [];\r\n targetPoints[i][0] = kx * pointsOrigin[i][0] + width / 2;\r\n targetPoints[i][1] = ky * pointsOrigin[i][1] + height / 2;\r\n }\r\n };\r\n\r\n var e = [];\r\n for (i = 0; i < heartPointsCount; i++) {\r\n var x = rand() * width;\r\n var y = rand() * height;\r\n e[i] = {\r\n vx: 0,\r\n vy: 0,\r\n R: 2,\r\n speed: rand() + 5,\r\n q: ~~(rand() * heartPointsCount),\r\n D: 2 * (i % 2) - 1,\r\n force: 0.2 * rand() + 0.7,\r\n f: \"hsla(0,\" + ~~(40 * rand() + 60) + \"%,\" + ~~(60 * rand() + 20) + \"%,.3)\",\r\n trace: []\r\n };\r\n for (var k = 0; k < traceCount; k++) e[i].trace[k] = {x: x, y: y};\r\n }\r\n\r\n var config = {\r\n traceK: 0.4,\r\n timeDelta: 0.01\r\n };\r\n\r\n var time = 0;\r\n var loop = function () {\r\n var n = -Math.cos(time);\r\n pulse((1 + n) * .5, (1 + n) * .5);\r\n time += ((Math.sin(time)) < 0 ? 9 : (n > 0.8) ? .2 : 1) * config.timeDelta;\r\n ctx.fillStyle = \"rgba(0,0,0,.1)\";\r\n ctx.fillRect(0, 0, width, height);\r\n for (i = e.length; i--;) {\r\n var u = e[i];\r\n var q = targetPoints[u.q];\r\n var dx = u.trace[0].x - q[0];\r\n var dy = u.trace[0].y - q[1];\r\n var length = Math.sqrt(dx * dx + dy * dy);\r\n if (10 > length) {\r\n if (0.95 < rand()) {\r\n u.q = ~~(rand() * heartPointsCount);\r\n }\r\n else {\r\n if (0.99 < rand()) {\r\n u.D *= -1;\r\n }\r\n u.q += u.D;\r\n u.q %= heartPointsCount;\r\n if (0 > u.q) {\r\n u.q += heartPointsCount;\r\n }\r\n }\r\n }\r\n u.vx += -dx / length * u.speed;\r\n u.vy += -dy / length * u.speed;\r\n u.trace[0].x += u.vx;\r\n u.trace[0].y += u.vy;\r\n u.vx *= u.force;\r\n u.vy *= u.force;\r\n for (k = 0; k < u.trace.length - 1;) {\r\n var T = u.trace[k];\r\n var N = u.trace[++k];\r\n N.x -= config.traceK * (N.x - T.x);\r\n N.y -= config.traceK * (N.y - T.y);\r\n }\r\n ctx.fillStyle = u.f;\r\n for (k = 0; k < u.trace.length; k++) {\r\n ctx.fillRect(u.trace[k].x, u.trace[k].y, 1, 1);\r\n }\r\n }\r\n //ctx.fillStyle = \"rgba(255,255,255,1)\";\r\n //for (i = u.trace.length; i--;) ctx.fillRect(targetPoints[i][0], targetPoints[i][1], 2, 2);\r\n\r\n window.requestAnimationFrame(loop, canvas);\r\n };\r\n loop();\r\n};\r\n\r\nvar s = document.readyState;\r\nif (s === 'complete' || s === 'loaded' || s === 'interactive') init();\r\nelse document.addEventListener('DOMContentLoaded', init, false);" }, { "path": "style.css", "content": "canvas {\r\n position: absolute;\r\n left:0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0,0,0,.2);\r\n }" } ]