diff --git a/.gitignore b/.gitignore index 4d29575..1c37b55 100644 --- a/.gitignore +++ b/.gitignore @@ -9,7 +9,7 @@ /coverage # production -/build +#/build # misc .DS_Store diff --git a/build/asset-manifest.json b/build/asset-manifest.json new file mode 100644 index 0000000..d39ab18 --- /dev/null +++ b/build/asset-manifest.json @@ -0,0 +1,16 @@ +{ + "files": { + "main.css": "/static/css/main.d19d8da6.css", + "main.js": "/static/js/main.eb3a9636.js", + "static/js/787.9c5e822e.chunk.js": "/static/js/787.9c5e822e.chunk.js", + "static/media/img.png": "/static/media/img.8d314c6eb13d123018f3.png", + "index.html": "/index.html", + "main.d19d8da6.css.map": "/static/css/main.d19d8da6.css.map", + "main.eb3a9636.js.map": "/static/js/main.eb3a9636.js.map", + "787.9c5e822e.chunk.js.map": "/static/js/787.9c5e822e.chunk.js.map" + }, + "entrypoints": [ + "static/css/main.d19d8da6.css", + "static/js/main.eb3a9636.js" + ] +} \ No newline at end of file diff --git a/build/favicon.ico b/build/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/build/favicon.ico differ diff --git a/build/index.html b/build/index.html new file mode 100644 index 0000000..68781ad --- /dev/null +++ b/build/index.html @@ -0,0 +1 @@ +
a||125d?(a.sortIndex=c,f(t,a),null===h(r)&&a===h(t)&&(B?(E(L),L=-1):B=!0,K(H,c-d))):(a.sortIndex=e,f(r,a),A||z||(A=!0,I(J)));return a};\nexports.unstable_shouldYield=M;exports.unstable_wrapCallback=function(a){var b=y;return function(){var c=y;y=b;try{return a.apply(this,arguments)}finally{y=c}}};\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/scheduler.production.min.js');\n} else {\n module.exports = require('./cjs/scheduler.development.js');\n}\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);\nvar leafPrototypes;\n// create a fake namespace object\n// mode & 1: value is a module id, require it\n// mode & 2: merge all properties of value into the ns\n// mode & 4: return value when already ns object\n// mode & 16: return value when it's Promise-like\n// mode & 8|1: behave like require\n__webpack_require__.t = function(value, mode) {\n\tif(mode & 1) value = this(value);\n\tif(mode & 8) return value;\n\tif(typeof value === 'object' && value) {\n\t\tif((mode & 4) && value.__esModule) return value;\n\t\tif((mode & 16) && typeof value.then === 'function') return value;\n\t}\n\tvar ns = Object.create(null);\n\t__webpack_require__.r(ns);\n\tvar def = {};\n\tleafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];\n\tfor(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {\n\t\tObject.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));\n\t}\n\tdef['default'] = () => (value);\n\t__webpack_require__.d(ns, def);\n\treturn ns;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.f = {};\n// This file contains only the entry chunk.\n// The chunk loading function for additional chunks\n__webpack_require__.e = (chunkId) => {\n\treturn Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {\n\t\t__webpack_require__.f[key](chunkId, promises);\n\t\treturn promises;\n\t}, []));\n};","// This function allow to reference async chunks\n__webpack_require__.u = (chunkId) => {\n\t// return url for filenames based on template\n\treturn \"static/js/\" + chunkId + \".\" + \"9c5e822e\" + \".chunk.js\";\n};","// This function allow to reference async chunks\n__webpack_require__.miniCssF = (chunkId) => {\n\t// return url for filenames based on template\n\treturn undefined;\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","var inProgress = {};\nvar dataWebpackPrefix = \"dummy:\";\n// loadScript function to load a script via script tag\n__webpack_require__.l = (url, done, key, chunkId) => {\n\tif(inProgress[url]) { inProgress[url].push(done); return; }\n\tvar script, needAttach;\n\tif(key !== undefined) {\n\t\tvar scripts = document.getElementsByTagName(\"script\");\n\t\tfor(var i = 0; i < scripts.length; i++) {\n\t\t\tvar s = scripts[i];\n\t\t\tif(s.getAttribute(\"src\") == url || s.getAttribute(\"data-webpack\") == dataWebpackPrefix + key) { script = s; break; }\n\t\t}\n\t}\n\tif(!script) {\n\t\tneedAttach = true;\n\t\tscript = document.createElement('script');\n\n\t\tscript.charset = 'utf-8';\n\t\tscript.timeout = 120;\n\t\tif (__webpack_require__.nc) {\n\t\t\tscript.setAttribute(\"nonce\", __webpack_require__.nc);\n\t\t}\n\t\tscript.setAttribute(\"data-webpack\", dataWebpackPrefix + key);\n\n\t\tscript.src = url;\n\t}\n\tinProgress[url] = [done];\n\tvar onScriptComplete = (prev, event) => {\n\t\t// avoid mem leaks in IE.\n\t\tscript.onerror = script.onload = null;\n\t\tclearTimeout(timeout);\n\t\tvar doneFns = inProgress[url];\n\t\tdelete inProgress[url];\n\t\tscript.parentNode && script.parentNode.removeChild(script);\n\t\tdoneFns && doneFns.forEach((fn) => (fn(event)));\n\t\tif(prev) return prev(event);\n\t}\n\tvar timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);\n\tscript.onerror = onScriptComplete.bind(null, script.onerror);\n\tscript.onload = onScriptComplete.bind(null, script.onload);\n\tneedAttach && document.head.appendChild(script);\n};","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"/\";","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t179: 0\n};\n\n__webpack_require__.f.j = (chunkId, promises) => {\n\t\t// JSONP chunk loading for javascript\n\t\tvar installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;\n\t\tif(installedChunkData !== 0) { // 0 means \"already installed\".\n\n\t\t\t// a Promise means \"currently loading\".\n\t\t\tif(installedChunkData) {\n\t\t\t\tpromises.push(installedChunkData[2]);\n\t\t\t} else {\n\t\t\t\tif(true) { // all chunks have JS\n\t\t\t\t\t// setup Promise in chunk cache\n\t\t\t\t\tvar promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));\n\t\t\t\t\tpromises.push(installedChunkData[2] = promise);\n\n\t\t\t\t\t// start chunk loading\n\t\t\t\t\tvar url = __webpack_require__.p + __webpack_require__.u(chunkId);\n\t\t\t\t\t// create error before stack unwound to get useful stacktrace later\n\t\t\t\t\tvar error = new Error();\n\t\t\t\t\tvar loadingEnded = (event) => {\n\t\t\t\t\t\tif(__webpack_require__.o(installedChunks, chunkId)) {\n\t\t\t\t\t\t\tinstalledChunkData = installedChunks[chunkId];\n\t\t\t\t\t\t\tif(installedChunkData !== 0) installedChunks[chunkId] = undefined;\n\t\t\t\t\t\t\tif(installedChunkData) {\n\t\t\t\t\t\t\t\tvar errorType = event && (event.type === 'load' ? 'missing' : event.type);\n\t\t\t\t\t\t\t\tvar realSrc = event && event.target && event.target.src;\n\t\t\t\t\t\t\t\terror.message = 'Loading chunk ' + chunkId + ' failed.\\n(' + errorType + ': ' + realSrc + ')';\n\t\t\t\t\t\t\t\terror.name = 'ChunkLoadError';\n\t\t\t\t\t\t\t\terror.type = errorType;\n\t\t\t\t\t\t\t\terror.request = realSrc;\n\t\t\t\t\t\t\t\tinstalledChunkData[1](error);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t\t__webpack_require__.l(url, loadingEnded, \"chunk-\" + chunkId, chunkId);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n};\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n// no on chunks loaded\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkdummy\"] = self[\"webpackChunkdummy\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","// Code source from here, thanks author\n// https://github.com/drawcall/Proton/blob/gh-pages/source/src/utils/Rand.js\nclass Rand {\n\n constructor() {\n this.list = [];\n }\n\n set(probability, target) {\n this.list.push({\n probability,\n target,\n a: 0,\n b: 1\n });\n\n this.calculation();\n }\n\n calculation() {\n let total = 0;\n for (let i = 0; i < this.list.length; i++) {\n total += this.list[i].probability;\n }\n\n for (let i = 0; i < this.list.length; i++) {\n const obj = this.list[i];\n const val = obj.probability / total;\n\n obj.a = i === 0 ? 0 : this.list[i - 1].b;\n obj.b = obj.a + val;\n }\n }\n\n getResult() {\n const val = Math.random();\n for (let i = 0; i < this.list.length; i++) {\n const obj = this.list[i];\n\n if (val <= obj.b && val > obj.a) {\n return obj.target;\n }\n }\n\n return this.list[0].target;\n }\n};\n\nexport default Rand;\n","import React from \"react\";\nimport RAFManager from \"raf-manager\";\nexport default class Canvas extends React.Component {\n constructor(props) {\n super(props);\n\n this._iid = 0;\n this._oid = 0;\n this.size = { width: 0, height: 0 };\n this.canvasRef = React.createRef();\n }\n\n componentDidMount() {\n this._oid = setTimeout(() => {\n this.initCanvas();\n this.resize = this.resize.bind(this);\n window.addEventListener(\"resize\", this.resize);\n }, 100);\n\n const canvas = this.getCanvas();\n this.props.onCanvasDidMount && this.props.onCanvasDidMount(canvas);\n }\n\n initCanvas() {\n const canvas = this.getCanvas();\n\n if (this.props.globalCompositeOperation) {\n const context = canvas.getContext(\"2d\");\n context.globalCompositeOperation = this.props.globalCompositeOperation;\n }\n\n const { width, height } = this.setCanvasSize(canvas);\n this.heartbeatDetectionCanvasSize(canvas);\n this.props.onCanvasInited(canvas, width, height);\n }\n\n getCanvas(){\n const canvas = this.canvasRef.current;\n return canvas;\n }\n\n heartbeatDetectionCanvasSize(canvas) {\n this._iid = setInterval(() => {\n if(this.canvasRef.current){\n const newHeight = this.canvasRef.current.clientHeight;\n if (newHeight !== this.size.height) {\n const { width, height } = this.setCanvasSize(canvas);\n this.props.onResize && this.props.onResize(width, height);\n }\n }\n }, 1000 / 10);\n }\n\n componentWillUnmount() {\n try{\n window.removeEventListener(\"resize\", this.resize);\n clearInterval(this._iid);\n clearTimeout(this._oid);\n }catch(e){\n }\n }\n\n resize() {\n const canvas = this.getCanvas();\n const { width, height } = this.setCanvasSize(canvas);\n this.props.onResize && this.props.onResize(width, height);\n }\n\n setCanvasSize(canvas) {\n const width = this.canvasRef.current.clientWidth;\n const height = this.canvasRef.current.clientHeight;\n\n this.size.width = width;\n this.size.height = height;\n canvas.width = width;\n canvas.height = height;\n return { width, height };\n }\n\n handleWaypointEnter() {\n RAFManager.start();\n }\n\n handleWaypointLeave() {\n RAFManager.stop();\n }\n\n getStyle() {\n const { bg } = this.props;\n let style = { width: \"100%\", height: \"100%\" };\n\n if (bg === true) {\n style = Object.assign(style, {\n position: \"absolute\",\n zIndex: -1,\n top: 0,\n left: 0\n });\n } else if(bg && typeof bg === \"object\") {\n style = Object.assign(style, bg);\n }\n\n return style;\n }\n\n handleMouseDown(e) {\n this.props.onMouseDown && this.props.onMouseDown(e);\n }\n\n render() {\n return (\n \n );\n }\n}\n","\nfunction hexToRgb(hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : {};\n}\n\nfunction getColor(color, a) {\n let c;\n if (color) {\n c = hexToRgb(color);\n return `rgba(${c.r},${c.g},${c.b}, ${a})`;\n } else {\n return null;\n }\n}\n\n\nexport { hexToRgb, getColor };","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\nimport { getColor } from \"../utils/Color\";\n\nexport default class Ball extends React.Component {\n constructor(props) {\n super(props);\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n this.createMiniEmitter(canvas);\n RAFManager.add(this.renderProton);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) { }\n }\n\n onResize() { }\n\n createProton(canvas, width, height) {\n const context = canvas.getContext(\"2d\");\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(\n this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(4, 9),\n new Proton.Span(0.8, 1.3)\n );\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(1, 50));\n emitter.addInitialize(new Proton.Life(5, 6));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(5, 8),\n new Proton.Span(30, 70),\n \"polar\"\n )\n );\n\n emitter.addBehaviour(new Proton.Alpha(1, 0));\n emitter.addBehaviour(\n new Proton.Color([\"#36aaf3\", \"#fd769c\", \"#94ff22\", \"#ffa545\", \"#ffffff\"])\n );\n emitter.addBehaviour(new Proton.Scale(0.7, 1));\n emitter.addBehaviour(new Proton.Gravity(3));\n emitter.addBehaviour(new Proton.Collision(emitter));\n emitter.addBehaviour(this.customDeadBehaviour(canvas));\n emitter.addBehaviour(\n new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"bound\"\n )\n );\n\n emitter.p.x = Math.min(500, Math.max(canvas.width / 2 - 400, 50));\n emitter.p.y = canvas.height / 2 + 50;\n emitter.emit();\n this.proton.addEmitter(emitter);\n\n const renderer = new Proton.CanvasRenderer(canvas);\n renderer.onProtonUpdate = ()=> {\n context.fillStyle = getColor(this.props.color, 0.2) || \"rgba(255, 255, 255, 0.2)\";\n context.fillRect(0, 0, canvas.width, canvas.height);\n };\n this.proton.addRenderer(renderer);\n }\n\n customDeadBehaviour(canvas) {\n return {\n initialize: function (particle) { },\n applyBehaviour: particle => {\n if (particle.p.y + particle.radius >= canvas.height) {\n if (particle.radius > 9) {\n this.miniEmitteing(particle);\n particle.dead = true;\n }\n }\n }\n };\n }\n\n createMiniEmitter(canvas) {\n const miniEmitter = new Proton.Emitter();\n miniEmitter.rate = new Proton.Rate(\n new Proton.Span(3, 6),\n new Proton.Span(1, 2)\n );\n\n miniEmitter.addInitialize(new Proton.Mass(1));\n miniEmitter.radiusInitialize = new Proton.Radius();\n miniEmitter.addInitialize(miniEmitter.radiusInitialize);\n miniEmitter.addInitialize(new Proton.Life(0.5, 1));\n miniEmitter.addInitialize(\n new Proton.V(\n new Proton.Span(1.5, 3),\n new Proton.Span(0, 70, true),\n \"polar\"\n )\n );\n\n miniEmitter.colorBehaviour = new Proton.Color(\"#ffffff\");\n miniEmitter.addBehaviour(new Proton.Alpha(1, 0));\n miniEmitter.addBehaviour(miniEmitter.colorBehaviour);\n miniEmitter.addBehaviour(new Proton.Gravity(4));\n miniEmitter.addBehaviour(new Proton.Collision(miniEmitter));\n miniEmitter.addBehaviour(\n new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"bound\"\n )\n );\n this.proton.addEmitter(miniEmitter);\n\n this.miniEmitter = miniEmitter;\n }\n\n miniEmitteing(particle) {\n const miniEmitter = this.miniEmitter;\n miniEmitter.radiusInitialize.reset(\n particle.radius * 0.05,\n particle.radius * 0.2\n );\n miniEmitter.colorBehaviour.reset(particle.color);\n miniEmitter.p.x = particle.p.x;\n miniEmitter.p.y = particle.p.y;\n miniEmitter.emit(\"once\");\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Color extends React.Component {\n constructor(props) {\n super(props);\n\n this.colors = [\n \"#529B88\",\n \"#CDD180\",\n \"#FFFA32\",\n \"#FB6255\",\n \"#FB4A53\",\n \"#FF4E50\",\n \"#F9D423\"\n ];\n this.renderProton = this.renderProton.bind(this);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize() {}\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(\n this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(5, 8),\n new Proton.Span(0.1, 0.25)\n );\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(20, 200));\n emitter.addInitialize(new Proton.Life(2, 4));\n emitter.addInitialize(\n new Proton.Position(new Proton.RectZone(0, 0, width, height))\n );\n\n emitter.addBehaviour(new Proton.Alpha(0, 1, Infinity, Proton.easeOutCubic));\n emitter.addBehaviour(new Proton.Scale(1, 0, Infinity, Proton.easeOutCubic));\n emitter.addBehaviour(new Proton.Color(this.colors, \"random\"));\n\n emitter.emit();\n this.proton.addEmitter(emitter);\n\n const renderer = new Proton.CanvasRenderer(canvas);\n this.proton.addRenderer(renderer);\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Color extends React.Component {\n constructor(props) {\n super(props);\n\n this.colors = [\n \"#529B88\",\n \"#CDD180\",\n \"#FFFA32\",\n \"#FB6255\",\n \"#FB4A53\",\n \"#FF4E50\",\n \"#F9D423\"\n ];\n this.renderProton = this.renderProton.bind(this);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) { }\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);;\n }\n\n getProp(key, defaultVal) {\n const config = this.props.config || {};\n const val = config[key] || defaultVal;\n if (Array.isArray(val)) {\n return new Proton.Span(val[0], val[1]);\n } else {\n return val;\n }\n }\n\n getArrProp(key, defaultVal) {\n const config = this.props.config || {};\n const val = config[key] || defaultVal;\n if (!val) return null;\n\n if (Array.isArray(val)) {\n return val;\n } else {\n return [val, val];\n }\n }\n\n createProton(canvas, width, height) {\n const num = this.getProp(\"num\", [5, 8]);\n const rps = this.getProp(\"rps\", [0.1, 0.2]);\n const mass = this.getProp(\"mass\", 1);\n const radius = this.getProp(\"radius\", [10, 30]);\n const life = this.getProp(\"life\", [2, 3]);\n const body = this.getProp(\"body\");\n const position = this.getProp(\"position\");\n const v = this.getProp(\"v\", [2, 3]);\n const tha = this.getProp(\"tha\", [-15, 15]);\n const alpha = this.getArrProp(\"alpha\");\n const scale = this.getArrProp(\"scale\");\n const color = this.getArrProp(\"color\");\n const cross = this.getProp(\"cross\", \"dead\");\n const random = this.getProp(\"random\");\n const rotate = this.getArrProp(\"rotate\");\n const g = this.getProp(\"g\");\n const f = this.getArrProp(\"f\");\n const emitterV = this.getProp(\"emitter\");\n\n this.proton = new Proton();\n let emitter;\n if (emitterV === \"follow\") {\n emitter = new Proton.FollowEmitter();\n } else {\n emitter = new Proton.Emitter();\n }\n emitter.rate = new Proton.Rate(num, rps);\n\n emitter.addInitialize(new Proton.Mass(mass));\n emitter.addInitialize(new Proton.Radius(radius));\n emitter.addInitialize(new Proton.Life(life));\n emitter.addInitialize(new Proton.Velocity(v, tha, \"polar\"));\n if (body) emitter.addInitialize(new Proton.Body(body));\n\n let pos;\n if (position === \"all\" || position === \"screen\") {\n pos = new Proton.Position(new Proton.RectZone(0, 0, canvas.width, canvas.height))\n } else if (typeof position === \"object\") {\n pos = new Proton.Position(new Proton.RectZone(position.x, position.y, position.width, position.height))\n } else {\n emitter.p.x = canvas.width / 2;\n emitter.p.y = canvas.height / 2;\n }\n\n emitter.addInitialize(pos);\n\n /// behaviour\n const alphaB = alpha ? new Proton.Alpha(alpha[0], alpha[1]) : new Proton.Alpha(0, 1);\n const scaleB = scale ? new Proton.Scale(scale[0], scale[1]) : new Proton.Scale(1, 0.2);\n const colorB = color ? new Proton.Color(color[0], color[1]) : new Proton.Color(this.colors);\n\n emitter.addBehaviour(alphaB);\n emitter.addBehaviour(scaleB);\n if(!body) emitter.addBehaviour(colorB);\n\n if(rotate){\n if(rotate[0]===true||rotate[0]===\"rotate\"){\n emitter.addBehaviour(new Proton.Rotate());\n }else{\n emitter.addBehaviour(new Proton.Rotate(rotate[0], rotate[1]));\n }\n }\n\n const zone = new Proton.RectZone(0, 0, canvas.width, canvas.height)\n const crossZoneBehaviour = new Proton.CrossZone(zone, cross);\n emitter.addBehaviour(crossZoneBehaviour);\n\n random && emitter.addBehaviour(new Proton.RandomDrift(random, random, 0.05));\n g && emitter.addBehaviour(new Proton.G(g));\n f && emitter.addBehaviour(new Proton.F(f[0], f[1]));\n\n emitter.emit();\n this.proton.addEmitter(emitter);\n\n const renderer = this.createRenderer(canvas);\n this.proton.addRenderer(renderer);\n\n this.emitter = emitter;\n this.crossZoneBehaviour = crossZoneBehaviour;\n }\n\n createRenderer(canvas) {\n const width = canvas.width;\n const height = canvas.height;\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CanvasRenderer(canvas);\n\n const onUpdate = this.getProp(\"onUpdate\");\n if (onUpdate) {\n renderer.onProtonUpdate = () => {\n onUpdate(context, width, height);\n };\n }\n\n const onParticleCreated = this.getProp(\"onParticleCreated\");\n if (onParticleCreated) {\n renderer.onParticleCreated = (particle) => {\n onParticleCreated(context, particle);\n };\n }\n\n const onParticleUpdate = this.getProp(\"onParticleUpdate\");\n if (onParticleUpdate) {\n renderer.onParticleUpdate = (particle) => {\n onParticleUpdate(context, particle);\n };\n }\n\n return renderer;\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n handleMouseDown(e) {\n const onMouseDown = this.getProp(\"onMouseDown\");\n if (onMouseDown) {\n onMouseDown(e);\n }\n }\n\n render() {\n const globalCompositeOperation = this.props.globalCompositeOperation || this.props.operation || \"source-over\";\n\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\nimport { getColor } from \"../utils/Color\";\n\nexport default class Lines extends React.Component {\n constructor(props) {\n super(props);\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasDidMount(canvas){\n if(this.props.color){\n canvas.style.backgroundColor = this.props.color;\n }\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) { }\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.damping = 0.008;\n emitter.rate = new Proton.Rate(this.props.num ? this.props.num : 250);\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(4));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(1.5),\n new Proton.Span(0, 360),\n \"polar\"\n )\n );\n const mouseObj = {\n x: width / 2,\n y: height / 2\n };\n\n const attractionBehaviour = new Proton.Attraction(mouseObj, 0, 0);\n const crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"cross\"\n );\n emitter.addBehaviour(new Proton.Color(\"random\"));\n emitter.addBehaviour(attractionBehaviour, crossZoneBehaviour);\n emitter.addBehaviour(new Proton.RandomDrift(10, 10, 0.05));\n emitter.p.x = canvas.width / 2;\n emitter.p.y = canvas.height / 2;\n emitter.emit(\"once\");\n\n this.proton.addEmitter(emitter);\n this.proton.addRenderer(this.createRenderer(canvas));\n this.crossZoneBehaviour = crossZoneBehaviour;\n }\n\n createRenderer(canvas) {\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CanvasRenderer(canvas);\n renderer.onProtonUpdate = () => {\n context.fillStyle = getColor(this.props.color, 0.02) || \"rgba(0, 0, 0, 0.02)\";\n context.fillRect(0, 0, canvas.width, canvas.height);\n };\n\n renderer.onParticleUpdate = function (particle) {\n context.beginPath();\n context.strokeStyle = particle.color;\n context.lineWidth = 1;\n context.moveTo(particle.old.p.x, particle.old.p.y);\n context.lineTo(particle.p.x, particle.p.y);\n context.closePath();\n context.stroke();\n };\n\n return renderer;\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\nimport { getColor } from \"../utils/Color\";\n\nexport default class Thick extends React.Component {\n constructor(props) {\n super(props);\n this.hue = 0;\n this.index = 0;\n this.colorTemplate = `hsla(hue,80%,50%, 0.75)`;\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasDidMount(canvas){\n if(this.props.color){\n canvas.style.backgroundColor = this.props.color;\n }\n }\n\n onCanvasInited(canvas, width, height) {\n this.canvas = canvas;\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.damping = 0.008;\n emitter.rate = new Proton.Rate(this.props.num ? this.props.num : 150);\n\n // Initialize\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(8));\n emitter.addInitialize(\n new Proton.V(new Proton.Span(0.1, 0.5), new Proton.Span(0, 360), \"polar\")\n );\n emitter.addInitialize(\n new Proton.Position(\n new Proton.CircleZone(canvas.width / 2, canvas.height / 2, 100)\n )\n );\n\n // Behaviour\n const crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"cross\"\n );\n emitter.addBehaviour(crossZoneBehaviour);\n this.repulsion = new Proton.Repulsion(\n {\n x: canvas.width / 2,\n y: canvas.height / 2 - 100\n },\n 3,\n 300\n );\n\n this.attraction = new Proton.Attraction(\n {\n x: canvas.width / 2,\n y: canvas.height / 2\n },\n 3,\n 200\n );\n emitter.addBehaviour(this.attraction, this.repulsion);\n emitter.addBehaviour(new Proton.Color(\"random\"));\n emitter.addBehaviour(new Proton.RandomDrift(20, 15, 0.15));\n\n emitter.emit(\"once\");\n this.proton.addEmitter(emitter);\n this.proton.addRenderer(this.createRenderer(canvas));\n this.crossZoneBehaviour = crossZoneBehaviour;\n }\n\n createRenderer(canvas) {\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CanvasRenderer(canvas);\n\n renderer.onProtonUpdate = () => {\n this.hue += 1;\n context.fillStyle = getColor(this.props.color, 0.02) || \"rgba(0, 0, 0, 0.02)\";\n context.fillRect(0, 0, canvas.width, canvas.height);\n };\n\n renderer.onParticleCreated = particle => {\n particle.data.begin = Proton.MathUtil.randomAToB(1, 120);\n particle.data.tha = Proton.MathUtil.randomAToB(0, Math.PI * 2);\n };\n\n renderer.onParticleUpdate = particle => {\n const hue = particle.data.begin + this.hue;\n particle.color = this.colorTemplate.replace(\"hue\", hue % 360);\n\n const ratio = 3 / 4;\n const radius =\n particle.radius * (1 - ratio) * Math.cos((particle.data.tha += 0.01)) +\n particle.radius * ratio;\n\n context.beginPath();\n context.fillStyle = particle.color;\n context.arc(particle.p.x, particle.p.y, radius, 0, Math.PI * 2, true);\n context.closePath();\n context.fill();\n };\n\n return renderer;\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n renderProton() {\n const canvas = this.canvas;\n this.proton.update();\n if (this.index % 200 === 0) {\n this.attraction.targetPosition.x = Math.random() * canvas.width;\n this.attraction.targetPosition.y = Math.random() * canvas.height;\n\n this.repulsion.targetPosition.x = Math.random() * canvas.width;\n this.repulsion.targetPosition.y = Math.random() * canvas.height;\n }\n\n this.index++;\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Square extends React.Component {\n constructor(props) {\n super(props);\n\n this.colors = [\n \"#fad390\",\n \"#81ecec\",\n \"#ffffff\",\n \"#badc58\",\n \"#f9ca24\",\n \"#FEA47F\"\n ];\n this.renderProton = this.renderProton.bind(this);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n onCanvasDidMount(canvas) {\n \n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize(width, height) {\n const dis = 150;\n this.crossZoneBehaviour.zone.width = width + 2 * dis;\n this.crossZoneBehaviour.zone.height = height + 2 * dis;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(this.props.num ? this.props.num : 50);\n emitter.damping = 0;\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(4, 70));\n emitter.addInitialize(\n new Proton.Velocity(new Proton.Span(2, 10), new Proton.Span(0), \"polar\")\n );\n emitter.addInitialize(\n new Proton.Position(\n new Proton.LineZone(0, canvas.height, canvas.width, canvas.height)\n )\n );\n\n const dis = 150;\n const crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(\n 0 - dis,\n 0 - dis,\n canvas.width + 2 * dis,\n canvas.height + 2 * dis\n ),\n \"cross\"\n );\n emitter.addBehaviour(crossZoneBehaviour);\n emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(0.1, 0.55)));\n emitter.addBehaviour(new Proton.Color(this.colors));\n\n emitter.emit(\"once\");\n this.proton.addEmitter(emitter);\n const renderer = this.createRenderer(canvas);\n this.proton.addRenderer(renderer);\n\n this.crossZoneBehaviour = crossZoneBehaviour;\n emitter.preEmit(2);\n }\n\n createRenderer(canvas) {\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CustomRenderer();\n\n renderer.onProtonUpdate = () => {\n context.clearRect(0, 0, canvas.width, canvas.height);\n };\n\n renderer.onParticleCreated = particle => {\n const w = particle.radius || 60;\n const h = Proton.MathUtil.randomAToB(100, 200, \"int\");\n particle.data.w = w;\n particle.data.h = h;\n };\n\n renderer.onParticleUpdate = particle => {\n const w = particle.data.w;\n const h = particle.data.h;\n context.save();\n context.globalAlpha = particle.alpha;\n context.fillStyle = particle.color;\n\n context.translate(particle.p.x, particle.p.y);\n context.rotate(Proton.MathUtil.degreeTransform(particle.rotation));\n context.translate(-particle.p.x, -particle.p.y);\n\n context.beginPath();\n context.rect(particle.p.x - w / 2, particle.p.y - h / 2, w, h);\n\n context.closePath();\n context.fill();\n context.globalAlpha = 1;\n context.restore();\n };\n\n return renderer;\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\nimport { getColor } from \"../utils/Color\";\n\nexport default class Cobweb extends React.Component {\n constructor(props) {\n super(props);\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(\n this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(100),\n new Proton.Span(0.05, 0.2)\n );\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(1, 4));\n emitter.addInitialize(new Proton.Life(Infinity));\n\n const pointZone = new Proton.Position(\n new Proton.RectZone(0, 0, width, height)\n );\n emitter.addInitialize(pointZone);\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(0.3, 0.6),\n new Proton.Span(0, 360),\n \"polar\"\n )\n );\n\n emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(0.2, 0.9)));\n emitter.addBehaviour(new Proton.Color(this.props.color || \"#333\"));\n this.crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(0, 0, width, height),\n \"cross\"\n );\n emitter.addBehaviour(this.crossZoneBehaviour);\n\n emitter.emit(\"once\");\n emitter.damping = 0;\n this.proton.addEmitter(emitter);\n this.proton.addRenderer(this.createRenderer(canvas, emitter));\n }\n\n createRenderer(canvas, emitter) {\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CanvasRenderer(canvas);\n const R = 140;\n\n renderer.onProtonUpdateAfter = ()=> {\n let particles = emitter.particles;\n\n for (let i = 0; i < particles.length; i++) {\n for (let j = i + 1; j < particles.length; j++) {\n let pA = particles[i];\n let pB = particles[j];\n let dis = pA.p.distanceTo(pB.p);\n\n if (dis < R) {\n let alpha = (1 - dis / R) * 0.5;\n context.strokeStyle = getColor(this.props.color, alpha) || `rgba(3, 3, 3, ${alpha})`;\n context.beginPath();\n context.moveTo(pA.p.x, pA.p.y);\n context.lineTo(pB.p.x, pB.p.y);\n context.closePath();\n context.stroke();\n }\n }\n }\n };\n\n return renderer;\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Circle extends React.Component {\n constructor(props) {\n super(props);\n\n this.colors = [\n \"#74b9ff\",\n \"#e84393\",\n \"#6c5ce7\",\n \"#00b894\",\n \"#fdcb6e\",\n \"#006266\",\n \"#1B1464\"\n ];\n\n this.renderProton = this.renderProton.bind(this);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) { }\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(this.props.num || 20);\n emitter.damping = 0.008;\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(30, 600));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(0.5),\n new Proton.Span(0, 360),\n \"polar\"\n )\n );\n emitter.addInitialize(\n new Proton.Position(\n new Proton.RectZone(0, 0, canvas.width, canvas.height)\n )\n );\n\n const crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"cross\"\n );\n emitter.addBehaviour(crossZoneBehaviour);\n emitter.addBehaviour(new Proton.Alpha(Proton.getSpan(0.35, 0.55)));\n emitter.addBehaviour(new Proton.Color(this.getColor()));\n emitter.addBehaviour(new Proton.RandomDrift(50, 50, 0.5));\n\n emitter.emit(\"once\");\n this.proton.addEmitter(emitter);\n\n const renderer = new Proton.CanvasRenderer(canvas);\n this.proton.addRenderer(renderer);\n\n this.crossZoneBehaviour = crossZoneBehaviour;\n }\n\n getColor() {\n let c = this.colors;\n if (this.props.color) {\n if(Array.isArray(this.props.color)){\n c = this.props.color;\n }else{\n c = [this.props.color];\n }\n }\n\n return c;\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Tadpole extends React.Component {\n constructor(props) {\n super(props);\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasDidMount(canvas) {\n\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n this.renderProton();\n }\n\n onResize(width, height) {\n this.crossZoneBehaviour.zone.width = width;\n this.crossZoneBehaviour.zone.height = height;\n this.proton.renderers[0].resize(width, height);\n }\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n\n const emitter = new Proton.Emitter();\n emitter.damping = 0.008;\n emitter.rate = new Proton.Rate(this.props.num ? this.props.num : 50);\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(5, 9));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(1.5),\n new Proton.Span(0, 360),\n \"polar\"\n )\n );\n emitter.addInitialize(\n new Proton.Position(new Proton.RectZone(0, 0, width, height))\n );\n\n const mouseInfo = {\n x: width / 2,\n y: height / 2\n };\n\n const attractionBehaviour = new Proton.Attraction(mouseInfo, 0, 0);\n const crossZoneBehaviour = new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n \"bound\"\n );\n emitter.addBehaviour(new Proton.Color(this.props.color || \"#bbb\"));\n //emitter.addBehaviour(new Proton.Alpha(new Proton.Span(0.5, 1)));\n emitter.addBehaviour(attractionBehaviour, crossZoneBehaviour);\n emitter.addBehaviour(new Proton.RandomDrift(15, 15, 0.05));\n emitter.emit(\"once\");\n\n this.proton.addEmitter(emitter);\n this.proton.addRenderer(this.createRenderer(canvas));\n this.crossZoneBehaviour = crossZoneBehaviour;\n }\n\n createRenderer(canvas) {\n const jointCount = 10;\n const delayTime = 8;\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CanvasRenderer(canvas);\n\n renderer.onProtonUpdate = function () {\n context.clearRect(0, 0, canvas.width, canvas.height);\n };\n\n renderer.onParticleCreated = particle => {\n particle.data.points = [];\n particle.data.index = 0;\n };\n\n renderer.onParticleUpdate = function (particle) {\n drawTadpoleTail(particle);\n if (particle.data.index % delayTime === 0) fillPointsData(particle);\n drawTadpoleHead(particle);\n particle.data.index++;\n };\n\n const fillPointsData = particle => {\n particle.data.points.unshift(particle.p.y);\n particle.data.points.unshift(particle.p.x);\n\n if (particle.data.points.length > jointCount) {\n particle.data.points.pop();\n particle.data.points.pop();\n }\n };\n\n const drawTadpoleHead = particle => {\n context.fillStyle = particle.color;\n context.beginPath();\n context.arc(\n particle.p.x,\n particle.p.y,\n particle.radius,\n 0,\n Math.PI * 2,\n true\n );\n context.closePath();\n context.fill();\n };\n\n const drawTadpoleTail = particle => {\n context.beginPath();\n context.strokeStyle = particle.color;\n\n context.moveTo(particle.p.x, particle.p.y);\n\n const l = particle.data.points.length;\n for (let i = 0; i < l; i += 2) {\n const x = particle.data.points[i];\n const y = particle.data.points[i + 1];\n\n context.lineWidth = linearEvaluation(i, l);\n context.lineTo(x, y);\n context.stroke();\n }\n };\n\n const linearEvaluation = (i, l) => {\n if (l <= 2) return 1;\n\n const max = 6;\n const A = (max - 1) / (2 / l - 1);\n const B = 1 - A;\n const X = (i + 2) / l;\n let val = A * X + B;\n val = val >> 0;\n\n return val;\n };\n\n return renderer;\n }\n\n renderProton() {\n RAFManager.add(() => {\n this.proton.update();\n //this.proton.stats.update();\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nconst COLOR = [\n \"#f6b93b\",\n \"#18dcff\",\n \"#cd84f1\",\n \"#ED4C67\",\n \"#ffffff\",\n \"#b71540\",\n \"#32ff7e\",\n \"#ff3838\"\n];\n\nexport default class Polygon extends React.Component {\n constructor(props) {\n super(props);\n this.renderProton = this.renderProton.bind(this);\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas);\n this.createEmitter({\n canvas,\n x: width / 2,\n y: height / 2,\n mainEmitter: true,\n zone: \"bound\"\n });\n\n RAFManager.add(this.renderProton);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n onResize() {}\n\n createProton(canvas) {\n this.proton = new Proton();\n const renderer = this.createRenderer(canvas);\n this.proton.addRenderer(renderer);\n }\n\n createRenderer(canvas) {\n const context = canvas.getContext(\"2d\");\n const renderer = new Proton.CustomRenderer();\n\n renderer.onProtonUpdate = () => {\n context.clearRect(0, 0, canvas.width, canvas.height);\n };\n\n renderer.onParticleCreated = particle => {\n particle.data.count = Proton.MathUtil.randomAToB(3, 10, true);\n };\n\n renderer.onParticleUpdate = particle => {\n context.save();\n context.globalAlpha = particle.alpha;\n context.fillStyle = particle.color;\n\n context.translate(particle.p.x, particle.p.y);\n context.rotate(Proton.MathUtil.degreeTransform(particle.rotation));\n context.translate(-particle.p.x, -particle.p.y);\n\n context.beginPath();\n drawPolygon(particle, particle.data.count);\n\n context.closePath();\n context.fill();\n context.globalAlpha = 1;\n context.restore();\n };\n\n renderer.onParticleDead = particle => {};\n\n const drawPolygon = (particle, count) => {\n if (count >= 7) {\n context.arc(\n particle.p.x,\n particle.p.y,\n particle.radius,\n 0,\n Math.PI * 2,\n true\n );\n } else {\n const radius = particle.radius;\n\n for (let i = 0; i <= count; i++) {\n let x =\n particle.p.x +\n radius * Math.cos((((Math.PI / 180) * 360) / count) * i);\n let y =\n particle.p.y +\n radius * Math.sin((((Math.PI / 180) * 360) / count) * i);\n\n if (i === 0) context.moveTo(x, y);\n else context.lineTo(x, y);\n }\n }\n };\n\n return renderer;\n }\n\n createEmitter({\n mainEmitter,\n canvas,\n x,\n y,\n radius,\n color = COLOR,\n zone = \"dead\",\n once = \"all\",\n alpha = 0.85,\n gravity = 3.5\n }) {\n const emitter = this.proton.pool.get(Proton.Emitter);\n\n if (!emitter.completed) {\n emitter.rate = new Proton.Rate(\n this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(4, 9),\n new Proton.Span(1.6, 2.2)\n );\n\n const radiusInit = mainEmitter\n ? new Proton.Radius(10, 110)\n : new Proton.Radius(3, radius);\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(radiusInit);\n emitter.addInitialize(new Proton.Life(3, 6));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(4, 6),\n new Proton.Span(-90, 90),\n \"polar\"\n )\n );\n\n emitter.addBehaviour(new Proton.Alpha(alpha, 0.2));\n emitter.addBehaviour(new Proton.Color(color));\n emitter.addBehaviour(new Proton.Scale(1, 0.3));\n emitter.addBehaviour(new Proton.Rotate());\n emitter.addBehaviour(new Proton.Gravity(gravity));\n\n emitter.addBehaviour(this.customDeadBehaviour(canvas));\n emitter.addBehaviour(\n new Proton.CrossZone(\n new Proton.RectZone(0, 0, canvas.width, canvas.height),\n zone\n )\n );\n }\n\n emitter.p.x = x;\n emitter.p.y = y;\n if (once === \"once\") emitter.emit(\"once\");\n else emitter.emit();\n\n this.proton.addEmitter(emitter);\n //this.expireEmitter(emitter);\n }\n\n expireEmitter(emitter) {\n setTimeout(() => {\n emitter.completed = true;\n this.proton.pool.expire(emitter);\n this.proton.removeEmitter(emitter);\n }, 500);\n }\n\n customDeadBehaviour(canvas) {\n return {\n initialize: particle => {\n particle.data = particle.data || {};\n particle.data.oldRadius = particle.radius;\n particle.data.emitterCount = 0;\n },\n applyBehaviour: particle => {\n if (particle.radius < 5) return;\n if (particle.data.emitterCount >= 2) return;\n\n if (particle.radius <= (1 / 3) * particle.data.oldRadius) {\n particle.data.emitterCount++;\n this.createEmitter({\n canvas,\n x: particle.p.x,\n y: particle.p.y,\n radius: particle.radius * (1 / 2),\n alpha: 0.5,\n gravity: 5,\n color: particle.color,\n once: \"once\"\n });\n }\n }\n };\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React from \"react\";\nimport Proton from \"proton-engine\";\nimport RAFManager from \"raf-manager\";\nimport Canvas from \"./Canvas.jsx\";\n\nexport default class Fountain extends React.Component {\n constructor(props) {\n super(props);\n\n this.colors = [\n \"#529B88\",\n \"#CDD180\",\n \"#FFFA32\",\n \"#FB6255\",\n \"#FB4A53\",\n \"#FF4E50\",\n \"#F9D423\"\n ];\n this.renderProton = this.renderProton.bind(this);\n }\n\n componentWillUnmount() {\n try {\n RAFManager.remove(this.renderProton);\n this.proton.destroy();\n } catch (e) {}\n }\n\n onCanvasInited(canvas, width, height) {\n this.createProton(canvas, width, height);\n RAFManager.add(this.renderProton);\n }\n\n onResize() {}\n\n createProton(canvas, width, height) {\n this.proton = new Proton();\n const emitter = new Proton.Emitter();\n emitter.rate = new Proton.Rate(\n this.props.num ? new Proton.Span(this.props.num) : new Proton.Span(4, 8),\n new Proton.Span(0.1, 0.25)\n );\n\n emitter.addInitialize(new Proton.Mass(1));\n emitter.addInitialize(new Proton.Radius(20, 200));\n emitter.addInitialize(new Proton.Life(2, 4));\n emitter.addInitialize(\n new Proton.Velocity(\n new Proton.Span(4, 7),\n new Proton.Span(0, 360),\n \"polar\"\n )\n );\n emitter.addInitialize(\n new Proton.Position(new Proton.CircleZone(width / 2, height / 2, 100))\n );\n\n emitter.addBehaviour(new Proton.Alpha(1, 0));\n emitter.addBehaviour(new Proton.Scale(0.2, 1));\n emitter.addBehaviour(this.createCustomBehaviour());\n emitter.addBehaviour(new Proton.Color(this.colors, \"random\"));\n emitter.emit();\n this.proton.addEmitter(emitter);\n\n const renderer = new Proton.CanvasRenderer(canvas);\n this.proton.addRenderer(renderer);\n }\n\n createCustomBehaviour() {\n const f = 10 * 100;\n return {\n initialize: function(particle) {\n particle.f = new Proton.Vector2D(0, 0);\n },\n applyBehaviour: particle => {\n let length = particle.v.length() / 1000;\n let gradient = particle.v.getGradient();\n gradient += 3.14 / 2;\n\n particle.f.x = f * length * Math.cos(gradient);\n particle.f.y = f * length * Math.sin(gradient);\n particle.a.add(particle.f);\n }\n };\n }\n\n renderProton() {\n this.proton && this.proton.update();\n }\n\n render() {\n return (\n \n );\n }\n}\n","import React, { Component } from \"react\";\nimport Rand from \"./utils/Rand.js\";\nimport Ball from \"./particles/Ball.jsx\";\nimport Color from \"./particles/Color.jsx\";\nimport Custom from \"./particles/Custom.jsx\";\nimport Lines from \"./particles/Lines.jsx\";\nimport Thick from \"./particles/Thick.jsx\";\nimport Square from \"./particles/Square.jsx\";\nimport Cobweb from \"./particles/Cobweb.jsx\";\nimport Circle from \"./particles/Circle.jsx\";\nimport Tadpole from \"./particles/Tadpole.jsx\";\nimport Polygon from \"./particles/Polygon.jsx\";\nimport Fountain from \"./particles/Fountain.jsx\";\n\nexport default class ParticlesBg extends Component {\n\n constructor(props) {\n super(props);\n }\n\n getRandom() {\n const { num, bg, color } = this.props;\n\n // Code source from here, thanks author\n // https://github.com/drawcall/Proton/blob/gh-pages/source/src/utils/Rand.js\n if (!this.random) {\n this.random = new Rand();\n this.random.set(0.25, \n\t\t\t\t{'Faces Will be Detected Here'}\n\t\t\t