|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 445 KiB |
|
After Width: | Height: | Size: 382 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 412 B |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 640 B |
|
After Width: | Height: | Size: 882 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 805 B |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 467 B |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 517 B |
|
After Width: | Height: | Size: 412 B |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 714 B |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 624 B |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
@ -0,0 +1,795 @@ |
||||
<!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> |
||||
//LISTEN ENTER KEYDOWN EVENT |
||||
document.onkeydown = function(e){ |
||||
if(!e){ |
||||
e = window.event; |
||||
} |
||||
if((e.keyCode || e.which) == 13){ |
||||
do_search(); |
||||
} |
||||
} |
||||
|
||||
//DO SEARCH EVENT |
||||
function do_baidu_search() { |
||||
var search_txt = document.getElementById("search-bar-input").value; |
||||
if (search_txt == "") { |
||||
alert("search text is empty ! "); |
||||
return false; |
||||
} |
||||
var search_url = "https://www.baidu.com/s?wd=" + search_txt; |
||||
window.open(search_url); |
||||
} |
||||
function do_google_search() { |
||||
var search_txt = document.getElementById("search-bar-input").value; |
||||
if (search_txt == "") { |
||||
alert("search text is empty ! "); |
||||
return false; |
||||
} |
||||
var search_url = "https://www.google.com/search?newwindow=1&hl=zh-CN&q=" + 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 == "") { |
||||
alert("search text is empty ! "); |
||||
return false; |
||||
} |
||||
var search_url = "https://www.google.com/search?newwindow=1&hl=zh-CN&q=" + search_txt; |
||||
window.open(search_url); |
||||
} |
||||
} |
||||
</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.3)'; |
||||
|
||||
// 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.3)'; |
||||
|
||||
// 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> |
||||