toesbieya
6 years ago
parent
78ce11a336
commit
6e66965193
@ -1,7 +1,5 @@ |
||||
import Vue from 'vue' |
||||
import dragDialog from './dragDialog' |
||||
import ripple from './ripple' |
||||
|
||||
Vue.directive('drag-dialog', dragDialog) |
||||
Vue.directive('ripple', ripple) |
||||
|
||||
|
||||
@ -1,184 +0,0 @@ |
||||
//从quasar处搬运 https://quasar.dev/vue-directives/material-ripple
|
||||
import './style.scss' |
||||
|
||||
let lastKeyCompositionStatus = false |
||||
|
||||
function isKeyCode(evt, keyCodes) { |
||||
return ( |
||||
lastKeyCompositionStatus === true || |
||||
evt !== Object(evt) || |
||||
evt.isComposing === true || |
||||
evt.qKeyEvent === true |
||||
) |
||||
? false |
||||
: [].concat(keyCodes).includes(evt.keyCode) |
||||
} |
||||
|
||||
function css(element, css) { |
||||
let style = element.style |
||||
|
||||
Object.keys(css).forEach(prop => { |
||||
style[prop] = css[prop] |
||||
}) |
||||
} |
||||
|
||||
function position(e) { |
||||
if (e.touches && e.touches[0]) { |
||||
e = e.touches[0] |
||||
} |
||||
else if (e.changedTouches && e.changedTouches[0]) { |
||||
e = e.changedTouches[0] |
||||
} |
||||
else if (e.targetTouches && e.targetTouches[0]) { |
||||
e = e.targetTouches[0] |
||||
} |
||||
|
||||
return { |
||||
top: e.clientY, |
||||
left: e.clientX |
||||
} |
||||
} |
||||
|
||||
function stop(e) { |
||||
e.stopPropagation() |
||||
} |
||||
|
||||
const listenOpts = { |
||||
hasPassive: false, |
||||
passiveCapture: true, |
||||
notPassiveCapture: true |
||||
} |
||||
|
||||
function showRipple(evt, el, ctx, forceCenter) { |
||||
ctx.modifiers.stop === true && stop(evt) |
||||
|
||||
let {center, color} = ctx.modifiers |
||||
center = center === true || forceCenter === true |
||||
|
||||
const |
||||
node = document.createElement('span'), |
||||
innerNode = document.createElement('span'), |
||||
pos = position(evt), |
||||
{left, top, width, height} = el.getBoundingClientRect(), |
||||
diameter = Math.sqrt(width * width + height * height), |
||||
radius = diameter / 2, |
||||
centerX = `${(width - diameter) / 2}px`, |
||||
x = center ? centerX : `${pos.left - left - radius}px`, |
||||
centerY = `${(height - diameter) / 2}px`, |
||||
y = center ? centerY : `${pos.top - top - radius}px` |
||||
|
||||
innerNode.className = 'q-ripple__inner' |
||||
css(innerNode, { |
||||
height: `${diameter}px`, |
||||
width: `${diameter}px`, |
||||
transform: `translate3d(${x},${y},0) scale3d(.2,.2,1)`, |
||||
opacity: 0 |
||||
}) |
||||
|
||||
node.className = `q-ripple${color ? ' text-' + color : ''}` |
||||
node.setAttribute('dir', 'ltr') |
||||
node.appendChild(innerNode) |
||||
el.appendChild(node) |
||||
|
||||
const abort = () => { |
||||
node.remove() |
||||
window.clearTimeout(timer) |
||||
} |
||||
ctx.abort.push(abort) |
||||
|
||||
let timer = window.setTimeout(() => { |
||||
innerNode.classList.add('q-ripple__inner--enter') |
||||
innerNode.style.transform = `translate3d(${centerX},${centerY},0) scale3d(1,1,1)` |
||||
innerNode.style.opacity = 0.2 |
||||
|
||||
timer = window.setTimeout(() => { |
||||
innerNode.classList.remove('q-ripple__inner--enter') |
||||
innerNode.classList.add('q-ripple__inner--leave') |
||||
innerNode.style.opacity = 0 |
||||
|
||||
timer = window.setTimeout(() => { |
||||
node.remove() |
||||
ctx.abort.splice(ctx.abort.indexOf(abort), 1) |
||||
}, 275) |
||||
}, 250) |
||||
}, 50) |
||||
} |
||||
|
||||
function updateCtx(ctx, {value, modifiers, arg}) { |
||||
ctx.enabled = value !== false |
||||
|
||||
if (ctx.enabled === true) { |
||||
ctx.modifiers = Object(value) === value |
||||
? { |
||||
stop: value.stop === true || modifiers.stop === true, |
||||
center: value.center === true || modifiers.center === true, |
||||
color: value.color || arg, |
||||
keyCodes: [].concat(value.keyCodes || 13) |
||||
} |
||||
: { |
||||
stop: modifiers.stop, |
||||
center: modifiers.center, |
||||
color: arg, |
||||
keyCodes: [13] |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default { |
||||
name: 'ripple', |
||||
|
||||
inserted(el, binding) { |
||||
const ctx = { |
||||
modifiers: {}, |
||||
abort: [], |
||||
|
||||
click(evt) { |
||||
if (ctx.enabled === true && evt.qSkipRipple !== true && evt.clientX >= 0) { |
||||
showRipple(evt, el, ctx, evt.qKeyEvent === true) |
||||
} |
||||
}, |
||||
|
||||
keyup(evt) { |
||||
if ( |
||||
ctx.enabled === true && |
||||
evt.qSkipRipple !== true && |
||||
isKeyCode(evt, ctx.modifiers.keyCodes) === true |
||||
) { |
||||
showRipple(evt, el, ctx, true) |
||||
} |
||||
} |
||||
} |
||||
|
||||
updateCtx(ctx, binding) |
||||
|
||||
if (el.__qripple) { |
||||
el.__qripple_old = el.__qripple |
||||
} |
||||
|
||||
const computed = window.getComputedStyle(el) |
||||
if (computed && computed.position === 'static') { |
||||
el.style.position = 'relative' |
||||
el.dataset.previousPosition = 'static' |
||||
} |
||||
|
||||
el.__qripple = ctx |
||||
el.addEventListener('click', ctx.click, listenOpts.passive) |
||||
el.addEventListener('keyup', ctx.keyup, listenOpts.passive) |
||||
}, |
||||
|
||||
update(el, binding) { |
||||
el.__qripple !== void 0 && updateCtx(el.__qripple, binding) |
||||
}, |
||||
|
||||
unbind(el) { |
||||
const ctx = el.__qripple_old || el.__qripple |
||||
if (ctx !== void 0) { |
||||
ctx.abort.forEach(fn => { |
||||
fn() |
||||
}) |
||||
el.removeEventListener('click', ctx.click, listenOpts.passive) |
||||
el.removeEventListener('keyup', ctx.keyup, listenOpts.passive) |
||||
delete el[el.__qripple_old ? '__qripple_old' : '__qripple'] |
||||
} |
||||
} |
||||
} |
||||
@ -1,37 +0,0 @@ |
||||
.q-ripple { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
color: inherit; |
||||
border-radius: inherit; |
||||
z-index: 0; |
||||
pointer-events: none; |
||||
overflow: hidden; |
||||
contain: strict; |
||||
|
||||
&__inner { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
opacity: 0; |
||||
color: inherit; |
||||
border-radius: 50%; |
||||
background: currentColor; |
||||
pointer-events: none; |
||||
will-change: transform, opacity; |
||||
|
||||
&--enter { |
||||
transition: transform .225s cubic-bezier(.4, 0, .2, 1), opacity .1s cubic-bezier(.4, 0, .2, 1) |
||||
} |
||||
|
||||
&--leave { |
||||
transition: opacity .25s cubic-bezier(.4, 0, .2, 1) |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@ -1,34 +0,0 @@ |
||||
let insertEl = false |
||||
|
||||
const image = function ({index = 0, urlList}) { |
||||
if (!window.lightGallery || !Array.isArray(urlList) || urlList.length < 1) { |
||||
return |
||||
} |
||||
|
||||
if (!insertEl) { |
||||
const div = document.createElement('div') |
||||
div.setAttribute('id', 'light-gallery-el') |
||||
div.style.display = 'none' |
||||
document.body.appendChild(div) |
||||
div.addEventListener( |
||||
'onCloseAfter', |
||||
() => window.lgData[div.getAttribute('lg-uid')].destroy(true), |
||||
false |
||||
) |
||||
insertEl = true |
||||
} |
||||
|
||||
window.lightGallery(document.getElementById('light-gallery-el'), { |
||||
index, |
||||
download: false, |
||||
dynamic: true, |
||||
dynamicEl: urlList.map(src => ({src, thumb: src})) |
||||
}) |
||||
} |
||||
|
||||
image.close = function () { |
||||
if (!insertEl) return |
||||
window.lgData[insertEl.getAttribute('lg-uid')].destroy(true) |
||||
} |
||||
|
||||
export default image |
||||
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 379 B |
|
Before Width: | Height: | Size: 351 B |
|
Before Width: | Height: | Size: 284 B |
|
Before Width: | Height: | Size: 305 B |
|
Before Width: | Height: | Size: 490 B |
|
Before Width: | Height: | Size: 961 B |
@ -1,44 +0,0 @@ |
||||
import Vue from 'vue' |
||||
import Main from './main.vue' |
||||
import {isEmpty} from "@/util" |
||||
|
||||
let Constructor = Vue.extend(Main) |
||||
|
||||
export default function ({left, top} = {}) { |
||||
const instance = new Constructor() |
||||
const position = getPosition({height: instance.height + 130, width: instance.width + 20, left, top}) |
||||
|
||||
instance.positionTop = position.top |
||||
instance.positionLeft = position.left |
||||
instance.$mount() |
||||
document.body.appendChild(instance.$el) |
||||
instance.visible = true |
||||
|
||||
return new Promise((resolve, reject) => { |
||||
instance.resolve = resolve |
||||
instance.reject = reject |
||||
}) |
||||
} |
||||
|
||||
function getPosition({height, width, left, top} = {}) { |
||||
const windowHeight = window.innerHeight |
||||
const windowWidth = window.innerWidth |
||||
|
||||
//若任一位置信息为空，直接返回居中位置
|
||||
if (isEmpty(left, top)) { |
||||
return { |
||||
top: center(windowHeight, height), |
||||
left: center(windowWidth, width) |
||||
} |
||||
} |
||||
|
||||
//判断位置是否超出屏幕外
|
||||
if (windowWidth < left + width) left = center(windowWidth, width) |
||||
if (windowHeight < top + height) top = center(windowHeight, height) |
||||
|
||||
return {left, top} |
||||
} |
||||
|
||||
function center(full, part) { |
||||
return Math.round((full - part) / 2) |
||||
} |
||||
@ -1,330 +0,0 @@ |
||||
<template> |
||||
<transition :name="transition" @after-leave="handleAfterLeave"> |
||||
<div |
||||
v-show="visible" |
||||
class="puzzle-container" |
||||
:class="{'puzzle-shake':stat==='fail'}" |
||||
:style="`left: ${positionLeft}px;top: ${positionTop}px;`" |
||||
> |
||||
<div class="puzzle-view" :style="`width:${width}px;height:${height}px;`"> |
||||
<div v-show="!image.loading" style="width: 100%;height: 100%"> |
||||
<img :src="image.src"/> |
||||
|
||||
<canvas ref="puzzleBox" :height="height" :width="width"/> |
||||
|
||||
<div class="puzzle-lost-box" :style="`left:${leftNum}px`"> |
||||
<canvas ref="puzzleShadow" :style="sliderStyle" :height="height" :width="width"/> |
||||
<canvas ref="puzzleLost" :style="sliderStyle" :height="height" :width="width"/> |
||||
</div> |
||||
</div> |
||||
|
||||
<transition name="fade"> |
||||
<div v-show="image.loading" class="puzzle-image-loading"> |
||||
<div class="puzzle-image-loading__icon"/> |
||||
<div class="puzzle-image-loading__text">加载中...</div> |
||||
</div> |
||||
</transition> |
||||
|
||||
<div :class="resultTipClass"> |
||||
{{ stat === 'success' ? '验证通过' : '请正确拼合图像' }} |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="slider-container"> |
||||
<div class="slider-track"> |
||||
<div class="slider-tip" :style="stat==='ready'?'opacity: 1':''">拖动滑块完成拼图</div> |
||||
</div> |
||||
<div class="slider-btn" :style="sliderBtnStyle" @mousedown="moveStart" @touchstart="moveStart"/> |
||||
</div> |
||||
|
||||
<div class="puzzle-footer"> |
||||
<div class="puzzle-small"> |
||||
<a class="puzzle-text-container puzzle-close" @click="close"> |
||||
<div class="puzzle-text-tip">关闭验证</div> |
||||
</a> |
||||
|
||||
<a class="puzzle-text-container puzzle-refresh" @click="refresh"> |
||||
<div class="puzzle-text-tip">刷新验证</div> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</transition> |
||||
</template> |
||||
|
||||
<script> |
||||
import BtnStopImage from './image/btn_stop.png' |
||||
import BtnMoveImage from './image/btn_move.png' |
||||
|
||||
/* |
||||
* https://github.com/Kevin-269581661/vue-puzzle-verification |
||||
* 网上搬的例子，实际开发建议用极验 |
||||
* */ |
||||
export default { |
||||
name: "PuzzleVerify", |
||||
|
||||
props: { |
||||
//动画名称，具体请查看transition.scss |
||||
transition: { |
||||
type: String, |
||||
default: 'scale' |
||||
}, |
||||
// 画布图片的尺寸 |
||||
width: { |
||||
type: Number, |
||||
default: 260 |
||||
}, |
||||
height: { |
||||
type: Number, |
||||
default: 160 |
||||
}, |
||||
// 滑块的大小 |
||||
blockSize: { |
||||
type: Number, |
||||
default: 40 |
||||
}, |
||||
// 误差 |
||||
deviation: { |
||||
type: Number, |
||||
default: 4 |
||||
}, |
||||
// 滑块随机出现的范围 |
||||
padding: { |
||||
type: Number, |
||||
default: 80 |
||||
} |
||||
}, |
||||
|
||||
data() { |
||||
return { |
||||
visible: false, |
||||
stat: 'ready',//ready,move,success,fail,error |
||||
positionLeft: 0, |
||||
positionTop: 0, |
||||
resolve: () => ({}), |
||||
reject: () => ({}), |
||||
moveStartAtX: null, |
||||
randomX: null, |
||||
randomY: null, |
||||
leftNum: 0, |
||||
image: { |
||||
src: '', |
||||
loading: true |
||||
}, |
||||
sliderStyle: { |
||||
left: '0', |
||||
transition: 'inherit' |
||||
} |
||||
} |
||||
}, |
||||
|
||||
computed: { |
||||
resultTipClass() { |
||||
const showResultTip = ['success', 'fail'].includes(this.stat) |
||||
return ['verify-result', `verify-${this.stat}`, showResultTip ? 'show-result' : ''] |
||||
}, |
||||
|
||||
sliderBtnStyle() { |
||||
return { |
||||
...this.sliderStyle, |
||||
'background-image': `url(${this.stat === 'move' ? BtnMoveImage : BtnStopImage})` |
||||
} |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
close() { |
||||
this.visible = false |
||||
this.clear() |
||||
this.reject() |
||||
}, |
||||
|
||||
refresh() { |
||||
this.initImage().then(this.initCanvas) |
||||
}, |
||||
|
||||
initCanvas() { |
||||
this.clear() |
||||
let MinX = this.padding + this.blockSize |
||||
let MaxX = this.width - this.padding - 2 * this.blockSize - this.blockSize / 6 |
||||
let MaxY = this.padding |
||||
let MinY = this.height - this.padding - this.blockSize - this.blockSize / 6 |
||||
this.randomX = Math.round(Math.random() * MaxX + MinX) |
||||
this.randomY = Math.round(Math.random() * MaxY + MinY) |
||||
let X = this.randomX |
||||
let Y = this.randomY |
||||
this.leftNum = -X + 10 |
||||
let d = this.blockSize / 3 |
||||
|
||||
let c = this.$refs.puzzleBox |
||||
let c_l = this.$refs.puzzleLost |
||||
let c_s = this.$refs.puzzleShadow |
||||
let ctx = c.getContext("2d") |
||||
let ctx_l = c_l.getContext("2d") |
||||
let ctx_s = c_s.getContext("2d") |
||||
ctx.globalCompositeOperation = "xor" |
||||
ctx.shadowBlur = 10 |
||||
ctx.shadowColor = "#fff" |
||||
ctx.shadowOffsetX = 3 |
||||
ctx.shadowOffsetY = 3 |
||||
ctx.fillStyle = "rgba(0,0,0,0.7)" |
||||
ctx.beginPath() |
||||
ctx.lineWidth = 1 |
||||
ctx.strokeStyle = "rgba(0,0,0,0)" |
||||
|
||||
ctx.moveTo(X, Y) |
||||
ctx.lineTo(X + d, Y) |
||||
ctx.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y) |
||||
ctx.lineTo(X + 3 * d, Y) |
||||
ctx.lineTo(X + 3 * d, Y + d) |
||||
ctx.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d) |
||||
ctx.lineTo(X + 3 * d, Y + 3 * d) |
||||
ctx.lineTo(X, Y + 3 * d) |
||||
|
||||
ctx.closePath() |
||||
ctx.stroke() |
||||
ctx.fill() |
||||
|
||||
this.drawImage(img => ctx_l.drawImage(img, 0, 0, this.width, this.height)) |
||||
|
||||
ctx_l.beginPath() |
||||
ctx_l.strokeStyle = "rgba(0,0,0,0)" |
||||
|
||||
ctx_l.moveTo(X, Y) |
||||
ctx_l.lineTo(X + d, Y) |
||||
ctx_l.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y) |
||||
ctx_l.lineTo(X + 3 * d, Y) |
||||
ctx_l.lineTo(X + 3 * d, Y + d) |
||||
ctx_l.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d) |
||||
ctx_l.lineTo(X + 3 * d, Y + 3 * d) |
||||
ctx_l.lineTo(X, Y + 3 * d) |
||||
|
||||
ctx_l.closePath() |
||||
ctx_l.stroke() |
||||
ctx_l.shadowBlur = 10 |
||||
ctx_l.shadowColor = "black" |
||||
ctx_l.clip() |
||||
ctx_s.beginPath() |
||||
ctx_s.lineWidth = 1 |
||||
ctx_s.strokeStyle = "rgba(0,0,0,0)" |
||||
|
||||
ctx_s.moveTo(X, Y) |
||||
ctx_s.lineTo(X + d, Y) |
||||
ctx_s.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y) |
||||
ctx_s.lineTo(X + 3 * d, Y) |
||||
ctx_s.lineTo(X + 3 * d, Y + d) |
||||
ctx_s.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d) |
||||
ctx_s.lineTo(X + 3 * d, Y + 3 * d) |
||||
ctx_s.lineTo(X, Y + 3 * d) |
||||
|
||||
ctx_s.closePath() |
||||
ctx_s.stroke() |
||||
ctx_s.shadowBlur = 20 |
||||
ctx_s.shadowColor = "black" |
||||
ctx_s.fill() |
||||
}, |
||||
|
||||
initImage() { |
||||
const imageListTemp = [ |
||||
"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4018557288,1217151095&fm=26&gp=0.jpg", |
||||
"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg", |
||||
"https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" |
||||
] |
||||
this.image.loading = true |
||||
let imgRandomIndex = Math.round(Math.random() * (imageListTemp.length - 1)) |
||||
this.image.src = imageListTemp[imgRandomIndex] |
||||
return new Promise(resolve => resolve()) |
||||
}, |
||||
|
||||
drawImage(fun) { |
||||
let img = new Image() |
||||
img.src = this.image.src |
||||
img.onload = () => { |
||||
fun(img) |
||||
this.image.loading = false |
||||
} |
||||
}, |
||||
|
||||
clear() { |
||||
this.stat = 'ready' |
||||
let c = this.$refs.puzzleBox |
||||
let c_l = this.$refs.puzzleLost |
||||
let c_s = this.$refs.puzzleShadow |
||||
c.setAttribute("height", c.getAttribute("height")) |
||||
c_l.setAttribute("height", c.getAttribute("height")) |
||||
c_s.setAttribute("height", c.getAttribute("height")) |
||||
}, |
||||
|
||||
moveStart(e) { |
||||
if (this.stat !== 'ready') return |
||||
e.preventDefault() |
||||
e.stopPropagation() |
||||
this.moveStartAtX = e.type === 'mousedown' ? e.pageX : e.changedTouches[0].pageX |
||||
this.addListener() |
||||
}, |
||||
|
||||
moving(e) { |
||||
this.stat = 'move' |
||||
const pageX = e.type === 'mousemove' ? e.pageX : e.changedTouches[0].pageX |
||||
const distance = pageX - this.moveStartAtX |
||||
if (this.moveStartAtX === null |
||||
|| distance < 0 |
||||
|| distance > this.width - this.blockSize) { |
||||
return |
||||
} |
||||
this.sliderStyle.left = distance + "px" |
||||
this.sliderStyle.transition = "inherit" |
||||
}, |
||||
|
||||
moveEnd(e) { |
||||
const pageX = e.type === 'mouseup' ? e.pageX : e.changedTouches[0].pageX |
||||
const distance = pageX - this.moveStartAtX |
||||
const ver_Num = this.randomX - 10 |
||||
const minLeft = ver_Num - this.deviation |
||||
const maxLeft = ver_Num + this.deviation |
||||
if (this.moveStartAtX !== null) { |
||||
const success = maxLeft > distance && distance > minLeft |
||||
this.stat = success ? 'success' : 'fail' |
||||
window.setTimeout(() => { |
||||
this.stat = 'ready' |
||||
if (!success) return this.initCanvas() |
||||
this.resolve() |
||||
this.close() |
||||
}, success ? 500 : 1000) |
||||
} |
||||
window.setTimeout(() => { |
||||
this.sliderStyle.left = '0' |
||||
this.sliderStyle.transition = "left 0.5s" |
||||
}, 1000) |
||||
this.moveStartAtX = null |
||||
this.removeListener() |
||||
}, |
||||
|
||||
addListener() { |
||||
if (this.image.loading) return |
||||
window.addEventListener("mousemove", this.moving) |
||||
window.addEventListener("mouseup", this.moveEnd) |
||||
window.addEventListener("touchmove", this.moving) |
||||
window.addEventListener("touchend", this.moveEnd) |
||||
}, |
||||
|
||||
removeListener() { |
||||
window.removeEventListener("mousemove", this.moving) |
||||
window.removeEventListener("mouseup", this.moveEnd) |
||||
window.addEventListener("touchmove", this.moving) |
||||
window.addEventListener("touchend", this.moveEnd) |
||||
}, |
||||
|
||||
handleAfterLeave() { |
||||
this.$destroy(true) |
||||
this.$el.parentNode.removeChild(this.$el) |
||||
} |
||||
}, |
||||
|
||||
mounted() { |
||||
this.refresh() |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" src="./style.scss"></style> |
||||
@ -1,216 +0,0 @@ |
||||
@import "~@/asset/style/variables.scss"; |
||||
|
||||
.puzzle-container { |
||||
position: absolute; |
||||
z-index: 1000; |
||||
box-shadow: 0 0 10px #cccccc; |
||||
border: 1px solid #cccccc; |
||||
background: #ffffff; |
||||
|
||||
.puzzle-text-container { |
||||
&:hover { |
||||
overflow: visible !important; |
||||
} |
||||
|
||||
.puzzle-text-tip { |
||||
position: absolute; |
||||
top: -32px; |
||||
left: 10px; |
||||
border-radius: 2px; |
||||
padding: 0 4px; |
||||
height: 22px; |
||||
min-width: 50px; |
||||
line-height: 22px; |
||||
background-color: #5F5F5F; |
||||
white-space: nowrap; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
color: white; |
||||
|
||||
&::before { |
||||
display: block; |
||||
position: absolute; |
||||
bottom: -6px; |
||||
left: 0; |
||||
content: ''; |
||||
border-style: solid; |
||||
border-width: 4px 6px; |
||||
border-color: #5F5F5F transparent transparent #5F5F5F; |
||||
width: 0; |
||||
height: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.puzzle-view { |
||||
position: relative; |
||||
overflow: hidden; |
||||
margin: 10px 10px 0; |
||||
|
||||
.puzzle-image-loading { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #e5e5e5; |
||||
padding-top: 10%; |
||||
|
||||
&__icon { |
||||
/*background-size: 764.70588%; |
||||
background-position: 0 70.70218%;*/ |
||||
background-image: url(./image/loading.png); |
||||
margin: 11% auto 10px; |
||||
width: 34px; |
||||
height: 26px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
&__text { |
||||
text-align: center; |
||||
font-size: 14px; |
||||
margin-bottom: 1%; |
||||
color: #b2b2b2; |
||||
} |
||||
} |
||||
|
||||
img { |
||||
width: 100%; |
||||
height: 100%; |
||||
object-fit: cover; |
||||
} |
||||
|
||||
.puzzle-lost-box { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
} |
||||
|
||||
canvas { |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 22; |
||||
} |
||||
|
||||
.verify-result { |
||||
position: absolute; |
||||
z-index: 999; |
||||
color: white; |
||||
height: 24px; |
||||
line-height: 24px; |
||||
left: 0; |
||||
bottom: -25px; |
||||
font-size: 14px; |
||||
width: 100%; |
||||
transition: bottom 0.3s; |
||||
text-indent: 16px; |
||||
|
||||
&.verify-success { |
||||
background-color: $--color-success |
||||
} |
||||
|
||||
&.verify-fail { |
||||
background-color: $--color-danger |
||||
} |
||||
|
||||
&.show-result { |
||||
bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.slider-container { |
||||
position: relative; |
||||
margin: 5.39% 3.24%; |
||||
width: 93.52%; |
||||
padding: 0 0 13.67% 0; |
||||
background-color: #ffffff; |
||||
background-image: url(./image/track.png); |
||||
|
||||
.slider-track { |
||||
position: absolute; |
||||
top: 50%; |
||||
margin: -19px 0 0 0; |
||||
padding: 0 0 0 25%; |
||||
|
||||
.slider-tip { |
||||
position: relative; |
||||
width: 100%; |
||||
height: 100%; |
||||
opacity: 0; |
||||
transition: opacity .5s; |
||||
line-height: 38px; |
||||
font-size: 14px; |
||||
text-align: center; |
||||
white-space: nowrap; |
||||
color: #88949d; |
||||
} |
||||
} |
||||
|
||||
.slider-btn { |
||||
position: absolute; |
||||
margin: -4.62% 0 0 -2.31%; |
||||
width: 25.38%; |
||||
padding: 0 0 25.38% 0; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
|
||||
.puzzle-footer { |
||||
position: relative; |
||||
border-top: 1px solid #EEEEEE; |
||||
width: 100%; |
||||
margin: 0; |
||||
padding: 0 0 17.27% 0; |
||||
|
||||
.puzzle-small { |
||||
position: absolute; |
||||
left: 5.1%; |
||||
top: 50%; |
||||
margin-top: -4.13%; |
||||
padding: 0 0 8.27% 0; |
||||
width: 40.45%; |
||||
height: 0; |
||||
|
||||
.puzzle-close, .puzzle-refresh { |
||||
margin-left: 8.9%; |
||||
width: 17.8%; |
||||
cursor: pointer; |
||||
text-decoration: none; |
||||
vertical-align: top; |
||||
position: relative; |
||||
display: inline-block; |
||||
height: 0; |
||||
padding-bottom: 17.8%; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.puzzle-close { |
||||
margin-left: 0; |
||||
background-image: url(./image/icon_close.png); |
||||
} |
||||
|
||||
.puzzle-refresh { |
||||
background: url(./image/icon_refresh_top.png) top center no-repeat, |
||||
url(./image/icon_refresh_bottom.png) center bottom no-repeat; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.puzzle-shake { |
||||
animation: shake 0.2s linear 3 both; |
||||
} |
||||
|
||||
@keyframes shake { |
||||
25% { |
||||
transform: translate3d(-6px, 0, 0) |
||||
} |
||||
75% { |
||||
transform: translate3d(6px, 0, 0) |
||||
} |
||||
100% { |
||||
transform: translate3d(0, 0, 0) |
||||
} |
||||
} |
||||
@ -1,7 +0,0 @@ |
||||
import ImageViewer from './ImageViewer' |
||||
import Verify from './Verify' |
||||
|
||||
export default function (Vue) { |
||||
Vue.prototype.$image = ImageViewer |
||||
Vue.prototype.$verify = Verify |
||||
} |
||||
@ -1,44 +0,0 @@ |
||||
import Vector from "./Vector" |
||||
import Time from "./Time" |
||||
|
||||
export default class Particle { |
||||
constructor(position, velocity = new Vector(), color = 'white', radius = 1, lifetime = 1, mass = 1) { |
||||
this.position = position |
||||
this.velocity = velocity |
||||
this.color = color |
||||
this.radius = radius |
||||
this.lifetime = lifetime |
||||
this.mass = mass |
||||
|
||||
this.isInCanvas = true |
||||
this.createdOn = Time.now() |
||||
} |
||||
|
||||
update(time) { |
||||
if (!this.getRemainingLifetime()) return |
||||
|
||||
this.velocity.add(Particle.GRAVITATION.clone().multiplyScalar(this.mass)) |
||||
this.position.add(this.velocity.clone().multiplyScalar(time.delta)) |
||||
} |
||||
|
||||
render(canvas, context) { |
||||
const remainingLifetime = this.getRemainingLifetime() |
||||
|
||||
if (!remainingLifetime) return |
||||
|
||||
const radius = this.radius * remainingLifetime |
||||
|
||||
context.globalAlpha = remainingLifetime |
||||
context.globalCompositeOperation = 'lighter' |
||||
context.fillStyle = this.color |
||||
|
||||
context.beginPath() |
||||
context.arc(this.position.x, this.position.y, radius, 0, Math.PI * 2) |
||||
context.fill() |
||||
} |
||||
|
||||
getRemainingLifetime() { |
||||
const elapsedLifetime = Time.now() - this.createdOn |
||||
return Math.max(0, this.lifetime - elapsedLifetime) / this.lifetime |
||||
} |
||||
} |
||||
@ -1,20 +0,0 @@ |
||||
import Vector from "./Vector" |
||||
import Trail from "./Trail" |
||||
|
||||
export default class Rocket extends Trail { |
||||
constructor(childFactory, explosionFactory, position, velocity = new Vector()) { |
||||
super(childFactory, position, velocity) |
||||
|
||||
this.explosionFactory = explosionFactory |
||||
this.lifetime = 10 |
||||
} |
||||
|
||||
update(time) { |
||||
if (this.getRemainingLifetime() && this.velocity.y > 0) { |
||||
this.explosionFactory(this) |
||||
this.lifetime = 0 |
||||
} |
||||
|
||||
super.update(time) |
||||
} |
||||
} |
||||
@ -1,20 +0,0 @@ |
||||
export default class Time { |
||||
constructor() { |
||||
const now = Time.now() |
||||
this.delta = 0 |
||||
this.elapsed = 0 |
||||
this.start = now |
||||
this.previous = now |
||||
} |
||||
|
||||
update() { |
||||
const now = Time.now() |
||||
this.delta = now - this.previous |
||||
this.elapsed = now - this.start |
||||
this.previous = now |
||||
} |
||||
|
||||
static now() { |
||||
return Date.now() / 1000 |
||||
} |
||||
} |
||||
@ -1,42 +0,0 @@ |
||||
import Vector from "./Vector" |
||||
import Particle from "./Particle" |
||||
|
||||
export default class Trail extends Particle { |
||||
constructor(childFactory, position, velocity = new Vector(), lifetime = 1, mass = 1) { |
||||
super(position, velocity) |
||||
|
||||
this.childFactory = childFactory |
||||
this.children = [] |
||||
this.lifetime = lifetime |
||||
this.mass = mass |
||||
|
||||
this.isAlive = true |
||||
} |
||||
|
||||
update(time) { |
||||
super.update(time) |
||||
|
||||
// Add a new child on every frame
|
||||
if (this.isAlive && this.getRemainingLifetime()) { |
||||
this.children.push(this.childFactory(this)) |
||||
} |
||||
|
||||
// Remove particles that are dead
|
||||
this.children = this.children.filter(function (child) { |
||||
if (child instanceof Trail) return child.isAlive |
||||
|
||||
return child.getRemainingLifetime() |
||||
}) |
||||
|
||||
// Kill trail if all particles fade away
|
||||
if (!this.children.length) this.isAlive = false |
||||
|
||||
// Update particles
|
||||
this.children.forEach(child => child.update(time)) |
||||
} |
||||
|
||||
render(canvas, context) { |
||||
// Render all children
|
||||
this.children.forEach(child => child.render(canvas, context)) |
||||
} |
||||
} |
||||
@ -1,22 +0,0 @@ |
||||
export default class Vector { |
||||
constructor(x = 0, y = 0) { |
||||
this.x = x |
||||
this.y = y |
||||
} |
||||
|
||||
add(v) { |
||||
this.x += v.x |
||||
this.y += v.y |
||||
return this |
||||
} |
||||
|
||||
multiplyScalar(s) { |
||||
this.x *= s |
||||
this.y *= s |
||||
return this |
||||
} |
||||
|
||||
clone() { |
||||
return new Vector(this.x, this.y) |
||||
} |
||||
} |
||||
@ -1,141 +0,0 @@ |
||||
import Vector from "./Vector" |
||||
import Time from "./Time" |
||||
import Particle from "./Particle" |
||||
import Trail from "./Trail" |
||||
import Rocket from "./Rocket" |
||||
|
||||
Particle.GRAVITATION = new Vector(0, 9.81) |
||||
|
||||
const getTrustParticleFactory = function () { |
||||
function getColor() { |
||||
const hue = Math.floor(Math.random() * 15 + 30) |
||||
return `hsl(${hue}, 100%, 75%` |
||||
} |
||||
|
||||
return function () { |
||||
const position = this.position.clone() |
||||
const velocity = this.velocity.clone().multiplyScalar(-.1) |
||||
velocity.x += (Math.random() - .5) * 8 |
||||
const color = getColor() |
||||
const radius = 1 + Math.random() |
||||
const lifetime = .5 + Math.random() * .5 |
||||
const mass = .01 |
||||
|
||||
return new Particle(position, velocity, color, radius, lifetime, mass) |
||||
} |
||||
} |
||||
|
||||
const getExplosionFactory = function (baseHue) { |
||||
function getColor() { |
||||
const hue = Math.floor(baseHue + Math.random() * 15) % 360 |
||||
const lightness = Math.floor(Math.pow(Math.random(), 2) * 50 + 50) |
||||
return `hsl(${hue}, 100%, ${lightness}%` |
||||
} |
||||
|
||||
function getChildFactory() { |
||||
return function (parent) { |
||||
const direction = Math.random() * Math.PI * 2 |
||||
const force = 8 |
||||
const velocity = new Vector(Math.cos(direction) * force, Math.sin(direction) * force) |
||||
const color = getColor() |
||||
const radius = 1 + Math.random() |
||||
const lifetime = 1 |
||||
const mass = .1 |
||||
|
||||
return new Particle(parent.position.clone(), velocity, color, radius, lifetime, mass) |
||||
} |
||||
} |
||||
|
||||
function getTrail(position) { |
||||
const direction = Math.random() * Math.PI * 2 |
||||
const force = Math.random() * 128 |
||||
const velocity = new Vector(Math.cos(direction) * force, Math.sin(direction) * force) |
||||
const lifetime = .5 + Math.random() |
||||
const mass = .075 |
||||
|
||||
return new Trail(getChildFactory(), position, velocity, lifetime, mass) |
||||
} |
||||
|
||||
return function (parent) { |
||||
let trails = 32 |
||||
while (trails--) { |
||||
parent.children.push(getTrail(parent.position.clone())) |
||||
} |
||||
} |
||||
} |
||||
|
||||
export default class Firework { |
||||
constructor(canvas) { |
||||
this.canvas = canvas |
||||
this.ctx = canvas.getContext('2d') |
||||
this.time = new Time() |
||||
this.rockets = [] |
||||
this.rAF = null |
||||
this.timer = null |
||||
this.stopSign = false |
||||
this.loop = this.loop.bind(this) |
||||
this.addRocket = this.addRocket.bind(this) |
||||
this.start() |
||||
} |
||||
|
||||
start() { |
||||
this.resizeObserver = new ResizeObserver(() => this.resize()) |
||||
this.resizeObserver.observe(this.canvas) |
||||
window.addEventListener('click', this.addRocket) |
||||
this.timer = window.setInterval(this.addRocket, 1000) |
||||
this.resize() |
||||
this.loop() |
||||
} |
||||
|
||||
stop() { |
||||
if (this.resizeObserver) { |
||||
this.resizeObserver.disconnect() |
||||
this.resizeObserver = null |
||||
} |
||||
window.removeEventListener('click', this.addRocket) |
||||
this.stopSign = true |
||||
this.rockets = [] |
||||
this.time = undefined |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
} |
||||
|
||||
loop() { |
||||
if (this.stopSign) { |
||||
this.rAF && window.cancelAnimationFrame(this.rAF) |
||||
this.timer && window.clearInterval(this.timer) |
||||
return |
||||
} |
||||
this.draw() |
||||
this.rAF = window.requestAnimationFrame(this.loop) |
||||
} |
||||
|
||||
draw() { |
||||
this.time.update() |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
|
||||
for (let i = 0; i < this.rockets.length; i++) { |
||||
this.rockets[i].update(this.time) |
||||
this.rockets[i].render(this.canvas, this.ctx) |
||||
} |
||||
} |
||||
|
||||
addRocket() { |
||||
const trustParticleFactory = getTrustParticleFactory() |
||||
const explosionFactory = getExplosionFactory(Math.random() * 360) |
||||
|
||||
const position = new Vector(Math.random() * this.canvas.width, this.canvas.height) |
||||
const thrust = window.innerHeight * .75 |
||||
const angle = Math.PI / -2 + (Math.random() - .5) * Math.PI / 8 |
||||
const velocity = new Vector(Math.cos(angle) * thrust, Math.sin(angle) * thrust) |
||||
const lifetime = 3 |
||||
|
||||
this.rockets.push(new Rocket(trustParticleFactory, explosionFactory, position, velocity, lifetime)) |
||||
|
||||
this.rockets = this.rockets.filter(rocket => rocket.isAlive) |
||||
} |
||||
|
||||
resize() { |
||||
this.canvas.width = window.innerWidth |
||||
this.canvas.height = window.innerHeight |
||||
} |
||||
} |
||||
@ -1,95 +0,0 @@ |
||||
function mountainHeight(position, roughness) { |
||||
let frequencies = [1721, 947, 547, 233, 73, 31, 7] |
||||
return frequencies.reduce((height, freq) => height * roughness - Math.cos(freq * position), 0) |
||||
} |
||||
|
||||
export default class Godrays { |
||||
constructor(canvas) { |
||||
this.canvas = canvas |
||||
this.ctx = canvas.getContext('2d') |
||||
this.frame = 0 |
||||
this.godraysCanvas = canvas.cloneNode() |
||||
this.godraysCtx = this.godraysCanvas.getContext('2d') |
||||
this.rAF = null |
||||
this.stopSign = false |
||||
this.loop = this.loop.bind(this) |
||||
this.start() |
||||
} |
||||
|
||||
start() { |
||||
this.resizeObserver = new ResizeObserver(() => this.resize()) |
||||
this.resizeObserver.observe(this.canvas) |
||||
this.resize() |
||||
this.loop() |
||||
} |
||||
|
||||
stop() { |
||||
if (this.resizeObserver) { |
||||
this.resizeObserver.disconnect() |
||||
this.resizeObserver = null |
||||
} |
||||
this.stopSign = true |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
this.godraysCtx.clearRect(0, 0, this.godraysCanvas.width, this.godraysCanvas.height) |
||||
} |
||||
|
||||
loop() { |
||||
if (this.stopSign) { |
||||
this.rAF && window.cancelAnimationFrame(this.rAF) |
||||
return |
||||
} |
||||
this.draw() |
||||
this.rAF = window.requestAnimationFrame(this.loop) |
||||
} |
||||
|
||||
draw() { |
||||
this.canvas.width = 512 |
||||
this.canvas.height = 256 |
||||
this.godraysCanvas.width = 128 |
||||
this.godraysCanvas.height = 64 |
||||
let sunY = Math.cos(this.frame++ / 512) * 24 |
||||
let emissionGradient = this.godraysCtx.createRadialGradient( |
||||
this.godraysCanvas.width / 2, this.godraysCanvas.height / 2 + sunY, // The sun's center.
|
||||
0, // Start radius.
|
||||
this.godraysCanvas.width / 2, this.godraysCanvas.height / 2 + sunY, // Sun's center again.
|
||||
44 // End radius.
|
||||
) |
||||
this.godraysCtx.fillStyle = emissionGradient |
||||
emissionGradient.addColorStop(.1, '#0C0804') // Color for pixels in radius 0 to 4.4 (44 * .1).
|
||||
emissionGradient.addColorStop(.2, '#060201') // Color for everything past radius 8.8.
|
||||
this.godraysCtx.fillRect(0, 0, this.godraysCanvas.width, this.godraysCanvas.height) |
||||
this.godraysCtx.fillStyle = '#000' |
||||
let skyGradient = this.ctx.createLinearGradient(0, 0, 0, this.canvas.height) |
||||
skyGradient.addColorStop(0, '#2a3e55') // Blueish at the top.
|
||||
skyGradient.addColorStop(.7, '#8d4835') // Reddish at the bottom.
|
||||
this.ctx.fillStyle = skyGradient |
||||
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height) |
||||
|
||||
for (let i = 0; i < 4; i++) { |
||||
this.ctx.fillStyle = `hsl(7, 23%, ${23 - i * 6}%)` |
||||
for (let x = this.canvas.width; x--;) { |
||||
let mountainPosition = (this.frame + this.frame * i * i) / 3000 + x / 2000 |
||||
let mountainRoughness = i / 19 - .5 |
||||
let y = 128 + i * 25 + mountainHeight(mountainPosition, mountainRoughness) * 45 |
||||
this.ctx.fillRect(x, y, 1, 999) |
||||
this.godraysCtx.fillRect(x / 4, y / 4 + 1, 1, 999) |
||||
} |
||||
} |
||||
this.ctx.globalCompositeOperation = this.godraysCtx.globalCompositeOperation = 'lighter' |
||||
for (let scaleFactor = 1.07; scaleFactor < 5; scaleFactor *= scaleFactor) { |
||||
this.godraysCtx.drawImage( |
||||
this.godraysCanvas, |
||||
(this.godraysCanvas.width - this.godraysCanvas.width * scaleFactor) / 2, |
||||
(this.godraysCanvas.height - this.godraysCanvas.height * scaleFactor) / 2 - sunY * scaleFactor + sunY, |
||||
this.godraysCanvas.width * scaleFactor, |
||||
this.godraysCanvas.height * scaleFactor |
||||
) |
||||
} |
||||
this.ctx.drawImage(this.godraysCanvas, 0, 0, this.canvas.width, this.canvas.height) |
||||
} |
||||
|
||||
resize() { |
||||
this.canvas.width = window.innerWidth |
||||
this.canvas.height = window.innerHeight |
||||
} |
||||
} |
||||
@ -1,261 +0,0 @@ |
||||
// Currently in Chrome you need to click the "Get Adobe Flash" button so it'll ask you if you want to
|
||||
// allow flash to run.
|
||||
|
||||
// The rest of this is formatted as:
|
||||
// // Explanation of the compressed code
|
||||
// // ...
|
||||
//
|
||||
// // Commented out, compressed code
|
||||
//
|
||||
// Readable (more or less) version of the code
|
||||
// ...
|
||||
|
||||
window.addEventListener("DOMContentLoaded", go) |
||||
|
||||
function go() { |
||||
"use strict" |
||||
// JS1K's HTML shim gives us a canvas (a) and its 2D context (c) for free. We'll set them up here.
|
||||
|
||||
let canvas = document.querySelector('canvas') |
||||
let ctx = canvas.getContext('2d') |
||||
|
||||
// First off - we define an abbreviation function. This takes an object, iterates over its properties
|
||||
// and stores their names as strings in a 2 or 3 letter variable ("this" is the window object).
|
||||
//
|
||||
// p[0]+p[6] will evaluate to the 1st and 7th letter (or the 1st+"undefined" if there's no 7th),
|
||||
// [p[20]] will be an empty string if the property's name is too short ([undefined] gets coerced to
|
||||
// an empty string).
|
||||
//
|
||||
// This is a variation on Marijn Haverbeke's technique - see https://marijnhaverbeke.nl/js1k/
|
||||
//
|
||||
// We won't be using it in the readable version of the demo.
|
||||
|
||||
// A=o=>{for(p in o)this[p[0]+p[6]+[p[20]]]=p}
|
||||
|
||||
// Next we abbreviate all the properties in our window object because requestAnimationFrame() is
|
||||
// kind of long. We can't call A(window) because it will try to abbreviate all our abbreviations (since
|
||||
// it stores them in the window object) so we'll use it on "top" which has the same properties.
|
||||
// We really just need a shorter requestAnimationFrame().
|
||||
//
|
||||
// Sidenote: this is a clear violation of JS1K rules, which is why it's very important not to read them
|
||||
// before the competition is over.
|
||||
|
||||
// A(top)
|
||||
|
||||
// Now, since our demo is fairly heavy we use a small canvas, but we want it to be fullscreen on a
|
||||
// black background, so we waste ~90 bytes on some CSS to stretch it (currently "object-fit:contain"
|
||||
// doesn't work for canvas on MS browsers).
|
||||
//
|
||||
// To avoid wasting 90 bytes just on this, we take this opportunity to define P and Q as 'width' and
|
||||
// 'height' for later. This is probably a mistake since I ended up packing it with regpack anyway.
|
||||
//
|
||||
// The weird bit at the end is an ES6 template literal being abused to call the array's join method
|
||||
// with something that will be coerced into the string ':100%;'.
|
||||
|
||||
// a.style=[P='width',Q='height','object-fit:contain;background:#000'].join`:100%;`
|
||||
|
||||
canvas.style = 'width: 100%; height: 100%; object-fit:contain; background:#000;' |
||||
|
||||
// Now we need a frame counter.
|
||||
|
||||
// t=0
|
||||
|
||||
let frame = 0 |
||||
|
||||
// B() is the requestAnimationFrame callback.
|
||||
|
||||
// B=_=>{
|
||||
|
||||
function onFrame() { |
||||
// Set width and height on our canvases, we'll be using a smaller canvas for the godrays. This
|
||||
// also clears and resets their states. While we're at it, we'll store their dimensions in one
|
||||
// letter vars for later.
|
||||
|
||||
// w=a[P]=512
|
||||
// h=a[Q]=256
|
||||
// W=E[P]=128
|
||||
// H=E[Q]=64
|
||||
|
||||
canvas.width = 512 |
||||
canvas.height = 256 |
||||
godraysCanvas.width = 128 |
||||
godraysCanvas.height = 64 |
||||
|
||||
// Set the sun's vertical position.
|
||||
|
||||
// T=C(t++/w)*24
|
||||
|
||||
let sunY = Math.cos(frame++ / 512) * 24 // This is actually the offset from the middle of the canvas. |
||||
|
||||
// Get the 2D context for our godrays canvas, and create abbreviations for all the context properties.
|
||||
|
||||
// A(F=E.getContext`2d`)
|
||||
|
||||
let godraysCtx = godraysCanvas.getContext('2d') |
||||
|
||||
// Now we set the godrays' context fillstyle (window.fy is 'fillStyle') to a newly created gradient
|
||||
// (cr is 'createRadialGradient') which we also run through our abbreviator.
|
||||
|
||||
// A(F[fy]=g=F[cR](H,32+T,0,H,32+T,44)) // Could have shaved one more char here...
|
||||
|
||||
let emissionGradient = godraysCtx.createRadialGradient( |
||||
godraysCanvas.width / 2, godraysCanvas.height / 2 + sunY, // The sun's center.
|
||||
0, // Start radius.
|
||||
godraysCanvas.width / 2, godraysCanvas.height / 2 + sunY, // Sun's center again.
|
||||
44 // End radius.
|
||||
) |
||||
godraysCtx.fillStyle = emissionGradient |
||||
|
||||
// Now we addColorStops. This needs to be a dark gradient because our godrays effect will basically
|
||||
// overlay it on top of itself many many times, so anything lighter will result in lots of white.
|
||||
//
|
||||
// If you're not space-bound you can add another stop or two, maybe fade out to black, but this
|
||||
// actually looks good enough.
|
||||
|
||||
// g[ao](.1,'#0C0804')
|
||||
// g[ao](.2,'#060201')
|
||||
|
||||
emissionGradient.addColorStop(.1, '#0C0804') // Color for pixels in radius 0 to 4.4 (44 * .1).
|
||||
emissionGradient.addColorStop(.2, '#060201') // Color for everything past radius 8.8.
|
||||
|
||||
// Now paint the gradient all over our godrays canvas.
|
||||
|
||||
// F[fc](0,0,W,H)
|
||||
|
||||
godraysCtx.fillRect(0, 0, godraysCanvas.width, godraysCanvas.height) |
||||
|
||||
// And set the fillstyle to black, we'll use it to paint our occlusion (mountains).
|
||||
|
||||
// F[fy]='#000'
|
||||
|
||||
godraysCtx.fillStyle = '#000' |
||||
|
||||
// For our 1K demo, we paint our sky a solid #644 reddish-brown. But here - let's do it right.
|
||||
|
||||
// c[fy]=g='#644'
|
||||
// c[fc](0,0,w,h)
|
||||
|
||||
let skyGradient = ctx.createLinearGradient(0, 0, 0, canvas.height) |
||||
skyGradient.addColorStop(0, '#2a3e55') // Blueish at the top.
|
||||
skyGradient.addColorStop(.7, '#8d4835') // Reddish at the bottom.
|
||||
ctx.fillStyle = skyGradient |
||||
ctx.fillRect(0, 0, canvas.width, canvas.height) |
||||
|
||||
// Our mountains will be made by summing up sine waves of varying frequencies and amplitudes.
|
||||
|
||||
// m=(f,j)=>[1721,947,547,233,73,31,7].reduce((a,v)=>a*j-C(f*v),0)
|
||||
|
||||
function mountainHeight(position, roughness) { |
||||
// Our frequencies (prime numbers to avoid extra repetitions).
|
||||
let frequencies = [1721, 947, 547, 233, 73, 31, 7] |
||||
// Add them up.
|
||||
return frequencies.reduce((height, freq) => height * roughness - Math.cos(freq * position), 0) |
||||
} |
||||
|
||||
// Draw 4 layers of mountains.
|
||||
|
||||
// for(i=0;i<4;i++)for(X=w,c[fy]=`hsl(7,23%,${23-i*6}%`;X--;F[fc](X/4,U/4+1,1,w))c[fc](X,U=W+i*25+m((t+t*i*i)/1e3+X/2e3,i/19-.5)*45,1,w)
|
||||
|
||||
for (let i = 0; i < 4; i++) { |
||||
// Set the main canvas fillStyle to a shade of brown with variable lightness (darker at the front).
|
||||
ctx.fillStyle = `hsl(7, 23%, ${23 - i * 6}%)` |
||||
// For each column in our canvas...
|
||||
for (let x = canvas.width; x--;) { |
||||
// Ok, I don't really remember the details here, basically the (frame+frame*i*i) makes the
|
||||
// near mountains move faster than the far ones. We divide by large numbers because our
|
||||
// mountains repeat at position 1/7*Math.PI*2 or something like that...
|
||||
let mountainPosition = (frame + frame * i * i) / 1000 + x / 2000 |
||||
// Make further mountains more jagged, adds a bit of realism and also makes the godrays
|
||||
// look nicer.
|
||||
let mountainRoughness = i / 19 - .5 |
||||
// 128 is the middle, i * 25 moves the nearer mountains lower on the screen.
|
||||
let y = 128 + i * 25 + mountainHeight(mountainPosition, mountainRoughness) * 45 |
||||
// Paint a 1px-wide rectangle from the mountain's top to below the bottom of the canvas.
|
||||
ctx.fillRect(x, y, 1, 999) // 999 can be any large number...
|
||||
// Paint the same thing in black on the godrays emission canvas, which is 1/4 the size,
|
||||
// and move it one pixel down (otherwise there can be a tiny underlit space between the
|
||||
// mountains and the sky).
|
||||
godraysCtx.fillRect(x / 4, y / 4 + 1, 1, 999) |
||||
} |
||||
} |
||||
|
||||
// The godrays are generated by adding up RGB values, gCt is the bane of all js golfers -
|
||||
// globalCompositeOperation. Set it to 'lighter' on both canvases.
|
||||
|
||||
// c[gCt]=F[gCt]='lighter'
|
||||
|
||||
ctx.globalCompositeOperation = godraysCtx.globalCompositeOperation = 'lighter' |
||||
|
||||
// NOW - let's light this motherfucker up! We'll make several passes over our emission canvas,
|
||||
// each time adding an enlarged copy of it to itself so at the first pass we get 2 copies, then 4,
|
||||
// then 8, then 16 etc... We square our scale factor at each iteration.
|
||||
|
||||
// for(s=1.07;s<5;s*=s)F[da](E,(W-W*s)/2,(H-H*s)/2-T*s+T,W*s,H*s)
|
||||
|
||||
for (let scaleFactor = 1.07; scaleFactor < 5; scaleFactor *= scaleFactor) { |
||||
// The x, y, width and height arguments for drawImage keep the light source (godraysCanvas.width
|
||||
// / 2, godraysCanvas.height / 2 + sunY) in the same spot on the enlarged copy. It basically boils
|
||||
// down to multiplying a 2D matrix by itself. There's probably a better way to do this, but I
|
||||
// couldn't figure it out.
|
||||
godraysCtx.drawImage( |
||||
godraysCanvas, |
||||
(godraysCanvas.width - godraysCanvas.width * scaleFactor) / 2, |
||||
(godraysCanvas.height - godraysCanvas.height * scaleFactor) / 2 - sunY * scaleFactor + sunY, |
||||
godraysCanvas.width * scaleFactor, |
||||
godraysCanvas.height * scaleFactor |
||||
) |
||||
} |
||||
|
||||
// Now that our godrays are rendered, draw them to our output canvas (whose globalCompositeOperation
|
||||
// is already set to 'lighter').
|
||||
|
||||
// c[da](E,0,0,w,h)
|
||||
|
||||
ctx.drawImage(godraysCanvas, 0, 0, canvas.width, canvas.height) |
||||
|
||||
// All done.
|
||||
|
||||
// this[rte](B)}
|
||||
|
||||
window.requestAnimationFrame(onFrame) |
||||
} |
||||
|
||||
// Call our requestAnimationFrame handler to start rendering. Since it takes no arguments use the argument
|
||||
// list to create our godrays canvas with cloneNode, which also takes no arguments... use it to setup a
|
||||
// Math.cos shortcut (we'll skip this in our longform version).
|
||||
|
||||
// B(E=a.cloneNode(C=Math.cos))
|
||||
|
||||
let godraysCanvas = canvas.cloneNode() |
||||
onFrame() |
||||
|
||||
// Phew... that took a while, but we're finally done with the visuals. Now for the audio part -
|
||||
//
|
||||
// The synthesizer is based on the Karplus-Strong algorithm which uses a very short delay loop as a
|
||||
// resonator. I was initially aiming for a realistic string quartet but time and space constraints
|
||||
// have forced me to massively compromise.
|
||||
//
|
||||
//
|
||||
// The music is a 64-note melody that ends up an octave above where it started, spread out in a 4-voice
|
||||
// canon. We pre-render a single voice and then add up 4 in our ScriptProcessor callback.
|
||||
|
||||
// Big hairy render loop, let's break it to pieces and explain...
|
||||
|
||||
// for(M=[Y=[V=J=I=i=0]];i<h;i++)for(j=2e4;j--;T=Y[I|0]=M[J++]=O%9)O=Math.random()-.5+T/5+Y[(I=++I%(7e3/2**(("!!----,*,(444420/20/-0/---,,--//((4444202/;;;;986986420/00--//,,".charCodeAt(i&63)+12*(i>>6))/12)))|0]*.8||0
|
||||
|
||||
let encodedMelody = "!!----,*,(444420/20/-0/---,,--//((4444202/;;;;986986420/00--//,," |
||||
|
||||
// M=[Y=[V=J=I=i=0]]
|
||||
let voiceBuffer = [] // M = [...]
|
||||
let ksDelayBuffer = [] // Y = [...]
|
||||
let sampleOffset = 0 // V = 0 (used later)
|
||||
let J = 0 // What the hell is J????
|
||||
|
||||
// Oh fuck it. It's 4am and I have no idea how this thing works. Maybe I'll write it up later.
|
||||
// Besides, you just came here for the godrays, right?
|
||||
|
||||
// A(G=new AudioContext)
|
||||
// A(S=G[cSr](w*8,0,1))
|
||||
// S[oo]=e=>{A(e);A(o=e[oB]);for(i=0;i<w*8;o[gn](0)[i++]=O/32,V++)for(O=0,K=4;K--;O+=T>0&&M[T%J])T=V-(K/32*9)*J}
|
||||
// S.connect(G[da])
|
||||
} |
||||
@ -1,30 +0,0 @@ |
||||
export default class Particle { |
||||
constructor() { |
||||
this.angleX = Math.random() * Math.PI * 2 |
||||
this.angleY = Math.random() * Math.PI * 2 |
||||
this.speedX = Math.random() |
||||
this.speedY = Math.random() |
||||
this.radius = 500 |
||||
} |
||||
|
||||
update({ctx, width, height, gravityDistance, mousePos}, speed = 0.035) { |
||||
let x = Math.cos(this.angleX) * this.radius, |
||||
y = Math.sin(this.angleY) * this.radius, |
||||
currentSpeedX = this.speedX * speed, |
||||
currentSpeedY = this.speedY * speed |
||||
|
||||
if (Math.abs(mousePos.x - width / 2 - x) < gravityDistance && Math.abs(mousePos.y - height / 2 - y) < gravityDistance) { |
||||
currentSpeedX = currentSpeedX * (Math.abs(mousePos.x - width / 2 - x) / gravityDistance) * 0.5 |
||||
currentSpeedY = currentSpeedY * (Math.abs(mousePos.y - height / 2 - y) / gravityDistance) * 0.5 |
||||
} |
||||
|
||||
this.angleX += currentSpeedX |
||||
this.angleY += currentSpeedY |
||||
|
||||
ctx.beginPath() |
||||
ctx.fillStyle = "white" |
||||
|
||||
ctx.arc(width / 2 + x, height / 2 + y, 2.5, 0, Math.PI * 2, false) |
||||
ctx.fill() |
||||
} |
||||
} |
||||
@ -1,71 +0,0 @@ |
||||
import Particle from "./Particle" |
||||
|
||||
export default class MoveFollowMouse { |
||||
constructor(canvas, {num = 10, gravityDistance = 100} = {}) { |
||||
this.canvas = canvas |
||||
this.ctx = canvas.getContext('2d') |
||||
this.rAF = null |
||||
this.stopSign = false |
||||
this.particles = [] |
||||
this.num = num |
||||
this.gravityDistance = gravityDistance |
||||
this.mousePos = {x: 0, y: 0} |
||||
this.loop = this.loop.bind(this) |
||||
this.getMousePos = this.getMousePos.bind(this) |
||||
this.start() |
||||
} |
||||
|
||||
start() { |
||||
for (let i = 0; i < this.num; i += 1) { |
||||
this.particles.push(new Particle()) |
||||
} |
||||
this.resizeObserver = new ResizeObserver(() => this.resize()) |
||||
this.resizeObserver.observe(this.canvas) |
||||
window.addEventListener('mousemove', this.getMousePos) |
||||
this.resize() |
||||
this.loop() |
||||
} |
||||
|
||||
stop() { |
||||
if (this.resizeObserver) { |
||||
this.resizeObserver.disconnect() |
||||
this.resizeObserver = null |
||||
} |
||||
window.removeEventListener('mousemove', this.getMousePos) |
||||
this.stopSign = true |
||||
this.particles = [] |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
} |
||||
|
||||
loop() { |
||||
if (this.stopSign) { |
||||
this.rAF && window.cancelAnimationFrame(this.rAF) |
||||
return |
||||
} |
||||
this.draw() |
||||
this.rAF = window.requestAnimationFrame(this.loop) |
||||
} |
||||
|
||||
draw() { |
||||
this.ctx.clearRect(0, 0, this.width, this.height) |
||||
for (let i = 0; i < this.num; i += 1) { |
||||
this.particles[i].update({ |
||||
ctx: this.ctx, |
||||
width: this.width, |
||||
height: this.height, |
||||
gravityDistance: this.gravityDistance, |
||||
mousePos: this.mousePos |
||||
}) |
||||
} |
||||
} |
||||
|
||||
getMousePos(evt) { |
||||
const rect = this.canvas.getBoundingClientRect() |
||||
this.mousePos = {x: evt.clientX - rect.left, y: evt.clientY - rect.top} |
||||
} |
||||
|
||||
resize() { |
||||
this.width = this.canvas.width = window.innerWidth |
||||
this.height = this.canvas.height = window.innerHeight |
||||
} |
||||
} |
||||
@ -1,90 +0,0 @@ |
||||
import Vector from "./Vector" |
||||
import util from "./util" |
||||
|
||||
export default class Particle { |
||||
constructor({add, sphereRad, fLen, dotImageList}) { |
||||
this.distPos = { |
||||
theta: add === true ? Math.PI / 2 : Math.random() * Math.PI, |
||||
phi: 2 * Math.random() * Math.PI |
||||
} |
||||
|
||||
this.distPos.x = sphereRad * Math.sin(this.distPos.theta) * Math.cos(this.distPos.phi) |
||||
this.distPos.y = sphereRad * Math.sin(this.distPos.theta) * Math.sin(this.distPos.phi) |
||||
this.distPos.z = sphereRad * Math.cos(this.distPos.theta) |
||||
this.distVec = new Vector(this.distPos.x, this.distPos.y, this.distPos.z) |
||||
this.unitVec = this.distVec.unit() |
||||
|
||||
this.startVec = this.distVec.multiply(1 + Math.random() * 2) |
||||
this.x = this.startVec.x |
||||
this.y = this.startVec.y |
||||
this.z = this.startVec.z |
||||
|
||||
this.veloRate = 1 + Math.random() |
||||
this.velo = this.unitVec.negative().multiply(this.veloRate) |
||||
this.finalVelo = 0 |
||||
this.m = fLen / (fLen - this.z) |
||||
|
||||
this.age = this.life = 50 + Math.floor(Math.random() * 500) |
||||
this.turnAngle = 0 |
||||
this.wanderTime = 200 |
||||
this.radius = 1 + Math.random() * 3 |
||||
|
||||
let colorRandom = Math.floor(Math.random() * 4) |
||||
switch (colorRandom) { |
||||
case 0: |
||||
this.img = dotImageList[0] |
||||
this.color = "rgba(70,255,140," |
||||
break |
||||
case 1: |
||||
this.img = dotImageList[1] |
||||
this.color = "rgba(90,90,90," |
||||
break |
||||
case 2: |
||||
this.img = dotImageList[2] |
||||
break |
||||
case 3: |
||||
this.img = dotImageList[3] |
||||
break |
||||
} |
||||
} |
||||
|
||||
update({sphereRad, fLen, turnSpeed}) { |
||||
this.nowPos = new Vector(this.x, this.y, this.z) |
||||
this.nowPosUnit = this.nowPos.unit() |
||||
|
||||
if (this.wanderTime > 0 && this.nowPos.length() > (sphereRad * 1.2)) { |
||||
this.wanderTime-- |
||||
this.velo.x += 0.1 * (Math.random() * 2 - 1) |
||||
this.velo.y += 0.1 * (Math.random() * 2 - 1) |
||||
this.velo.z += 0.1 * (Math.random() * 2 - 1) |
||||
this.x = this.x + this.velo.x |
||||
this.y = this.y + this.velo.y |
||||
this.z = this.z + this.velo.z |
||||
this.op = util.map(this.nowPos.length(), sphereRad, this.startVec.length(), 1, 0) |
||||
} |
||||
else if (this.nowPos.length() > sphereRad) { |
||||
if (this.finalPos === 0) { |
||||
this.finalPos = this.nowPosUnit.multiply(sphereRad) |
||||
} |
||||
if (this.finalVelo === 0) { |
||||
this.finalVelo = this.nowPosUnit.negative().multiply(this.veloRate) |
||||
} |
||||
this.x = this.x + this.finalVelo.x |
||||
this.y = this.y + this.finalVelo.y |
||||
this.z = this.z + this.finalVelo.z |
||||
this.op = util.map(this.nowPos.length(), sphereRad, this.startVec.length(), 1, 0) |
||||
} |
||||
else { |
||||
this.op = this.life / (this.age / 2) |
||||
this.turnAngle = (this.turnAngle + turnSpeed) % (Math.PI * 2) |
||||
let cosAngle = Math.cos(turnSpeed) |
||||
let sinAngle = Math.sin(turnSpeed) |
||||
this.x = cosAngle * this.nowPos.x + sinAngle * this.nowPos.z |
||||
this.z = -sinAngle * this.nowPos.x + cosAngle * this.nowPos.z |
||||
this.y = this.nowPos.y |
||||
this.life-- |
||||
} |
||||
|
||||
this.m = fLen / (fLen - this.z) |
||||
} |
||||
} |
||||
@ -1,74 +0,0 @@ |
||||
export default class Vector { |
||||
constructor(x, y, z) { |
||||
this.x = x || 0 |
||||
this.y = y || 0 |
||||
this.z = z || 0 |
||||
} |
||||
|
||||
negative() { |
||||
return new Vector(-this.x, -this.y, -this.z) |
||||
} |
||||
|
||||
add(v) { |
||||
if (v instanceof Vector) return new Vector(this.x + v.x, this.y + v.y, this.z + v.z) |
||||
else return new Vector(this.x + v, this.y + v, this.z + v) |
||||
} |
||||
|
||||
subtract(v) { |
||||
if (v instanceof Vector) return new Vector(this.x - v.x, this.y - v.y, this.z - v.z) |
||||
else return new Vector(this.x - v, this.y - v, this.z - v) |
||||
} |
||||
|
||||
multiply(v) { |
||||
if (v instanceof Vector) return new Vector(this.x * v.x, this.y * v.y, this.z * v.z) |
||||
else return new Vector(this.x * v, this.y * v, this.z * v) |
||||
} |
||||
|
||||
divide(v) { |
||||
if (v instanceof Vector) return new Vector(this.x / v.x, this.y / v.y, this.z / v.z) |
||||
else return new Vector(this.x / v, this.y / v, this.z / v) |
||||
} |
||||
|
||||
dot(v) { |
||||
return this.x * v.x + this.y * v.y + this.z * v.z |
||||
} |
||||
|
||||
cross(v) { |
||||
return new Vector( |
||||
this.y * v.z - this.z * v.y, |
||||
this.z * v.x - this.x * v.z, |
||||
this.x * v.y - this.y * v.x |
||||
) |
||||
} |
||||
|
||||
length() { |
||||
return Math.sqrt(this.dot(this)) |
||||
} |
||||
|
||||
unit() { |
||||
return this.divide(this.length()) |
||||
} |
||||
|
||||
min() { |
||||
return Math.min(Math.min(this.x, this.y), this.z) |
||||
} |
||||
|
||||
max() { |
||||
return Math.max(Math.max(this.x, this.y), this.z) |
||||
} |
||||
|
||||
angleTo(a) { |
||||
return Math.acos(this.dot(a) / (this.length() * a.length())) |
||||
} |
||||
|
||||
clone() { |
||||
return new Vector(this.x, this.y, this.z) |
||||
} |
||||
|
||||
init(x, y, z) { |
||||
this.x = x |
||||
this.y = y |
||||
this.z = z |
||||
return this |
||||
} |
||||
} |
||||
@ -1,91 +0,0 @@ |
||||
import Particle from "./Particle" |
||||
|
||||
export default class ParticleBall { |
||||
constructor(canvas, {sphereRad = 130, fLen = 300, maxParticle = 400, turnSpeed = 0.005} = {}) { |
||||
this.canvas = canvas |
||||
this.ctx = canvas.getContext("2d") |
||||
this.rAF = null |
||||
this.stopSign = false |
||||
this.sphereRad = sphereRad |
||||
this.fLen = fLen |
||||
this.maxParticle = maxParticle |
||||
this.turnSpeed = turnSpeed |
||||
this.particles = [] |
||||
this.loop = this.loop.bind(this) |
||||
this.start() |
||||
} |
||||
|
||||
start() { |
||||
this.resizeObserver = new ResizeObserver(() => this.resize()) |
||||
this.resizeObserver.observe(this.canvas) |
||||
this.resize() |
||||
this.initDot() |
||||
this.loop() |
||||
} |
||||
|
||||
stop() { |
||||
if (this.resizeObserver) { |
||||
this.resizeObserver.disconnect() |
||||
this.resizeObserver = null |
||||
} |
||||
this.stopSign = true |
||||
this.particles = [] |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
} |
||||
|
||||
loop() { |
||||
if (this.stopSign) { |
||||
this.rAF && window.cancelAnimationFrame(this.rAF) |
||||
return |
||||
} |
||||
this.draw() |
||||
this.rAF = window.requestAnimationFrame(this.loop) |
||||
} |
||||
|
||||
draw() { |
||||
this.ctx.clearRect(0, 0, this.width, this.height) |
||||
if (this.particles.length < this.maxParticle) { |
||||
this.particles.push(new Particle({ |
||||
sphereRad: this.sphereRad, |
||||
fLen: this.fLen, |
||||
dotImageList: this.dotImageList |
||||
})) |
||||
} |
||||
for (let i = 0; i < this.particles.length; i++) { |
||||
let p = this.particles[i] |
||||
if (p.life === 0) { |
||||
this.particles.splice(i, 1) |
||||
this.particles.push(new Particle({ |
||||
sphereRad: this.sphereRad, |
||||
fLen: this.fLen, |
||||
dotImageList: this.dotImageList |
||||
})) |
||||
} |
||||
|
||||
p.update({sphereRad: this.sphereRad, fLen: this.fLen, turnSpeed: this.turnSpeed}) |
||||
|
||||
if (p.m > 0) { |
||||
this.ctx.save() |
||||
this.ctx.globalAlpha = p.op |
||||
this.ctx.drawImage(p.img, p.x * p.m + this.CenterX, this.CenterY - p.y * p.m, p.radius * p.m * 2, p.radius * p.m * 2) |
||||
this.ctx.restore() |
||||
} |
||||
} |
||||
} |
||||
|
||||
resize() { |
||||
this.width = this.canvas.width = window.innerWidth |
||||
this.height = this.canvas.height = window.innerHeight |
||||
this.CenterX = this.width / 2 |
||||
this.CenterY = this.height / 2 |
||||
} |
||||
|
||||
initDot() { |
||||
this.dotImageList = [] |
||||
for (let i = 1; i <= 4; i++) { |
||||
const dotImage = new Image() |
||||
dotImage.src = `${process.env.BASE_URL}static/img/dot${i}.png` |
||||
this.dotImageList.push(dotImage) |
||||
} |
||||
} |
||||
} |
||||
@ -1,13 +0,0 @@ |
||||
const util = { |
||||
norm: function (value, min, max) { |
||||
return (value - min) / (max - min) |
||||
}, |
||||
lerp: function (norm, min, max) { |
||||
return min + norm * (max - min) |
||||
}, |
||||
map: function (value, sourceMin, sourceMax, destMin, destMax) { |
||||
return this.lerp(this.norm(value, sourceMin, sourceMax), destMin, destMax) |
||||
} |
||||
} |
||||
|
||||
export default util |
||||
@ -1,50 +0,0 @@ |
||||
function getLimitedRandom(min, max, roundToInteger) { |
||||
let number = Math.random() * (max - min) + min |
||||
if (roundToInteger) number = Math.round(number) |
||||
return number |
||||
} |
||||
|
||||
function returnRandomArrayItem(array) { |
||||
return array[Math.floor(Math.random() * array.length)] |
||||
} |
||||
|
||||
export default class Particle { |
||||
constructor(parent, x, y) { |
||||
this.network = parent |
||||
this.canvas = parent.canvas |
||||
this.ctx = parent.ctx |
||||
this.particleColor = returnRandomArrayItem(this.network.options.particleColors) |
||||
this.radius = getLimitedRandom(1.5, 2.5) |
||||
this.opacity = 0 |
||||
this.x = x || Math.random() * this.canvas.width |
||||
this.y = y || Math.random() * this.canvas.height |
||||
this.velocity = { |
||||
x: (Math.random() - 0.5) * parent.options.velocity, |
||||
y: (Math.random() - 0.5) * parent.options.velocity |
||||
} |
||||
} |
||||
|
||||
update() { |
||||
this.opacity = this.opacity < 1 ? this.opacity + 0.01 : 1 |
||||
|
||||
// Change dir if outside map
|
||||
if (this.x > this.canvas.width + 100 || this.x < -100) { |
||||
this.velocity.x = -this.velocity.x |
||||
} |
||||
if (this.y > this.canvas.height + 100 || this.y < -100) { |
||||
this.velocity.y = -this.velocity.y |
||||
} |
||||
|
||||
// Update position
|
||||
this.x += this.velocity.x |
||||
this.y += this.velocity.y |
||||
} |
||||
|
||||
draw() { |
||||
this.ctx.beginPath() |
||||
this.ctx.fillStyle = this.particleColor |
||||
this.ctx.globalAlpha = this.opacity |
||||
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI) |
||||
this.ctx.fill() |
||||
} |
||||
} |
||||
@ -1,207 +0,0 @@ |
||||
import Particle from "./Particle" |
||||
|
||||
export default class ParticleNetwork { |
||||
constructor(canvas) { |
||||
this.canvas = canvas |
||||
this.ctx = canvas.getContext("2d") |
||||
this.options = { |
||||
velocity: 1, // the higher the faster
|
||||
density: 15000, // the lower the denser
|
||||
netLineDistance: 200, |
||||
netLineColor: '#929292', |
||||
particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
|
||||
} |
||||
this.rAF = null |
||||
this.timer = null |
||||
this.stopSign = false |
||||
this.loop = this.loop.bind(this) |
||||
this.start() |
||||
} |
||||
|
||||
start() { |
||||
this.canvas.width = window.innerWidth |
||||
this.canvas.height = window.innerHeight |
||||
this.createParticles(true) |
||||
this.bindUiActions() |
||||
this.loop() |
||||
} |
||||
|
||||
stop() { |
||||
this.unbindUiActions() |
||||
this.stopSign = true |
||||
this.particles = [] |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
} |
||||
|
||||
loop() { |
||||
if (this.stopSign) { |
||||
this.rAF && window.cancelAnimationFrame(this.rAF) |
||||
return |
||||
} |
||||
this.draw() |
||||
this.rAF = window.requestAnimationFrame(this.loop) |
||||
} |
||||
|
||||
draw() { |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
this.ctx.globalAlpha = 1 |
||||
|
||||
// Draw connections
|
||||
for (let i = 0; i < this.particles.length; i++) { |
||||
for (let j = this.particles.length - 1; j > i; j--) { |
||||
let distance, p1 = this.particles[i], p2 = this.particles[j] |
||||
|
||||
// check very simply if the two points are even a candidate for further measurements
|
||||
distance = Math.min(Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y)) |
||||
if (distance > this.options.netLineDistance) continue |
||||
|
||||
// the two points seem close enough, now let's measure precisely
|
||||
distance = Math.sqrt( |
||||
Math.pow(p1.x - p2.x, 2) + |
||||
Math.pow(p1.y - p2.y, 2) |
||||
) |
||||
if (distance > this.options.netLineDistance) continue |
||||
|
||||
this.ctx.beginPath() |
||||
this.ctx.strokeStyle = this.options.netLineColor |
||||
this.ctx.globalAlpha = (this.options.netLineDistance - distance) / this.options.netLineDistance * p1.opacity * p2.opacity |
||||
this.ctx.lineWidth = 0.7 |
||||
this.ctx.moveTo(p1.x, p1.y) |
||||
this.ctx.lineTo(p2.x, p2.y) |
||||
this.ctx.stroke() |
||||
} |
||||
} |
||||
|
||||
// Draw particles
|
||||
for (let i = 0; i < this.particles.length; i++) { |
||||
this.particles[i].update() |
||||
this.particles[i].draw() |
||||
} |
||||
} |
||||
|
||||
createParticles(isInitial) { |
||||
// Initialise / reset particles
|
||||
this.particles = [] |
||||
let quantity = this.canvas.width * this.canvas.height / this.options.density |
||||
|
||||
if (isInitial) { |
||||
let counter = 0 |
||||
window.clearInterval(this.timer) |
||||
this.timer = window.setInterval(() => { |
||||
if (counter < quantity - 1) this.particles.push(new Particle(this)) |
||||
else window.clearInterval(this.timer) |
||||
counter++ |
||||
}, 250) |
||||
} |
||||
else for (let i = 0; i < quantity; i++) this.particles.push(new Particle(this)) |
||||
} |
||||
|
||||
createInteractionParticle() { |
||||
this.interactionParticle = new Particle(this) |
||||
this.interactionParticle.velocity = {x: 0, y: 0} |
||||
this.particles.push(this.interactionParticle) |
||||
return this.interactionParticle |
||||
} |
||||
|
||||
removeInteractionParticle() { |
||||
let index = this.particles.indexOf(this.interactionParticle) |
||||
if (index > -1) { |
||||
this.interactionParticle = undefined |
||||
this.particles.splice(index, 1) |
||||
} |
||||
} |
||||
|
||||
bindUiActions() { |
||||
this.spawnQuantity = 3 |
||||
this.mouseIsDown = false |
||||
this.touchIsMoving = false |
||||
|
||||
this.onMouseMove = function (e) { |
||||
!this.interactionParticle && this.createInteractionParticle() |
||||
this.interactionParticle.x = e.offsetX |
||||
this.interactionParticle.y = e.offsetY |
||||
}.bind(this) |
||||
|
||||
this.onTouchMove = function (e) { |
||||
e.preventDefault() |
||||
this.touchIsMoving = true |
||||
!this.interactionParticle && this.createInteractionParticle() |
||||
this.interactionParticle.x = e.changedTouches[0].clientX |
||||
this.interactionParticle.y = e.changedTouches[0].clientY |
||||
}.bind(this) |
||||
|
||||
this.onMouseDown = function (e) { |
||||
this.mouseIsDown = true |
||||
let counter = 0 |
||||
let quantity = this.spawnQuantity |
||||
let intervalId = window.setInterval(function () { |
||||
if (this.mouseIsDown) { |
||||
if (counter === 1) quantity = 1 |
||||
for (let i = 0; i < quantity; i++) { |
||||
if (this.interactionParticle) { |
||||
this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y)) |
||||
} |
||||
} |
||||
} |
||||
else window.clearInterval(intervalId) |
||||
counter++ |
||||
}.bind(this), 50) |
||||
}.bind(this) |
||||
|
||||
this.onTouchStart = function (e) { |
||||
e.preventDefault() |
||||
window.setTimeout(function () { |
||||
if (!this.touchIsMoving) { |
||||
for (let i = 0; i < this.spawnQuantity; i++) { |
||||
this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY)) |
||||
} |
||||
} |
||||
}.bind(this), 200) |
||||
}.bind(this) |
||||
|
||||
this.onMouseUp = function (e) { |
||||
this.mouseIsDown = false |
||||
}.bind(this) |
||||
|
||||
this.onMouseOut = function (e) { |
||||
this.removeInteractionParticle() |
||||
}.bind(this) |
||||
|
||||
this.onTouchEnd = function (e) { |
||||
e.preventDefault() |
||||
this.touchIsMoving = false |
||||
this.removeInteractionParticle() |
||||
}.bind(this) |
||||
|
||||
this.resizeObserver = new ResizeObserver(() => this.resize()) |
||||
this.resizeObserver.observe(this.canvas) |
||||
window.addEventListener('mousemove', this.onMouseMove) |
||||
window.addEventListener('touchmove', this.onTouchMove) |
||||
window.addEventListener('mousedown', this.onMouseDown) |
||||
window.addEventListener('touchstart', this.onTouchStart) |
||||
window.addEventListener('mouseup', this.onMouseUp) |
||||
window.addEventListener('mouseout', this.onMouseOut) |
||||
window.addEventListener('touchend', this.onTouchEnd) |
||||
} |
||||
|
||||
unbindUiActions() { |
||||
if (this.resizeObserver) { |
||||
this.resizeObserver.disconnect() |
||||
this.resizeObserver = null |
||||
} |
||||
window.removeEventListener('mousemove', this.onMouseMove) |
||||
window.removeEventListener('touchmove', this.onTouchMove) |
||||
window.removeEventListener('mousedown', this.onMouseDown) |
||||
window.removeEventListener('touchstart', this.onTouchStart) |
||||
window.removeEventListener('mouseup', this.onMouseUp) |
||||
window.removeEventListener('mouseout', this.onMouseOut) |
||||
window.removeEventListener('touchend', this.onTouchEnd) |
||||
} |
||||
|
||||
resize() { |
||||
this.canvas.width = window.innerWidth |
||||
this.canvas.height = window.innerHeight |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
this.createParticles() |
||||
} |
||||
} |
||||
@ -1,160 +0,0 @@ |
||||
function colorIntToHexString(color) { |
||||
let s = color.toString(16) |
||||
return '0'.repeat(6 - s.length) + s |
||||
} |
||||
|
||||
export default class ParticleWave { |
||||
constructor(canvas) { |
||||
this.canvas = canvas |
||||
this.ctx = canvas.getContext("2d") |
||||
this.config = { |
||||
colors: { |
||||
background: 0x000000, |
||||
particle: 0x477cc2 |
||||
}, |
||||
alpha: { |
||||
particle: 1 |
||||
}, |
||||
particleCount: 10000 |
||||
} |
||||
this.particleWaveWalker = 0 |
||||
this.rAF = null |
||||
this.stopSign = false |
||||
this.loop = this.loop.bind(this) |
||||
this.start() |
||||
} |
||||
|
||||
initParticle() { |
||||
this.particles = new Float32Array(this.config.particleCount * 2) |
||||
for (let i = 0; i < this.particles.length; i += 2) { |
||||
this.particles[i] = Math.random() |
||||
this.particles[i + 1] = Math.random() |
||||
} |
||||
} |
||||
|
||||
initParticleColor() { |
||||
this.particleColorRGB = new Float32Array(3) |
||||
this.particleColorRGB[0] = this.config.colors.particle >> 16 & 0xff |
||||
this.particleColorRGB[1] = this.config.colors.particle >> 8 & 0xff |
||||
this.particleColorRGB[2] = this.config.colors.particle & 0xff |
||||
this.particleFillStyle = 'rgb(' + this.particleColorRGB[0] + ',' + this.particleColorRGB[1] + ',' + this.particleColorRGB[2] + ')' |
||||
} |
||||
|
||||
initSmoothGradient() { |
||||
this.smoothGradient = this.ctx.createLinearGradient( |
||||
this.canvas.width / 2, |
||||
0, |
||||
this.canvas.width / 2, |
||||
this.canvas.height |
||||
) |
||||
this.smoothGradient.addColorStop(0.25, 'rgba(0, 0, 0, 0)') |
||||
this.smoothGradient.addColorStop(0.45, 'rgba(0, 0, 0, 0.9)') |
||||
this.smoothGradient.addColorStop(0.5, 'rgba(0, 0, 0, 1)') |
||||
this.smoothGradient.addColorStop(0.55, 'rgba(0, 0, 0, 0.9)') |
||||
this.smoothGradient.addColorStop(0.75, 'rgba(0, 0, 0, 0)') |
||||
} |
||||
|
||||
initWaterGradient() { |
||||
this.waterGradient = this.ctx.createLinearGradient( |
||||
this.canvas.width / 2, |
||||
this.canvas.height / 2, |
||||
this.canvas.width / 2, |
||||
this.canvas.height |
||||
) |
||||
this.waterGradient.addColorStop(0, 'rgba(0, 0, 30, 0)') |
||||
this.waterGradient.addColorStop(1, 'rgba(30, 0, 60, 0.5)') |
||||
} |
||||
|
||||
start() { |
||||
this.resizeObserver = new ResizeObserver(() => this.resize()) |
||||
this.resizeObserver.observe(this.canvas) |
||||
this.resize() |
||||
this.initParticle() |
||||
this.initParticleColor() |
||||
this.initSmoothGradient() |
||||
this.initWaterGradient() |
||||
this.loop() |
||||
} |
||||
|
||||
stop() { |
||||
if (this.resizeObserver) { |
||||
this.resizeObserver.disconnect() |
||||
this.resizeObserver = null |
||||
} |
||||
this.stopSign = true |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
} |
||||
|
||||
loop() { |
||||
if (this.stopSign) { |
||||
this.rAF && window.cancelAnimationFrame(this.rAF) |
||||
return |
||||
} |
||||
this.draw() |
||||
this.rAF = window.requestAnimationFrame(this.loop) |
||||
} |
||||
|
||||
draw() { |
||||
this.ctx.fillStyle = '#' + colorIntToHexString(this.config.colors.background) |
||||
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height) |
||||
this.ctx.fillStyle = this.waterGradient |
||||
this.ctx.fillRect(0, this.canvas.height / 2, this.canvas.width, this.canvas.height / 2) |
||||
|
||||
this.renderParticle() |
||||
|
||||
this.ctx.fillStyle = this.particleFillStyle |
||||
this.ctx.fillStyle = this.smoothGradient |
||||
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height) |
||||
} |
||||
|
||||
renderParticle() { |
||||
this.particleWaveWalker += 0.03 |
||||
this.ctx.fillStyle = this.particleFillStyle |
||||
|
||||
let radius = {min: 1, add: 5}, |
||||
midY = this.canvas.height / 2, |
||||
midX = this.canvas.width / 2, |
||||
spreadX = 5, |
||||
spreadZ = 0.0, |
||||
modZ = 0.0, |
||||
addX = 0, |
||||
addY = 0, |
||||
p = {x: 0.0, y: 0.0, r: 0.0}, |
||||
waveControl = 10 |
||||
|
||||
for (let i = 0, xIndex, zIndex; i < this.particles.length; i += 2) { |
||||
xIndex = i |
||||
zIndex = i + 1 |
||||
this.particles[zIndex] += 0.003 |
||||
if (this.particles[zIndex] > 1) { |
||||
this.particles[zIndex] = 0 |
||||
this.particles[xIndex] = Math.random() |
||||
} |
||||
|
||||
if (this.particles[zIndex] < 0.3) continue |
||||
|
||||
modZ = Math.pow(this.particles[zIndex], 2) |
||||
spreadZ = 1 + (spreadX - 1) * modZ |
||||
addX = (0.5 - this.particles[xIndex]) * this.canvas.width * spreadZ |
||||
addY = midY * modZ * (1 + 3 / waveControl) |
||||
|
||||
p.x = midX + addX |
||||
p.y = midY + addY |
||||
p.r = radius.min + modZ * radius.add |
||||
p.y += Math.sin(this.particles[xIndex] * 50 + this.particleWaveWalker) * addY / waveControl |
||||
p.y += Math.cos(this.particles[zIndex] * 10 + this.particleWaveWalker) * addY / waveControl |
||||
p.y -= Math.cos(this.particles[zIndex] + this.particles[xIndex] * 10 + this.particleWaveWalker) * addY / waveControl |
||||
p.y -= Math.cos(this.particles[xIndex] * 50 + this.particleWaveWalker) * addY / waveControl |
||||
p.y -= Math.sin(this.particles[zIndex] * 10 + this.particleWaveWalker) * addY / waveControl |
||||
|
||||
if (p.x < 0 || p.x > this.canvas.width) continue |
||||
|
||||
this.ctx.fillRect(p.x, p.y, p.r, p.r) |
||||
} |
||||
} |
||||
|
||||
resize() { |
||||
this.canvas.width = window.innerWidth |
||||
this.canvas.height = window.innerHeight |
||||
} |
||||
} |
||||
@ -1,29 +0,0 @@ |
||||
import Vector from "./Vector" |
||||
|
||||
export default class RainDrop { |
||||
constructor(parent) { |
||||
this.size = 2 |
||||
this.parent = parent |
||||
this.init() |
||||
} |
||||
|
||||
init() { |
||||
this.life = 0 |
||||
this.ttl = Math.random() * 500 + 300 |
||||
this.position = new Vector(Math.random() * window.innerWidth, 0) |
||||
this.velocity = new Vector(0.5 - Math.random(), Math.random() + 0.2) |
||||
} |
||||
|
||||
update() { |
||||
if (this.position.x > window.innerWidth || this.position.x < -this.size || this.life > this.ttl) { |
||||
this.init() |
||||
} |
||||
if (this.position.y > this.parent.floor) { |
||||
this.position.y = this.parent.floor - this.size |
||||
this.velocity.y *= -0.2 - Math.random() * 0.3 |
||||
} |
||||
this.life++ |
||||
this.position.add(this.velocity) |
||||
this.velocity.y += 0.1 |
||||
} |
||||
} |
||||
@ -1,11 +0,0 @@ |
||||
export default class Vector { |
||||
constructor(x, y) { |
||||
this.x = x || 0 |
||||
this.y = y || 0 |
||||
} |
||||
|
||||
add({x, y}) { |
||||
this.x += x |
||||
this.y += y |
||||
} |
||||
} |
||||
@ -1,85 +0,0 @@ |
||||
import RainDrop from "./RainDrop" |
||||
|
||||
export default class ReflectRain { |
||||
constructor(canvas, {rainDropCount = 500, rainColor = 'rgba(150,180,255,0.8)', backgroundColor = '#2d3a4b'} = {}) { |
||||
this.props = {rainDropCount, rainColor, backgroundColor} |
||||
this.rainDrops = [] |
||||
this.timer = null |
||||
this.rAF = null |
||||
this.stopSign = false |
||||
this.canvas = canvas |
||||
this.ctx = canvas.getContext('2d') |
||||
this.loop = this.loop.bind(this) |
||||
this.start() |
||||
} |
||||
|
||||
start() { |
||||
this.resizeObserver = new ResizeObserver(() => this.resize()) |
||||
this.resizeObserver.observe(this.canvas) |
||||
this.resize() |
||||
this.loop() |
||||
} |
||||
|
||||
stop() { |
||||
if (this.resizeObserver) { |
||||
this.resizeObserver.disconnect() |
||||
this.resizeObserver = null |
||||
} |
||||
this.stopSign = true |
||||
this.rainDrops = [] |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
} |
||||
|
||||
loop() { |
||||
if (this.stopSign) { |
||||
this.rAF && window.cancelAnimationFrame(this.rAF) |
||||
this.timer && window.clearTimeout(this.timer) |
||||
return |
||||
} |
||||
if (this.rainDrops.length < this.props.rainDropCount) { |
||||
this.timer = window.setTimeout(() => this.rainDrops.push(new RainDrop(this)), Math.random() * 200) |
||||
} |
||||
else if (this.timer) { |
||||
window.clearTimeout(this.timer) |
||||
this.timer = null |
||||
} |
||||
this.draw() |
||||
this.rAF = window.requestAnimationFrame(this.loop) |
||||
} |
||||
|
||||
draw() { |
||||
this.ctx.fillStyle = this.props.backgroundColor |
||||
this.ctx.fillRect(0, 0, this.dimensions.width, this.floor) |
||||
for (let i = 0, len = this.rainDrops.length; i < len; i++) { |
||||
let rainDrop = this.rainDrops[i] |
||||
rainDrop.update() |
||||
this.ctx.fillStyle = this.props.rainColor |
||||
this.ctx.fillRect(rainDrop.position.x, rainDrop.position.y, rainDrop.size, rainDrop.size) |
||||
} |
||||
this.reflect() |
||||
} |
||||
|
||||
reflect() { |
||||
let grad = this.ctx.createLinearGradient(this.dimensions.width / 2, this.floor * 0.6, this.dimensions.width / 2, this.floor) |
||||
grad.addColorStop(0, 'rgba(80,90,100,1)') |
||||
grad.addColorStop(1, 'rgba(80,90,100,0)') |
||||
this.ctx.save() |
||||
this.ctx.scale(1, -1) |
||||
this.ctx.translate(0, this.floor * -2) |
||||
this.ctx.filter = 'blur(3px) saturate(150%)' |
||||
this.ctx.drawImage(this.canvas, 0, 0, this.dimensions.width, this.floor, 0, 0, this.dimensions.width, this.floor) |
||||
this.ctx.fillStyle = grad |
||||
this.ctx.fillRect(0, 0, this.dimensions.width, this.floor) |
||||
this.ctx.restore() |
||||
} |
||||
|
||||
resize() { |
||||
this.dimensions = { |
||||
width: window.innerWidth, |
||||
height: window.innerHeight |
||||
} |
||||
this.canvas.width = this.dimensions.width |
||||
this.canvas.height = this.dimensions.height |
||||
this.floor = this.dimensions.height * 0.7 |
||||
} |
||||
} |
||||
@ -1,18 +0,0 @@ |
||||
import {rand} from "./util" |
||||
|
||||
export default class Spark { |
||||
constructor(x, y, options) { |
||||
this.x = x |
||||
this.y = y |
||||
this.age = 0 |
||||
this.acceleration = rand(options.acceleration[0], options.acceleration[1]) |
||||
this.color = options.randColor ? rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) : OPT.color |
||||
this.opacity = options.maxOpacity - this.age / (options.lifetime * rand(1, 10)) |
||||
} |
||||
|
||||
go(options) { |
||||
this.x += options.speed * options.direction.x * this.acceleration / 2 |
||||
this.y += options.speed * options.direction.y * this.acceleration / 2 |
||||
this.opacity = options.maxOpacity - ++this.age / options.lifetime |
||||
} |
||||
} |
||||
@ -1,89 +0,0 @@ |
||||
import Spark from "./Spark" |
||||
import {rand} from "./util" |
||||
|
||||
export default class SparkRain { |
||||
constructor(canvas) { |
||||
this.canvas = canvas |
||||
this.ctx = canvas.getContext("2d") |
||||
this.options = { |
||||
amount: 10000, |
||||
speed: 0.1, // pixels per frame
|
||||
lifetime: 500, |
||||
direction: {x: -0.5, y: 1}, |
||||
size: [1, 1], |
||||
maxOpacity: 1, |
||||
color: "150, 150, 150", |
||||
randColor: true, |
||||
acceleration: [5, 40] |
||||
} |
||||
if (window.innerWidth < 520) { |
||||
this.options.speed = 0.05 |
||||
this.options.color = "150, 150, 150" |
||||
} |
||||
this.sparks = [] |
||||
this.rAF = null |
||||
this.timer = null |
||||
this.stopSign = false |
||||
this.loop = this.loop.bind(this) |
||||
this.addSpark = this.addSpark.bind(this) |
||||
this.start() |
||||
} |
||||
|
||||
start() { |
||||
this.resizeObserver = new ResizeObserver(() => this.resize()) |
||||
this.resizeObserver.observe(this.canvas) |
||||
this.resize() |
||||
this.timer = window.setInterval( |
||||
() => this.sparks.length < this.options.amount && this.addSpark(), |
||||
1000 / this.options.amount) |
||||
this.loop() |
||||
} |
||||
|
||||
stop() { |
||||
if (this.resizeObserver) { |
||||
this.resizeObserver.disconnect() |
||||
this.resizeObserver = null |
||||
} |
||||
this.stopSign = true |
||||
this.sparks = [] |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
} |
||||
|
||||
loop() { |
||||
if (this.stopSign) { |
||||
this.rAF && window.cancelAnimationFrame(this.rAF) |
||||
this.timer && window.clearInterval(this.timer) |
||||
return |
||||
} |
||||
this.draw() |
||||
this.rAF = window.requestAnimationFrame(this.loop) |
||||
} |
||||
|
||||
draw() { |
||||
this.ctx.fillStyle = 'rgba(0,0,0, 0.1)' |
||||
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height) |
||||
for (let i = 0; i < this.sparks.length; i++) { |
||||
this.sparks[i].opacity <= 0 ? this.sparks.splice(i, 1) : this.drawSpark(this.sparks[i]) |
||||
} |
||||
} |
||||
|
||||
addSpark() { |
||||
let x = rand(-200, this.canvas.width + 200) |
||||
let y = rand(-200, this.canvas.height + 200) |
||||
this.sparks.push(new Spark(x, y, this.options)) |
||||
} |
||||
|
||||
drawSpark(spark) { |
||||
spark.go(this.options) |
||||
this.ctx.beginPath() |
||||
this.ctx.fillStyle = `rgba(${spark.color},${spark.opacity})` |
||||
this.ctx.rect(spark.x, spark.y, this.options.size[0], this.options.size[1]) |
||||
this.ctx.fill() |
||||
} |
||||
|
||||
resize() { |
||||
this.canvas.width = window.innerWidth |
||||
this.canvas.height = window.innerHeight |
||||
} |
||||
} |
||||
|
||||
@ -1,3 +0,0 @@ |
||||
export function rand(min, max) { |
||||
return Math.floor(Math.random() * (max - min + 1)) + min |
||||
} |
||||
@ -1,81 +0,0 @@ |
||||
function rand(min, max) { |
||||
return Math.random() * (max - min) + min |
||||
} |
||||
|
||||
export default class Particle { |
||||
constructor() { |
||||
this.reset() |
||||
} |
||||
|
||||
reset() { |
||||
this.x = 0 |
||||
this.y = 0 |
||||
this.z = 0 |
||||
this.vx = rand(-0.5, 0.5) |
||||
this.vy = rand(-0.5, 0.5) |
||||
this.vz = rand(-0.25, 0.5) |
||||
this.s = 0 |
||||
this.sx = 0 |
||||
this.sy = 0 |
||||
this.life = 1 |
||||
this.decay = rand(0.005, 0.02) |
||||
this.radius = rand(5, 15) |
||||
this.sradius = this.radius |
||||
this.rradius = this.radius |
||||
this.hue = 0 |
||||
this.alpha = 1 |
||||
this.angle = 0 |
||||
} |
||||
|
||||
step($) { |
||||
this.vx *= $.mouse.down ? 1.1 : 1.04 |
||||
this.vy *= $.mouse.down ? 1.1 : 1.04 |
||||
this.vz *= $.mouse.down ? 1.1 : 1.04 |
||||
this.x += this.vx |
||||
this.y += this.vy |
||||
this.z += this.vz |
||||
this.s = $.fl / ($.fl + this.z) |
||||
this.sx = this.x * this.s |
||||
this.sy = this.y * this.s |
||||
this.sradius = this.radius * this.s |
||||
this.rradius = Math.max(0.0001, this.sradius * this.life) |
||||
this.angle = Math.atan2(this.sy, this.sx) |
||||
this.hue = (this.angle / (Math.PI * 2)) * 180 + $.tick * 4 |
||||
this.alpha = this.life |
||||
if (this.z < $.bounds.z.min) return this.reset() |
||||
if (this.life > 0) this.life -= this.decay |
||||
else this.reset() |
||||
} |
||||
|
||||
draw($) { |
||||
$.ctx.beginPath() |
||||
$.ctx.arc(this.sx, this.sy, this.rradius * 2, 0, Math.PI * 2) |
||||
$.ctx.fillStyle = 'hsla(' + (this.hue + 60) + ', 60%, 30%, ' + this.alpha / 3 + ')' |
||||
$.ctx.fill() |
||||
$.ctx.strokeStyle = 'hsla(' + (this.hue - 60) + ', 60%, 30%, ' + this.alpha / 2 + ')' |
||||
$.ctx.stroke() |
||||
|
||||
let angle1 = this.angle + Math.PI / 2, |
||||
angle2 = this.angle, |
||||
angle3 = this.angle - Math.PI / 2 |
||||
|
||||
$.ctx.beginPath() |
||||
$.ctx.moveTo(0, 0) |
||||
$.ctx.lineTo(this.sx + Math.cos(angle1) * this.rradius, this.sy + Math.sin(angle1) * this.rradius) |
||||
$.ctx.lineTo(this.sx + Math.cos(angle2) * this.rradius * 6, this.sy + Math.sin(angle2) * this.rradius * 6) |
||||
$.ctx.lineTo(this.sx + Math.cos(angle3) * this.rradius, this.sy + Math.sin(angle3) * this.rradius) |
||||
$.ctx.closePath() |
||||
$.ctx.fillStyle = 'hsla(' + this.hue + ', 50%, 30%, ' + this.alpha / 2 + ')' |
||||
$.ctx.fill() |
||||
|
||||
$.ctx.beginPath() |
||||
$.ctx.moveTo(this.sx + Math.cos(angle2) * this.rradius * 6, this.sy + Math.sin(angle2) * this.rradius * 6) |
||||
$.ctx.lineTo(0, 0) |
||||
$.ctx.strokeStyle = 'hsla(' + this.hue + ', 50%, 30%, ' + this.alpha + ')' |
||||
$.ctx.stroke() |
||||
|
||||
let sparkleRadius = this.rradius * 4 |
||||
$.ctx.fillStyle = 'hsla(' + (this.hue + 180) + ', 100%, 50%, ' + this.alpha * 2 + ')' |
||||
$.ctx.fillRect((this.sx + rand(-sparkleRadius, sparkleRadius)), (this.sy + rand(-sparkleRadius, sparkleRadius)), 1, 1) |
||||
} |
||||
} |
||||
@ -1,97 +0,0 @@ |
||||
import Particle from "./Particle" |
||||
|
||||
export default class Sunlight { |
||||
constructor(canvas) { |
||||
this.canvas = canvas |
||||
this.ctx = canvas.getContext('2d') |
||||
this.parts = [] |
||||
this.mouse = {down: 0} |
||||
this.rAF = null |
||||
this.stopSign = false |
||||
this.loop = this.loop.bind(this) |
||||
this.mousedown = this.mousedown.bind(this) |
||||
this.mouseup = this.mouseup.bind(this) |
||||
this.start() |
||||
} |
||||
|
||||
start() { |
||||
this.resizeObserver = new ResizeObserver(() => this.resize()) |
||||
this.resizeObserver.observe(this.canvas) |
||||
window.addEventListener('mouseup', this.mouseup) |
||||
window.addEventListener('mousedown', this.mousedown) |
||||
this.resize() |
||||
this.loop() |
||||
} |
||||
|
||||
stop() { |
||||
if (this.resizeObserver) { |
||||
this.resizeObserver.disconnect() |
||||
this.resizeObserver = null |
||||
} |
||||
window.removeEventListener('mouseup', this.mouseup) |
||||
window.removeEventListener('mousedown', this.mousedown) |
||||
this.stopSign = true |
||||
this.parts = [] |
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) |
||||
} |
||||
|
||||
loop() { |
||||
if (this.stopSign) { |
||||
this.rAF && window.cancelAnimationFrame(this.rAF) |
||||
return |
||||
} |
||||
this.draw() |
||||
this.rAF = window.requestAnimationFrame(this.loop) |
||||
} |
||||
|
||||
draw() { |
||||
this.step() |
||||
this.ctx.globalCompositeOperation = 'destination-out' |
||||
this.ctx.fillStyle = 'hsla(0, 0%, 0%, 0.6)' |
||||
this.ctx.fillRect(0, 0, this.width, this.height) |
||||
this.ctx.globalCompositeOperation = 'lighter' |
||||
this.ctx.save() |
||||
this.ctx.translate(this.width / 2, this.height / 2) |
||||
this.ctx.rotate(this.tick / 300) |
||||
let i = this.parts.length |
||||
while (i--) { |
||||
this.parts[i].draw(this) |
||||
} |
||||
this.ctx.restore() |
||||
} |
||||
|
||||
step() { |
||||
if (this.tick % 2 === 0 && this.parts.length < 200) { |
||||
this.parts.push(new Particle()) |
||||
} |
||||
let i = this.parts.length |
||||
while (i--) { |
||||
this.parts[i].step(this) |
||||
} |
||||
this.tick += this.mouse.down ? 3 : 1 |
||||
} |
||||
|
||||
mousedown() { |
||||
this.mouse.down = 1 |
||||
} |
||||
|
||||
mouseup() { |
||||
this.mouse.down = 0 |
||||
} |
||||
|
||||
resize() { |
||||
this.tick = 0 |
||||
this.width = window.innerWidth |
||||
this.height = window.innerHeight |
||||
this.canvas.width = this.width |
||||
this.canvas.height = this.height |
||||
this.mouse.down = 0 |
||||
this.fl = 300 |
||||
this.bounds = { |
||||
x: {min: -this.width / 2, max: this.width / 2}, |
||||
y: {min: -this.height / 2, max: this.height / 2}, |
||||
z: {min: -this.fl, max: 1000} |
||||
} |
||||
this.parts.length = 0 |
||||
} |
||||
} |
||||
@ -1,16 +1,11 @@ |
||||
export default { |
||||
path: 'directive', |
||||
meta: {title: '全局指令', icon: 'el-icon-s-grid'}, |
||||
meta: {title: '全局指令', icon: 'el-icon-s-grid', alwaysShow: true}, |
||||
children: [ |
||||
{ |
||||
path: 'dragDialog', |
||||
component: 'example/directive/dragDialog', |
||||
meta: {title: '可拖拽dialog'} |
||||
}, |
||||
{ |
||||
path: 'ripple', |
||||
component: 'example/directive/ripple', |
||||
meta: {title: '波纹'} |
||||
} |
||||
] |
||||
} |
||||
|
||||
@ -1,21 +1,11 @@ |
||||
export default { |
||||
path: 'global', |
||||
meta: {title: '全局方法', icon: 'el-icon-s-opportunity'}, |
||||
meta: {title: '全局方法', icon: 'el-icon-s-opportunity', alwaysShow: true}, |
||||
children: [ |
||||
{ |
||||
path: 'message', |
||||
component: 'example/globalMethod/message', |
||||
meta: {title: '消息提示'} |
||||
}, |
||||
{ |
||||
path: 'imageViewer', |
||||
component: 'example/globalMethod/imageViewer', |
||||
meta: {title: '图片预览'} |
||||
}, |
||||
{ |
||||
path: 'verify', |
||||
component: 'example/globalMethod/verify', |
||||
meta: {title: '拼图验证'} |
||||
} |
||||
] |
||||
} |
||||
|
||||
@ -1,14 +0,0 @@ |
||||
import {createMutations} from "@/store/util" |
||||
|
||||
const state = { |
||||
//登录页背景动画
|
||||
loginBackgroundAnimation: 'sparkRain', |
||||
} |
||||
|
||||
const mutations = createMutations(state) |
||||
|
||||
export default { |
||||
namespaced: true, |
||||
state, |
||||
mutations |
||||
} |
||||
@ -1,49 +0,0 @@ |
||||
<script type="text/jsx"> |
||||
const animations = [ |
||||
{name: '无', value: ''}, |
||||
{name: '烟花', value: 'firework'}, |
||||
{name: '上帝之光', value: 'godrays'}, |
||||
{name: '简单粒子', value: 'moveFollowMouse'}, |
||||
{name: '球', value: 'particleBall'}, |
||||
{name: '网络', value: 'particleNetwork'}, |
||||
{name: '波浪', value: 'particleWave'}, |
||||
{name: '雨', value: 'reflectRain'}, |
||||
{name: '流星雨', value: 'sparkRain'}, |
||||
{name: '阳光', value: 'sunlight'}, |
||||
] |
||||
|
||||
export default { |
||||
name: "SetAnimation", |
||||
|
||||
functional: true, |
||||
|
||||
props: { |
||||
value: String, |
||||
customClass: String |
||||
}, |
||||
|
||||
render(h, context) { |
||||
const {value, customClass} = context.props |
||||
return ( |
||||
<el-dropdown class={customClass} size="medium" trigger="click" onCommand={context.listeners.select}> |
||||
<el-button type="text" title="选择背景动画"> |
||||
<v-icon icon="svg-show"/> |
||||
</el-button> |
||||
<el-dropdown-menu slot="dropdown"> |
||||
{ |
||||
animations.map(animation => ( |
||||
<el-dropdown-item |
||||
key={animation.value} |
||||
disabled={animation.value === value} |
||||
command={animation.value} |
||||
> |
||||
{animation.name} |
||||
</el-dropdown-item> |
||||
)) |
||||
} |
||||
</el-dropdown-menu> |
||||
</el-dropdown> |
||||
) |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,57 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<div class="tip-row"> |
||||
波纹，详情请见<a href="https://quasar.dev/vue-directives/material-ripple" target="_blank">quasar</a> |
||||
</div> |
||||
|
||||
<div v-ripple.early class="ripple-example" :style="style">点我触发</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "ripplePage", |
||||
|
||||
data() { |
||||
return { |
||||
index: 0, |
||||
colors: ['amber', 'orange', 'accent', 'lime', 'cyan', 'purple', 'brown', 'blue'] |
||||
} |
||||
}, |
||||
|
||||
computed: { |
||||
style() { |
||||
return {'background-color': this.colors[this.index]} |
||||
} |
||||
}, |
||||
|
||||
mounted() { |
||||
this.timer = window.setInterval(() => { |
||||
this.index = (this.index + 1) % this.colors.length |
||||
this.color = this.colors[this.index] |
||||
}, 3000) |
||||
|
||||
this.$once('hook:beforeDestroy', () => { |
||||
window.clearInterval(this.timer) |
||||
}) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.ripple-example { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
align-items: center; |
||||
margin-top: 50px; |
||||
height: 150px; |
||||
width: 80%; |
||||
max-width: 500px; |
||||
border-radius: 3px; |
||||
cursor: pointer; |
||||
transition: background 1.5s; |
||||
color: #ffffff; |
||||
user-select: none; |
||||
} |
||||
</style> |
||||
@ -1,33 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<div class="tip-row"> |
||||
这是对<a href="https://github.com/sachinchoolur/lightgallery.js" target="_blank">lightgallary</a>的简单封装 |
||||
</div> |
||||
|
||||
<div> |
||||
<img v-for="(i,index) in images" :key="i" :src="i" @click="preview(index)"> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "imageViewerPage", |
||||
|
||||
data() { |
||||
return { |
||||
images: [ |
||||
'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4018557288,1217151095&fm=26&gp=0.jpg', |
||||
'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg', |
||||
'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg' |
||||
] |
||||
} |
||||
}, |
||||
|
||||
methods: { |
||||
preview(index) { |
||||
this.$image({index, urlList: this.images}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -1,25 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<div class="tip-row"> |
||||
拼图验证， |
||||
在<a href="https://github.com/Kevin-269581661/vue-puzzle-verification" target="_blank"></a>的基础上做了样式修改 |
||||
</div> |
||||
<el-button type="primary" @click="onClick">触发验证</el-button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {elSuccess, elError} from "@/util/message" |
||||
|
||||
export default { |
||||
name: "verifyPage", |
||||
|
||||
methods: { |
||||
onClick() { |
||||
this.$verify() |
||||
.then(() => elSuccess('验证通过！')) |
||||
.catch(() => elError('验证失败！')) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue