You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
849 lines
31 KiB
849 lines
31 KiB
<!DOCTYPE html> |
|
<html lang="zh-CN"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Yimian HomePage</title> |
|
<script type="text/javascript">document.write('<style type="text/css">body{background-image: url("https://api.yimian.xyz/moe?i=PCBackground&k&s='+Math.random()+'");}</style>');</script> |
|
<style type="text/css"> |
|
body{ |
|
background-size: 100% 100%; |
|
font-family: 'Microsoft YaHei UI',arial,sans-serif; |
|
font-size: 13px; |
|
} |
|
</style> |
|
<link rel="stylesheet" href="./css/Index.css"> |
|
<link rel="shortcut icon" href="https://cdn.yimian.xyz/img/logo/logo.ico"/> |
|
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> |
|
<script type="text/javascript" src="https://cdn.yimian.xyz/fp/fp.min.js"></script> |
|
<script> |
|
//LISTEN ENTER KEYDOWN EVENT |
|
document.onkeydown = function(e){ |
|
if(!e){ |
|
e = window.event; |
|
} |
|
if((e.keyCode || e.which) == 13){ |
|
do_google_search(); |
|
} |
|
|
|
if((e.keyCode || e.which) == 87){ |
|
window.open("https://wx.qq.com/"); |
|
} |
|
|
|
if((e.keyCode || e.which) == 71){ |
|
window.open("https://github.com/IoTcat"); |
|
} |
|
|
|
if((e.keyCode || e.which) == 73){ |
|
window.open("https://www.eee.dog"); |
|
} |
|
|
|
if((e.keyCode || e.which) == 17){ |
|
window.open("https://pre.eee.dog"); |
|
} |
|
|
|
if((e.keyCode || e.which) == 69){ |
|
window.open("https://ice.xjtlu.edu.cn/"); |
|
} |
|
|
|
if((e.keyCode || e.which) == 16){ |
|
window.open("https://ebridge.xjtlu.edu.cn/urd/sits.urd/run/SIW_LGN"); |
|
} |
|
|
|
if((e.keyCode || e.which) == 66){ |
|
window.open("https://www.bilibili.com/"); |
|
} |
|
|
|
if((e.keyCode || e.which) == 86){ |
|
window.open("https://my.vultr.com/"); |
|
} |
|
|
|
if((e.keyCode || e.which) == 84){ |
|
window.open("https://console.cloud.tencent.com/"); |
|
} |
|
|
|
if((e.keyCode || e.which) == 72){ |
|
window.open("https://console.huaweicloud.com/console/"); |
|
} |
|
|
|
if((e.keyCode || e.which) == 65){ |
|
window.open("https://home.console.aliyun.com/"); |
|
} |
|
} |
|
|
|
//DO SEARCH EVENT |
|
function do_baidu_search() { |
|
var search_txt = document.getElementById("search-bar-input").value; |
|
if (search_txt == "") { |
|
window.open("https://www.baidu.com"); |
|
return; |
|
} |
|
log_search("baidu", search_txt); |
|
var search_url = "https://www.baidu.com/s?wd=" + encodeURI(search_txt); |
|
window.open(search_url); |
|
} |
|
function do_google_search() { |
|
var search_txt = document.getElementById("search-bar-input").value; |
|
if (search_txt == "") { |
|
window.open("https://www.google.com"); |
|
return; |
|
} |
|
log_search("google", search_txt); |
|
var search_url = "https://www.google.com/search?newwindow=1&hl=zh-CN&q=" + encodeURI(search_txt); |
|
window.open(search_url); |
|
} |
|
function on_enter_key(){ |
|
if (event.keyCode==13){ |
|
var search_txt = document.getElementById("search-bar-input").value; |
|
if (search_txt == "") { |
|
window.open("https://www.google.com"); |
|
return; |
|
} |
|
log_search("google", search_txt); |
|
var search_url = "https://www.google.com/search?newwindow=1&hl=zh-CN&q=" + encodeURI(search_txt); |
|
window.open(search_url); |
|
} |
|
} |
|
|
|
function log_search(type, val){ |
|
|
|
$.post("https://log.yimian.xyz/log_search.php",{"fp":fp, "type":type, "value":val}); |
|
} |
|
</script> |
|
</head> |
|
<body> |
|
|
|
<!----------------------------------------------------------------------------------------------------> |
|
|
|
<div id="logo"> |
|
<canvas width="400" height="150" id="canvas"></canvas> |
|
<!--<a href="https://iotcat.me" target="_blank"><img src="./images/logo3.gif" alt="tojohnonly" height="150"></a>--> |
|
</div> |
|
|
|
<!----------------------------------------------------------------------------------------------------> |
|
<div id="search-bar"> |
|
<input id="search-bar-input" onkeydown="on_enter_key()" type="text" placeholder="search everything ..." autocomplete="off"> |
|
<button style="margin-left: 185px;" onclick="do_google_search()">Google</button><a class="close"></a> |
|
<button onclick="do_baidu_search()">百度</button><a class="close"></a> |
|
</div> |
|
|
|
<!----------------------------------------------------------------------------------------------------> |
|
<div id="nav-panel"> |
|
|
|
<a class="nav-panel-item" title="西交利物浦" href="https://www.xjtlu.edu.cn/" target="_blank"> |
|
<img src="https://gss1.bdstatic.com/5bVZsj_p_tVS5dKfpU_Y_D3/qiusuo_icon/ffa0c2155aa92fbfab7bbdb06f3b02cb.png" alt="Google" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">西交利物浦</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="WeChat" href="https://wx.qq.com/" target="_blank"> |
|
<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3528894059,640966735&fm=58" alt="Wikipedia" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">微信</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="Github" href="https://github.com/" target="_blank"> |
|
<img src="./images/web_icons/Github.png" alt="Github" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Github</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="IoTcat" href="https://www.eee.dog/" target="_blank"> |
|
<img src="https://cdn.yimian.xyz/img/logo/head.jpg" alt="Blog" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Blog</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="Bilibili" href="https://www.bilibili.com/" target="_blank"> |
|
<img src="./images/web_icons/Bilibili.png" alt="Bilibili" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Bilibili</div> |
|
</a> |
|
|
|
<!----------------------------------------------2------------------------------------------------------> |
|
<div class="nav-panel-line" style="background-color: #d9e9f4"></div> |
|
|
|
<a class="nav-panel-item" title="ICE" href="https://ice.xjtlu.edu.cn/" target="_blank"> |
|
<img src="https://gss0.bdstatic.com/5bVSsj_p_tVS5dKfpU_Y_D3/qiusuo_icon/0bca72cba3fa7050294271ec0e961710.png" alt="InfoQ" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">ICE</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="e-Bridge" href="https://ebridge.xjtlu.edu.cn/" target="_blank"> |
|
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1696532274,1981152654&fm=27&gp=0.jpg" alt="CBlog" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">e-Bridge</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="Zhihu" href="http://www.zhihu.com/" target="_blank"> |
|
<img src="./images/web_icons/Zhihu.png" alt="Zhihu" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Zhihu</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="Hackers" href="https://news.ycombinator.com/" target="_blank"> |
|
<img src="./images/web_icons/Hackers.png" alt="Hackers" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Hackers</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="BaiDisk" href="http://pan.baidu.com/disk/home" target="_blank"> |
|
<img src="./images/web_icons/BaiDisk.png" alt="BaiDisk" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">BaiDisk</div> |
|
</a> |
|
|
|
<!----------------------------------------------3------------------------------------------------------> |
|
<div class="nav-panel-line"></div> |
|
|
|
<a class="nav-panel-item" title="Youtube" href="https://www.youtube.com/" target="_blank"> |
|
<img src="./images/web_icons/Youtube.png" alt="Youtube" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Youtube</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="Twitter" href="https://twitter.com/" target="_blank"> |
|
<img src="./images/web_icons/Twitter.png" alt="Twitter" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Twitter</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="Weibo" href="https://weibo.com/" target="_blank"> |
|
<img src="./images/web_icons/Weibo.png" alt="Weibo" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Weibo</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="LinkedIn" href="https://www.linkedin.com/feed/" target="_blank"> |
|
<img src="https://gss0.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/qiusuo_icon/129fcef5e6cae3e8a44333afb3b5add6.png" alt="Huxiu" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">LinkedIn</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="Telegram" href="https://web.telegram.org/#/im" target="_blank"> |
|
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554552970603&di=913d1c1bb1149fcc8f768dd93e0245b1&imgtype=0&src=http%3A%2F%2Fa5.mzstatic.com%2Fus%2Fr30%2FPurple6%2Fv4%2Fea%2F2f%2Ff3%2Fea2ff33d-3241-4acf-e17b-53c4b429475f%2FAppIcon.512x512-75.png" alt="Telegram" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Telegram</div> |
|
</a> |
|
|
|
<!-----------------------------------------------4-----------------------------------------------------> |
|
<div class="nav-panel-line"></div> |
|
|
|
<a class="nav-panel-item" title="126" href="https://mail.126.com/" target="_blank"> |
|
<img src="https://mail.163.com/favicon.ico" alt="163" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">126邮箱</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="V2EX" href="https://www.wjx.cn/newwjx/manage/myquestionnaires.aspx" target="_blank"> |
|
<img src="https://www.wjx.cn/favicon.ico" alt="V2EX" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">问卷星</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="蛐蛐钢琴网" href="https://www.tan8.com/piano.html" target="_blank"> |
|
<img src="https://www.tan8.com/favicon.ico" alt="蛐蛐钢琴网" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">蛐蛐钢琴网</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="随手记" href="https://www.feidee.com/money/tally/new.do" target="_blank"> |
|
<img src="https://www.feidee.com/favicon.ico" alt="随手记" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">随手记</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="Greasy Fork" href="https://greasyfork.org/zh-TW" target="_blank"> |
|
<img src="https://gss1.bdstatic.com/5bVZsj_p_tVS5dKfpU_Y_D3/qiusuo_icon/3844f41936de5dc907545cb83a92f5bc.png" alt="Greasy Fork" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Greasy Fork</div> |
|
</a> |
|
|
|
<!----------------------------------------------5------------------------------------------------------> |
|
<div class="nav-panel-line" style="background-color: #d9f4de"></div> |
|
|
|
<a class="nav-panel-item" title="网易公开课" href="https://c.open.163.com/center/myCourse.htm" target="_blank"> |
|
<img src="http://c.open.163.com/favicon.ico" alt="网易公开课" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">网易公开课</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="MOOC" href="https://www.icourse163.org/" target="_blank"> |
|
<img src="https://gss0.bdstatic.com/5bVSsj_p_tVS5dKfpU_Y_D3/qiusuo_icon/bc80781cfa3aaf81ae0ebdebed282dcd.png" alt="MOOC" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">中国大学MOOC</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="Google站长平台" href="https://search.google.com/search-console" target="_blank"> |
|
<img src="./images/web_icons/Google.png" alt="Google站长平台" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Google站长平台</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="IEEE" href="https://ieeexplore.ieee.org/Xplore/home.jsp" target="_blank"> |
|
<img src="https://ieeexplore.ieee.org/favicon.ico" alt="IEEE" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">IEEE</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="Pixiv" href="https://www.pixiv.net/" target="_blank"> |
|
<img src="https://www.pixiv.net/favicon.ico" alt="Pixiv" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">Pixiv</div> |
|
</a> |
|
|
|
<!--------------------------------------------6--------------------------------------------------------> |
|
<div class="nav-panel-line"></div> |
|
|
|
<a class="nav-panel-item" title="vultr" href="https://my.vultr.com/" target="_blank"> |
|
<img src="https://my.vultr.com/favicon.ico" alt="vultr" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">vultr</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="腾讯云" href="https://console.cloud.tencent.com/" target="_blank"> |
|
<img src="https://imgcache.qq.com/qcloud/app/resource/ac/favicon.ico" alt="腾讯云" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">腾讯云</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="华为云" href="https://console.huaweicloud.com/console/" target="_blank"> |
|
<img src="https://console-static.huaweicloud.com/static/framework/5.0.0/theme/default/images/favicon.ico?ttf=1653661296" alt="华为云" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">华为云</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="阿里云" href="https://home.console.aliyun.com/" target="_blank"> |
|
<img src="https://home.console.aliyun.com/favicon.ico" alt="阿里云" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">阿里云</div> |
|
</a> |
|
|
|
<a class="nav-panel-item" title="internet.bs" href="https://internetbs.net/zh/domain-name-registrations/HomePage.html" target="_blank"> |
|
<img src="https://internetbs.net/favicon.ico" alt="internet.bs" height="16" width="16" class="nav-panel-item-img"> |
|
<div class="nav-panel-item-txt">internet.bs域名</div> |
|
</a> |
|
|
|
|
|
|
|
</div> |
|
<header> |
|
<h1>Yimian HomePage</h1> |
|
<div id="about"> |
|
<a href="#" id="toggle-options"></a> |
|
<ul id="options"> |
|
<a href="#" id="quivers" class=""></a> |
|
<a href="#" id="gradient" class="on"></a> |
|
<a href="#" id="color" class="on"></a> |
|
<a href="#" id="valentineify" class=""></a> |
|
<li class="group"><span>Mouse down: explode and repel</span></li> |
|
<li><span>Mouse down + shift: explode and attract</span></li> |
|
<li><span>Arrow Up: increase particle size</span></li> |
|
<li class="group"><span>Sorry about your CPU</span></li> |
|
<li><span id="fps"></span></li> |
|
</ul> |
|
</div> |
|
</header> |
|
<script> |
|
|
|
var Clock = (function() { |
|
|
|
// private variables |
|
var canvas, // canvas element |
|
ctx, // canvas context |
|
bgGrad = true, // background gradient flag |
|
gradient, // gradient (background) |
|
height = 150, // canvas height |
|
key = {up: false, shift: false}, // key presses |
|
particles = [], // particle array |
|
particleColor = 'hsla(0, 0%, 100%, 0.3)', // particle color |
|
mouse = {x: 0, y: 0}, // position of mouse / touch |
|
press = false, // pressed flag |
|
quiver = false, // quiver flag |
|
text, // the text to copy pixels from |
|
textSize = 80, // (initial) textsize |
|
valentine = false, // valentine-ify it for a bit? |
|
msgTime = 100, // time to show a message before returning to clock |
|
updateColor = true, // update color of gradient / particles with time? |
|
width = 200; // canvas width |
|
|
|
// Constants |
|
var FRAME_RATE = 20, // frames per second target |
|
MIN_WIDTH = 900, // minimum width of canvas |
|
MIN_HEIGHT = 400, // minimum height of canvas |
|
PARTICLE_NUM = 6000, // (max) number of particles to generate |
|
RADIUS = Math.PI * 2; // radius of particle |
|
|
|
var defaultStyles = function() { |
|
textSize = 140; |
|
// particle color |
|
particleColor = 'hsla(0, 0%, 100%, 0.5)'; |
|
|
|
// color stops |
|
var gradientStops = { |
|
}; |
|
|
|
// create gradient |
|
setGradient(gradientStops); |
|
}; |
|
|
|
var draw = function(p) { |
|
ctx.fillStyle = particleColor; |
|
ctx.beginPath(); |
|
ctx.arc(p.x, p.y, p.size, 0, RADIUS, true); |
|
ctx.closePath(); |
|
ctx.fill(); |
|
}; |
|
|
|
var explode = function() { |
|
for(var i = 0, l = particles.length; i < l; i++) { |
|
var p = particles[i]; |
|
|
|
if(p.inText) { |
|
|
|
var ax = mouse.x - p.px, |
|
ay = mouse.y - p.py, |
|
angle = Math.atan2(ay, ax), |
|
polarity, |
|
C = Math.cos(angle), |
|
S = Math.sin(angle); |
|
|
|
// change polarity |
|
// attract particles if mouse pressed, repel if shift + mousedown |
|
polarity = (key.shift === true) ? -1 : 1; |
|
|
|
p.x += polarity * (Math.pow((C-1), 2) -1) + p.velocityX * p.delta; |
|
p.y += polarity * (Math.pow((S-1), 2) -1) + p.velocityY * p.delta; |
|
|
|
// set previous positions |
|
p.px = p.x; |
|
p.py = p.y; |
|
|
|
draw(p); |
|
} |
|
} |
|
}; |
|
|
|
var getTime = function(amPM) { |
|
var date = new Date(), |
|
hours = date.getHours(), |
|
timeOfDay = ''; |
|
|
|
if(amPM) { |
|
//hours = ( hours > 12 ) ? hours -= 12 : hours; |
|
hours = ( hours == 0 ) ? 12 : hours; |
|
} else { |
|
hours = pad(hours); |
|
} |
|
|
|
var minutes = pad(date.getMinutes()); |
|
var seconds = pad(date.getSeconds()); |
|
return { |
|
hours: hours, |
|
minutes: minutes, |
|
seconds: seconds, |
|
timeString: hours + " : " + minutes + " : " + seconds |
|
}; |
|
}; |
|
|
|
// animation loop |
|
var loop = function() { |
|
|
|
// clear out text |
|
ctx.clearRect(0, 0, width, height); |
|
|
|
var time = getTime(true); |
|
|
|
textSize = 85; |
|
|
|
// draw text on canvas |
|
if(valentine === true) { |
|
if(msgTime > 0) { |
|
textSize = 180; |
|
text = '?'; |
|
msgTime--; |
|
} else { |
|
text = time.timeString; |
|
} |
|
// valentine-ify it by setting hue to pink |
|
setStyles(100); |
|
|
|
} else if(updateColor === true && bgGrad === true) { |
|
// changing color with time |
|
// @TODO: come up with something better, this is a hacky implementation |
|
//var color = time.hours + time.minutes + time.seconds; |
|
//setStyles(color); |
|
text = time.timeString; |
|
} else { |
|
//defaultStyles(); |
|
text = time.timeString; |
|
} |
|
|
|
text += ' '; |
|
//particleColor = 'hsla('+Math.random()+', 10%, 50%, 0.3)'; |
|
|
|
ctx.fillStyle = "rgba(255, 255, 255, 0.6)"; |
|
ctx.textBaseline = "middle"; |
|
ctx.font = textSize + "px 'Avenir', 'Helvetica Neue', 'Arial', 'sans-serif'"; |
|
ctx.fillText(text, (width - ctx.measureText(text).width) * 0.5, height * 0.5); |
|
|
|
// copy pixels |
|
var imgData = ctx.getImageData(0, 0, width, height); |
|
|
|
// clear canvas, again |
|
ctx.clearRect(0, 0, width, height); |
|
|
|
if(bgGrad === true) { |
|
// draw gradient |
|
ctx.fillStyle = gradient; |
|
ctx.fillRect(0, 0, width, height); |
|
} |
|
|
|
if(press === false) { |
|
// reset particles |
|
for(var i = 0, l = particles.length; i < l; i++) { |
|
var p = particles[i]; |
|
p.inText = false; |
|
} |
|
particleText(imgData); |
|
} else { |
|
explode(); |
|
} |
|
FPS.update('fps'); |
|
}; |
|
|
|
var pad = function(number) { |
|
return ('0' + number).substr(-2); |
|
}; |
|
|
|
var particleText = function(imgData) { |
|
|
|
var pxls = []; |
|
for(var w = width; w > 0; w-=6) { |
|
for(var h = 0; h < width; h+=6) { |
|
var index = (w+h*(width))*4; |
|
if(imgData.data[index] > 10) { |
|
pxls.push([w, h]); |
|
} |
|
} |
|
} |
|
|
|
var count = pxls.length; |
|
for(var i = 0; i < pxls.length && i < particles.length; i++) { |
|
try { |
|
var p = particles[i], |
|
X, |
|
Y; |
|
|
|
if(quiver) { |
|
X = (pxls[count-1][0]) - (p.px + Math.random() * 5); |
|
Y = (pxls[count-1][1]) - (p.py + Math.random() * 5); |
|
} else { |
|
X = (pxls[count-1][0]) - p.px; |
|
Y = (pxls[count-1][1]) - p.py; |
|
} |
|
|
|
// tangent |
|
var T = Math.sqrt(X*X + Y*Y); |
|
|
|
// arctangent |
|
var A = Math.atan2(Y, X); |
|
|
|
// cosine |
|
var C = Math.cos(A); |
|
|
|
// sine |
|
var S = Math.sin(A); |
|
|
|
// set new postition |
|
p.x = p.px + C * T * p.delta; |
|
p.y = p.py + S * T * p.delta; |
|
|
|
// set previous positions |
|
p.px = p.x; |
|
p.py = p.y; |
|
|
|
p.inText = true; |
|
|
|
// draw the particle |
|
draw(p); |
|
|
|
if(key.up === true) { |
|
p.size += 0.3; |
|
} else { |
|
var newSize = p.size - 0.5; |
|
if(newSize > p.origSize && newSize > 0) { |
|
p.size = newSize; |
|
} else { |
|
p.size = m.origSize; |
|
} |
|
} |
|
} catch(e) { |
|
//console.log(e); |
|
} |
|
count--; |
|
} |
|
}; |
|
|
|
var setCoordinates = function(e) { |
|
if(e.offsetX) { |
|
return { x: e.offsetX, y: e.offsetY }; // use offset if available |
|
} else if (e.layerX) { |
|
return { x: e.layerX, y: e.layerY }; // firefox... make sure to position the canvas |
|
} else { |
|
// iOS. Maybe others too? |
|
return { x: e.pageX - canvas.offsetLeft, y: e.pageY - canvas.offsetTop }; |
|
} |
|
}; |
|
|
|
// set dimensions of canvas |
|
var setDimensions = function () { |
|
//width = Math.max(window.innerWidth, MIN_WIDTH); |
|
//height = Math.max(window.innerHeight, MIN_HEIGHT); |
|
|
|
width = 700; |
|
height = 130; |
|
|
|
// Resize the canvas |
|
canvas.width = width; |
|
canvas.height = height; |
|
|
|
//canvas.style.position = 'absolute'; |
|
//canvas.style.left = '0px'; |
|
//canvas.style.top = '0px'; |
|
}; |
|
|
|
var setGradient = function(gradientStops) { |
|
|
|
// create gradient |
|
gradient = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, width); |
|
|
|
// iterate through colorstops |
|
for (var position in gradientStops) { |
|
var color = gradientStops[position]; |
|
gradient.addColorStop(position, color); |
|
} |
|
}; |
|
|
|
var setStyles = function(hue) { |
|
// color stops |
|
var gradientStops = { |
|
0: 'hsl(' + hue + ', 50%, 100%, 0)', |
|
0.5: 'hsl(' + hue +', 50%, 50%, 0)' |
|
}; |
|
|
|
// change particle color |
|
particleColor = 'hsla(' + hue + ', 10%, 50%, 0.7)'; |
|
|
|
// create gradient |
|
setGradient(gradientStops); |
|
}; |
|
|
|
/** |
|
* Public Methods |
|
*/ |
|
return { |
|
|
|
init: function(canvasID) { |
|
|
|
canvas = document.getElementById(canvasID); |
|
// make sure canvas exists and that the browser understands it |
|
if(canvas === null || !canvas.getContext) { |
|
return; |
|
} |
|
// set context |
|
ctx = canvas.getContext("2d"); |
|
|
|
ctx.fillStyle = 'rgba(255, 255, 255, 0)'; |
|
|
|
// set dimensions |
|
setDimensions(); |
|
|
|
// ui |
|
this.ui(); |
|
|
|
for(var i = 0; i < PARTICLE_NUM; i++) { |
|
particles[i] = new Particle(canvas); |
|
} |
|
|
|
// show FPS |
|
FPS.initialize(canvas, 'fps'); |
|
|
|
// set defaults |
|
defaultStyles(); |
|
|
|
// let's do this |
|
setInterval(loop, FRAME_RATE); |
|
|
|
}, |
|
|
|
ui: function() { |
|
|
|
// UI: buttons and events |
|
var toggleOptions = document.getElementById('toggle-options'), |
|
options = document.getElementById('options'), |
|
onMsg = '[-] Hide Options', |
|
offMsg = '[+] Show Options', |
|
quiverBtn = document.getElementById('quivers'), |
|
gradientBtn = document.getElementById('gradient'), |
|
valentineifyBtn = document.getElementById('valentineify'), |
|
colorBtn = document.getElementById('color'); |
|
|
|
toggleOptions.innerHTML = offMsg; |
|
|
|
/** |
|
* Events |
|
*/ |
|
toggleOptions.addEventListener('click', function(e) { |
|
e.preventDefault(); |
|
if(options.className === 'on') { |
|
options.className = ''; |
|
toggleOptions.innerHTML = offMsg; |
|
} else { |
|
options.className = 'on'; |
|
toggleOptions.innerHTML = onMsg; |
|
} |
|
}, false); |
|
|
|
quiverBtn.addEventListener('click', function(e) { |
|
e.preventDefault(); |
|
if(quiverBtn.className === 'on') { |
|
quiverBtn.className = ''; |
|
quiver = false; |
|
} else { |
|
quiverBtn.className = 'on'; |
|
quiver = true; |
|
} |
|
}, false); |
|
|
|
gradientBtn.addEventListener('click', function(e) { |
|
e.preventDefault(); |
|
if(gradientBtn.className === 'on') { |
|
gradientBtn.className = ''; |
|
bgGrad = false; |
|
} else { |
|
gradientBtn.className = 'on'; |
|
bgGrad = true; |
|
} |
|
}, false); |
|
|
|
valentineifyBtn.addEventListener('click', function(e) { |
|
e.preventDefault(); |
|
if(valentineifyBtn.className === 'on') { |
|
valentineifyBtn.className = ''; |
|
valentine = false; |
|
msgTime = 0; |
|
} else { |
|
valentineifyBtn.className = 'on'; |
|
msgTime = 60; |
|
valentine = true; |
|
} |
|
}, false); |
|
|
|
colorBtn.addEventListener('click', function(e) { |
|
e.preventDefault(); |
|
if(colorBtn.className === 'on') { |
|
colorBtn.className = ''; |
|
updateColor = false; |
|
} else { |
|
colorBtn.className = 'on'; |
|
updateColor = true; |
|
} |
|
}, false); |
|
|
|
document.addEventListener('keydown', function(e) { |
|
switch(e.keyCode ) { |
|
case 16: // shift |
|
key.shift = true; |
|
e.preventDefault(); |
|
break; |
|
case 38: // up key |
|
key.up = true; |
|
e.preventDefault(); |
|
break; |
|
} |
|
}, false); |
|
|
|
document.addEventListener('keyup', function(e) { |
|
switch(e.keyCode ) { |
|
case 16: // shift |
|
key.shift = false; |
|
e.preventDefault(); |
|
break; |
|
case 38: // space |
|
key.up = false; |
|
e.preventDefault(); |
|
break; |
|
} |
|
}, false); |
|
|
|
window.addEventListener('resize', function(e){ |
|
setDimensions(); |
|
}, false); |
|
|
|
canvas.addEventListener('mousedown', function(e){ |
|
press = true; |
|
}, false); |
|
|
|
document.addEventListener('mouseup', function(e){ |
|
press = false; |
|
}, false); |
|
|
|
canvas.addEventListener('mousemove', function(e) { |
|
if(press) { |
|
mouse = setCoordinates(e); |
|
} |
|
}, false); |
|
|
|
// @TODO: add touch events |
|
|
|
} |
|
|
|
}; |
|
|
|
})(); |
|
|
|
// Create new particles |
|
var Particle = function(canvas) { |
|
|
|
var range = Math.random() * 180 / Math.PI, // random starting point |
|
spread = canvas.height, // how far away from text should the particles begin? |
|
size = Math.random() * 6; // random size of particle |
|
|
|
this.delta = 0.25; |
|
this.x = 0; |
|
this.y = 0; |
|
|
|
// starting positions |
|
this.px = (canvas.width / 2) + (Math.cos(range) * spread); |
|
this.py = (canvas.height / 2) + (Math.sin(range) * spread); |
|
|
|
this.velocityX = Math.floor(Math.random() * 10) - 5; |
|
this.velocityY = Math.floor(Math.random() * 10) - 5; |
|
|
|
this.size = size; |
|
this.origSize = size; |
|
|
|
this.inText = false; |
|
|
|
}; |
|
|
|
var FPS = { |
|
|
|
// defaults |
|
delta: 0, |
|
lastTime: 0, |
|
frames: 0, |
|
totalTime: 0, |
|
updateTime: 0, |
|
updateFrames: 0, |
|
|
|
initialize: function(canvasID, fpsID) { |
|
this.lastTime = (new Date()).getTime(); |
|
if(!document.getElementById(fpsID) && document.getElementById(canvasID)) { |
|
this.createFPS(canvasID, fpsID); |
|
} |
|
}, |
|
|
|
// create FPS div if needed |
|
createFPS: function(canvasID, fpsID) { |
|
var div = document.createElement('div'); |
|
div.setAttribute('id', fpsID); |
|
var canvas = document.getElementById(canvasID); |
|
var parent = canvas.parentNode; |
|
div.innerHTML = "FPS AVG: 0 CURRENT: 0"; |
|
parent.appendChild(div); |
|
}, |
|
|
|
// update FPS count |
|
update: function(fpsID) { |
|
var now = (new Date()).getTime(); |
|
this.delta = now - this.lastTime; |
|
this.lastTime = now; |
|
this.updateTime += this.delta; |
|
this.totalTime += this.delta; |
|
this.frames++; |
|
this.updateFrames++; |
|
document.getElementById(fpsID).innerHTML = "FPS Average: " + Math.round(1000 * this.frames / this. totalTime) + " Current: " + Math.round(1000 * this.updateFrames / this.updateTime); |
|
this.updateTime = 0; // reset time |
|
this.updateFrames = 0; // reset frames |
|
} |
|
|
|
}; |
|
|
|
Clock.init('canvas'); |
|
|
|
</script> |
|
|
|
</body> |
|
</html> |