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.
796 lines
30 KiB
796 lines
30 KiB
5 years ago
|
<!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/img?size=1920x1080-3000");}</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="https://cdn.yimian.xyz/yimian-homepage/yimian-homepage.min.css">
|
||
|
<script src="https://cdn.yimian.xyz/ushio-js/ushio-head.min.js"></script>
|
||
|
<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" id="ushio-eeedog" href="https://www.eee.dog/">
|
||
|
<img src="https://cdn.yimian.xyz/img/head/head_100.png" 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="https://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>
|
||
|
<script src="https://cdn.yimian.xyz/ushio-js/ushio-footer.min.js"></script>
|
||
|
</html>
|