這個頁面是今天早上通過插件寫的：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%--
添加前端書寫代碼插件：
插件在資料中，将查詢包放到MyEclipse的安裝目錄下的drops檔案中，然後重新開機MyEclipse即可！
插入了插件後快鍵鍵也會被更改：control+e
Mac不知道，我自己也沒試出來！
模闆套用：
在自己的項目中建立對應的jsp檔案！
将jsp檔案中的basepath代碼移至其他的位置
然後将複制到html代碼模闆粘貼到對應的jsp中，
然後将basepath代碼移至head标簽中！
将模闆中的前端資源檔案複制到webroot下！
--%>
<%--建立登入頁面 --%>
<html lang="en" class="no-js">
<head>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><%--書寫頁面時，這個标簽需要放在head下面 --%>
<meta charset="utf-8">
<title>Fullscreen Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="css/supersized.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="css/style.css" target="_blank" rel="external nofollow" >
</head>
<body oncontextmenu="return false">
<div class="page-container">
<h1>Login</h1>
<%
//擷取session的标記
Object obj=session.getAttribute("flag");
if(obj!=null){
%>
<div style="text-align:center;color:red;">使用者名或者密碼錯誤！</div>
<%}
session.invalidate();
%>
<form action="user" method="post">
<div>
<input type="text" name="uname" class="username" placeholder="Username" autocomplete="off"/>
</div>
<div>
<input type="password" name="pwd" class="password" placeholder="Password" oncontextmenu="return false" onpaste="return false" />
</div>
<button id="submit" type="submit">登入</button>
<div style="font-size:15px; position:relative;left:300px;top:-20px;"><a href="" target="_blank" rel="external nofollow" >注冊</a></div>
</form>
<div class="connect">
<p>If we can only encounter each other rather than stay with each other,then I wish we had never encountered.</p>
<p style="margin-top:20px;">如果隻是遇見，不能停留，不如不遇見。</p>
</div>
</div>
<div class="alert" style="display:none">
<h2>消息</h2>
<div class="alert_con">
<p id="ts"></p>
<p style="line-height:70px"><a class="btn">确定</a></p>
</div>
</div>
<!-- Javascript -->
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<script>
$(".btn").click(function(){
is_hide();
})
var u = $("input[name=username]");
var p = $("input[name=password]");
$("#submit").live('click',function(){
if(u.val() == '' || p.val() =='')
{
$("#ts").html("使用者名或密碼不能為空~");
is_show();
return false;
}
else{
var reg = /^[0-9A-Za-z]+$/;
if(!reg.exec(u.val()))
{
$("#ts").html("使用者名錯誤");
is_show();
return false;
}
}
});
window.onload = function()
{
$(".connect p").eq(0).animate({"left":"0%"}, 600);
$(".connect p").eq(1).animate({"left":"0%"}, 400);
}
function is_hide(){ $(".alert").animate({"top":"-40%"}, 300) }
function is_show(){ $(".alert").show().animate({"top":"45%"}, 300) }
</script>
</body>
</html> 
1
2
3
bg
name
password
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<meta charset="utf-8">
<title>歡迎進入音樂可視化</title>
<link rel="stylesheet" type="text/css" href="css/css.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div id="menu">
<a id="btStartAudioVisualization" class="bt">啟動音頻可視化</a>
<input id="btLoadAudio" type="file" accept="audio/*"/><label id="labelLoadAudio" for="btLoadAudio" class="bt">加載音頻</label>
</div>
<p id="txtStatus"></p>
<script>
var audio, audioContext, audioSrc;
var analyser, analyserBufferLength;
var audioInfo = 'Song: LAKEY INSPIRED - Chill Day';
//---
var MATHPI2 = Math.PI * 2;
//---
var w;
var h;
var btStart;
var btLoadAudio;
var labelLoadAudio;
var txtStatus;
var canvas;
var context;
var imageData;
var data;
var mouseActive = false;
var mouseDown = false;
var mousePos = { x:0, y:0 };
var fov = 250;
var speed = 0.75;//0.25;
var cubeMinHeight = 2;
var frequencyDamp = 25;
var smoothingTimeConstant = 0.65;
var fftSize = 8192;//32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, 32768
var circleHolder = [];
var time = 0;
var colorInvertValue = 0;
var rgb = {};
rgb.r = Math.random() * MATHPI2;
rgb.g = Math.random() * MATHPI2;
rgb.b = Math.random() * MATHPI2;
var rgb2 = {};
rgb2.r = Math.random() * MATHPI2;
rgb2.g = Math.random() * MATHPI2;
rgb2.b = Math.random() * MATHPI2;
//---
/*
function getRGBColor() {
var r = Math.sin( rgb.r += 0.010 ) * 1 + 1;
var g = Math.sin( rgb.g += 0.007 ) * 1 + 1;
var b = Math.sin( rgb.b += 0.013 ) * 1 + 1;
//var r = Math.sin( rgb.r += 0.040 ) * 1 + 1;
//var g = Math.sin( rgb.g += 0.028 ) * 1 + 1;
//var b = Math.sin( rgb.b += 0.052 ) * 1 + 1;
return { r:r, g:g, b:b };
};*/
function getRGBColor( color ) {
var r = Math.sin( color.r += 0.010 ) * 1 + 1;
var g = Math.sin( color.g += 0.007 ) * 1 + 1;
var b = Math.sin( color.b += 0.013 ) * 1 + 1;
//var r = Math.sin( color.r += 0.040 ) * 1 + 1;
//var g = Math.sin( color.g += 0.028 ) * 1 + 1;
//var b = Math.sin( color.b += 0.052 ) * 1 + 1;
return { r:r, g:g, b:b };
};
function getRGBColor2( color ) {
//var r = Math.sin( color.r += 0.010 ) * 1 + 1;
//var g = Math.sin( color.g += 0.007 ) * 1 + 1;
//var b = Math.sin( color.b += 0.013 ) * 1 + 1;
var r = Math.sin( color.r += 0.040 ) * 1 + 1;
var g = Math.sin( color.g += 0.028 ) * 1 + 1;
var b = Math.sin( color.b += 0.052 ) * 1 + 1;
return { r:r, g:g, b:b };
};
function limitRGBColor( color) {
if ( color.r < percent ) {
color.r = percent;
}
if ( color.g < percent ) {
color.g = percent;
}
if ( color.b < percent ) {
color.b = percent;
}
};
function init() {
canvas = document.createElement( 'canvas' );
canvas.addEventListener( 'mousedown', mouseDownHandler, false );
canvas.addEventListener( 'mouseup', mouseUpHandler, false );
canvas.addEventListener( 'mousemove', mouseMoveHandler, false );
canvas.addEventListener( 'mouseenter', mouseEnterHandler, false );
canvas.addEventListener( 'mouseleave', mouseLeaveHandler, false );
document.body.appendChild( canvas );
context = canvas.getContext( '2d' );
window.addEventListener( 'resize', onResize, false );
onResize();
addCircles();
render();
clearImageData();
render();
context.putImageData( imageData, 0, 0 );
btStart = document.getElementById( 'btStartAudioVisualization' );
btStart.addEventListener( 'mousedown', userStart, false );
btLoadAudio = document.getElementById( 'btLoadAudio' );
btLoadAudio.addEventListener( 'change', loadAudioFileHandler, false );
labelLoadAudio = document.getElementById( 'labelLoadAudio' );
labelLoadAudio.style.display = 'none';
txtStatus = document.getElementById( 'txtStatus' );
txtStatus.innerHTML = 'Waiting Patiently For You... Please Click the Start Button.';
};
//---
function userStart() {
btStart.removeEventListener( 'mousedown', userStart );
btStart.addEventListener( 'mousedown', audioBtHandler, false );
btStart.innerHTML = 'Pause Audio';
btStart.style.display = 'none';
txtStatus.innerHTML = 'Loading Audio...';
audioSetup( 'audio/mp3.mp3' );
animate();
};
//---
function audioSetup( url ) {
if ( audio ) {
audio.pause();
}
audio = new Audio();
audio.src = url;
audio.controls = false;
audio.loop = true;
audio.autoplay = true;
audio.crossOrigin = 'anonymous';
audio.addEventListener( 'canplaythrough', audioLoaded, false );
audioContext = new ( window.AudioContext || window.webkitAudioContext )();
analyser = audioContext.createAnalyser();
analyser.connect( audioContext.destination );
analyser.smoothingTimeConstant = smoothingTimeConstant;
analyser.fftSize = fftSize;
analyserBufferLength = analyser.frequencyBinCount;
audioSrc = audioContext.createMediaElementSource( audio );
audioSrc.connect( analyser );
};
function audioLoaded( e ) {
txtStatus.innerHTML = audioInfo;
btStart.style.display = 'inline-block';
labelLoadAudio.style.display = 'inline-block';
};
function loadAudioFileHandler( e ) {
loadFile( e );
};
function loadFile( e ) {
var input = e.target;
var reader = new FileReader();
audioInfo = input.files[ 0 ].name;
audioSetup( URL.createObjectURL( input.files[ 0 ] ) );
};
//---
function clearImageData() {
for ( var i = 0, l = data.length; i < l; i += 4 ) {
data[ i ] = 0;
data[ i + 1 ] = 0;
data[ i + 2 ] = 0;
data[ i + 3 ] = 255;
}
};
function setPixel( x, y, r, g, b, a ) {
var i = ( x + y * imageData.width ) * 4;
data[ i ] = r;
data[ i + 1 ] = g;
data[ i + 2 ] = b;
data[ i + 3 ] = a;
};
//---
function drawLine( x1, y1, x2, y2, r, g, b, a ) {
var dx = Math.abs( x2 - x1 );
var dy = Math.abs( y2 - y1 );
var sx = ( x1 < x2 ) ? 1 : -1;
var sy = ( y1 < y2 ) ? 1 : -1;
var err = dx - dy;
var lx = x1;
var ly = y1;
while ( true ) {
if ( lx > 0 && lx < w && ly > 0 && ly < h ) {
setPixel( lx, ly, r, g, b, a );
}
if ( ( lx === x2 ) && ( ly === y2 ) )
break;
var e2 = 2 * err;
if ( e2 > -dx ) {
err -= dy;
lx += sx;
}
if ( e2 < dy ) {
err += dx;
ly += sy;
}
}
};
//---
function getCirclePosition( centerX, centerY, radius, index, segments ) {
var angle = index * ( MATHPI2 / segments ) + time;
var x = centerX + Math.cos( angle ) * radius;
var y = centerY + Math.sin( angle ) * radius;
return { x:x, y:y };
};
function drawCircle( centerPosition, radius, segments ) {
var coordinates = [];
var radiusSave;
var diff = 0;//Math.floor( Math.random() * segments );
for ( var i = 0; i <= segments; i++ ) {
//var radiusRandom = radius + Math.random() * ( radius / 8 );
//var radiusRandom = radius + Math.random() * ( radius / 32 );
var radiusRandom = radius;// + ( radius / 8 );
if ( i === 0 ) {
radiusSave = radiusRandom;
}
if ( i === segments ) {
radiusRandom = radiusSave;
}
var centerX = centerPosition.x;
var centerY = centerPosition.y;
var position = getCirclePosition( centerX, centerY, radiusRandom, i, segments );
coordinates.push( { x:position.x, y:position.y, index:i + diff, radius:radiusRandom, segments:segments } );
}
return coordinates;
};
function addCircleSegment( x, y, z, audioBufferIndex ) {
var circleSegment = {};
circleSegment.x = x;
circleSegment.y = y;
//circleSegment.z = z;
circleSegment.x2d = 0;
circleSegment.y2d = 0;
circleSegment.audioBufferIndex = audioBufferIndex;
return circleSegment;
};
function addCircles() {
var audioBufferIndexMin = 8;
var audioBufferIndexMax = 1024;
var audioBufferIndex = audioBufferIndexMin;
var centerPosition = { x:0, y:0 };
var center = { x:0, y:0 };
var toggle = 1;
var index = 0;
var audioIndex = audioBufferIndexMin;
var mp = { x:Math.random() * w, y:Math.random() * h };
for ( var z = -fov; z < fov; z += 5 ) {
var coordinates = drawCircle( centerPosition, 75, 64 );
var circleObj = {};
circleObj.segmentsOutside = [];
circleObj.segmentsInside = [];
circleObj.segmentsInside2 = [];
circleObj.segmentsCount = 0;
circleObj.index = index;
//circleObj.audioIndex = audioIndex;
circleObj.z = z;
circleObj.center = center;
circleObj.circleCenter = { x:0, y:0 };
circleObj.mp = { x:mp.x, y:mp.y };
circleObj.radius = coordinates[ 0 ].radius;
//circleObj.radiusAudio = circleObj.radius;
circleObj.color = { r:0, g:0, b:0 };
//toggle = index % 4;
toggle = index % 2;
index++;
if ( z < 0 ) {
audioIndex++;
} else {
audioIndex--;
}
audioBufferIndex = Math.floor( Math.random() * audioBufferIndexMax ) + audioBufferIndexMin;
//audioBufferIndex = audioBufferIndexMin;
var circleSegmentOutside;
for ( var i = 0, l = coordinates.length; i < l; i++ ) {
var coordinate = coordinates[ i ];
//if ( i % 4 === toggle && i % 2 === 1 ) {
if ( i % 2 === toggle ) {
circleSegmentOutside = addCircleSegment( coordinate.x, coordinate.y, z, audioBufferIndex );
circleSegmentOutside.active = true;
circleSegmentOutside.index = coordinate.index;
circleSegmentOutside.radius = coordinate.radius;
circleSegmentOutside.radiusAudio = circleSegmentOutside.radius;// + Math.random() * 15;
circleSegmentOutside.segments = coordinate.segments;
circleSegmentOutside.coordinates = [];
var co;
if ( i > 0 ) {
co = coordinates[ i - 1 ];
} else {
co = coordinates[ l - 1 ];
}
var sub1 = addCircleSegment( co.x, co.y, z, audioBufferIndex );
var sub2 = addCircleSegment( coordinate.x, coordinate.y, z - 5, audioBufferIndex );
var sub3 = addCircleSegment( co.x, co.y, z - 5, audioBufferIndex );
var sub4 = addCircleSegment( coordinate.x, coordinate.y, z, audioBufferIndex );
var sub5 = addCircleSegment( co.x, co.y, z, audioBufferIndex );
var sub6 = addCircleSegment( coordinate.x, coordinate.y, z - 5, audioBufferIndex );
var sub7 = addCircleSegment( co.x, co.y, z - 5, audioBufferIndex );
sub1.index = co.index;
sub2.index = coordinate.index;
sub3.index = co.index;
sub4.index = coordinate.index;
sub5.index = co.index;
sub6.index = coordinate.index;
sub7.index = co.index;
circleSegmentOutside.subs = [];
circleSegmentOutside.subs.push( sub1, sub2, sub3, sub4, sub5, sub6, sub7 );
//audioBufferIndex = Math.floor( Math.random() * audioBufferIndexMax ) + audioBufferIndexMin;
if ( i < l - 1 ) {
audioBufferIndex = Math.floor( Math.random() * audioBufferIndexMax ) + audioBufferIndexMin;
} else {
audioBufferIndex = circleObj.segmentsOutside[ 0 ].audioBufferIndex;
}
circleObj.segmentsOutside.push( circleSegmentOutside );
} else {
circleObj.segmentsOutside.push( { active:false } );
}
}
circleHolder.push( circleObj );
}
};
//---
function onResize(){
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
canvas.width = w;
canvas.height = h;
context.fillStyle = '#000000';
context.fillRect( 0, 0, w, h );
imageData = context.getImageData( 0, 0, w, h );
data = imageData.data;
};
//---
function audioBtHandler( event ) {
if ( audio.paused ) {
audio.play();
btStart.innerHTML = 'Pause Audio';
} else {
audio.pause();
btStart.innerHTML = 'Play Audio';
}
};
//---
function mouseDownHandler( event ) {
mouseDown = true;
};
function mouseUpHandler( event ) {
mouseDown = false;
};
function mouseEnterHandler( event ) {
mouseActive = true;
};
function mouseLeaveHandler( event ) {
mouseActive = false;
//mousePos.x = w / 2;
//mousePos.y = h / 2;
mouseDown = false;
};
function mouseMoveHandler( event ) {
mousePos = getMousePos( canvas, event );
};
function getMousePos( canvas, event ) {
var rect = canvas.getBoundingClientRect();
return { x:event.clientX - rect.left, y:event.clientY - rect.top };
};
//---
function render() {
var aa = false;
if ( analyser ) {
aa = true;
}
var frequencySource;
if ( aa === true ) {
frequencySource = new Uint8Array( analyser.frequencyBinCount );
analyser.getByteFrequencyData( frequencySource );
}
//---
var sortArray = false;
//---
var col = getRGBColor2( rgb );
var col2 = getRGBColor( rgb2 );
limitRGBColor( col, 0.45 );
limitRGBColor( col2, 0.25 );
//---
for ( var i = 0, l = circleHolder.length; i < l; i++ ) {
var circleObj = circleHolder[ i ];
circleObj.color.r = col.r - ( circleObj.z + fov ) / fov;
circleObj.color.g = col.g - ( circleObj.z + fov ) / fov;
circleObj.color.b = col.b - ( circleObj.z + fov ) / fov;
//circleObj.color.r = Math.floor( ( ( ( col.r - circleObj.z + fov ) ) + ( col2.r - circleObj.z + fov ) ) / 2 );
//circleObj.color.g = Math.floor( ( ( ( col.g - circleObj.z + fov ) ) + ( col2.g - circleObj.z + fov ) ) / 2 );
//circleObj.color.b = Math.floor( ( ( ( col.b - circleObj.z + fov ) ) + ( col2.b - circleObj.z + fov ) ) / 2 );
if ( circleObj.color.r < col2.r ) {
circleObj.color.r = col2.r;
}
if ( circleObj.color.g < col2.g ) {
circleObj.color.g = col2.g;
}
if ( circleObj.color.b < col2.b ) {
circleObj.color.b = col2.b;
}
var circleObjBack;
if ( i > 0 ) {
circleObjBack = circleHolder[ i - 1 ];
}
//---
if ( mouseActive ) {
circleObj.mp = mousePos;
} else {
circleObj.mp.x += ( ( w / 2 ) - circleObj.mp.x ) * 0.00025;
circleObj.mp.y += ( ( h / 2 ) - circleObj.mp.y ) * 0.00025;
}
//circleObj.center.x = ( ( w / 2 ) - circleObj.mp.x ) * ( -i / 150 ) + w / 2;
//circleObj.center.y = ( ( h / 2 ) - circleObj.mp.y ) * ( -i / 150 ) + h / 2;
circleObj.center.x = ( ( w / 2 ) - circleObj.mp.x ) * ( ( circleObj.z - fov ) / 500 ) + w / 2;
circleObj.center.y = ( ( h / 2 ) - circleObj.mp.y ) * ( ( circleObj.z - fov ) / 500 ) + h / 2;
//---
if ( aa === true ) {
//var f = frequencySource[ Math.floor(circleObj.z + fov) ];
//var f = frequencySource[ i ];
//var f = frequencySource[ circleObj.audioIndex ];
//var fAdd = (f / 25);// * ( (circleObj.z - fov) / 200 );
//circleObj.radiusAudio = fAdd;
}
//---
for ( var j = 0, k = circleObj.segmentsOutside.length; j < k; j++ ) {
var circleSegmentOutside = circleObj.segmentsOutside[ j ];
if ( circleSegmentOutside.active === true ) {
//---
var scale = fov / ( fov + circleObj.z );
var scaleBack;
if ( i > 0 ) {
scaleBack = fov / ( fov + circleObjBack.z );
}
var frequency, frequencyAdd;
circleSegmentOutside.x2d = ( circleSegmentOutside.x * scale ) + circleObj.center.x;
circleSegmentOutside.y2d = ( circleSegmentOutside.y * scale ) + circleObj.center.y;
//---
if ( aa === true ) {
frequency = frequencySource[ circleSegmentOutside.audioBufferIndex ];
frequencyAdd = frequency / 20;
//---
circleSegmentOutside.radiusAudio = circleSegmentOutside.radius - frequencyAdd;
}
//---
var lineColorValue = 0;
if ( j > 0 ) {
if ( aa === true && audio.paused === false ) {
lineColorValue = Math.round( i / l * ( 55 + frequency ) );//255
if ( lineColorValue > 255 ) {
lineColorValue = 255;
}
} else {
lineColorValue = Math.round( i / l * 200 );//255
}
}
//---
if ( i > 0 && i < l - 1 ) {
var sub1 = circleSegmentOutside.subs[ 0 ];
var sub1angle = sub1.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
sub1.x2d = ( sub1.x * scale ) + circleObj.center.x;
sub1.y2d = ( sub1.y * scale ) + circleObj.center.y;
sub1.x = circleObj.circleCenter.x + Math.cos( sub1angle ) * circleSegmentOutside.radiusAudio;
sub1.y = circleObj.circleCenter.y + Math.sin( sub1angle ) * circleSegmentOutside.radiusAudio;
var sub2 = circleSegmentOutside.subs[ 1 ];
var sub2angle = sub2.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
sub2.x2d = ( sub2.x * scaleBack ) + circleObjBack.center.x;
sub2.y2d = ( sub2.y * scaleBack ) + circleObjBack.center.y;
sub2.x = circleObj.circleCenter.x + Math.cos( sub2angle ) * circleSegmentOutside.radiusAudio;
sub2.y = circleObj.circleCenter.y + Math.sin( sub2angle ) * circleSegmentOutside.radiusAudio;
var sub3 = circleSegmentOutside.subs[ 2 ];
var sub3angle = sub3.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
sub3.x2d = ( sub3.x * scaleBack ) + circleObjBack.center.x;
sub3.y2d = ( sub3.y * scaleBack ) + circleObjBack.center.y;
sub3.x = circleObj.circleCenter.x + Math.cos( sub3angle ) * circleSegmentOutside.radiusAudio;
sub3.y = circleObj.circleCenter.y + Math.sin( sub3angle ) * circleSegmentOutside.radiusAudio;
var sub4 = circleSegmentOutside.subs[ 3 ];
var sub4angle = sub4.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
sub4.x2d = ( sub4.x * scale ) + circleObj.center.x;
sub4.y2d = ( sub4.y * scale ) + circleObj.center.y;
sub4.x = circleObj.circleCenter.x + Math.cos( sub4angle ) * circleSegmentOutside.radius;
sub4.y = circleObj.circleCenter.y + Math.sin( sub4angle ) * circleSegmentOutside.radius;
var sub5 = circleSegmentOutside.subs[ 4 ];
var sub5angle = sub5.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
sub5.x2d = ( sub5.x * scale ) + circleObj.center.x;
sub5.y2d = ( sub5.y * scale ) + circleObj.center.y;
sub5.x = circleObj.circleCenter.x + Math.cos( sub5angle ) * circleSegmentOutside.radius;
sub5.y = circleObj.circleCenter.y + Math.sin( sub5angle ) * circleSegmentOutside.radius;
var sub6 = circleSegmentOutside.subs[ 5 ];
var sub6angle = sub6.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
sub6.x2d = ( sub6.x * scaleBack ) + circleObjBack.center.x;
sub6.y2d = ( sub6.y * scaleBack ) + circleObjBack.center.y;
sub6.x = circleObj.circleCenter.x + Math.cos( sub6angle ) * circleSegmentOutside.radius;
sub6.y = circleObj.circleCenter.y + Math.sin( sub6angle ) * circleSegmentOutside.radius;
var sub7 = circleSegmentOutside.subs[ 6 ];
var sub7angle = sub7.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
sub7.x2d = ( sub7.x * scaleBack ) + circleObjBack.center.x;
sub7.y2d = ( sub7.y * scaleBack ) + circleObjBack.center.y;
sub7.x = circleObj.circleCenter.x + Math.cos( sub7angle ) * circleSegmentOutside.radius;
sub7.y = circleObj.circleCenter.y + Math.sin( sub7angle ) * circleSegmentOutside.radius;
var p1;
var p2;
var p3;
var p4;
var p5 = circleSegmentOutside.subs[ 3 ];
var p6 = circleSegmentOutside.subs[ 4 ];
var p7 = circleSegmentOutside.subs[ 6 ];
var p8 = circleSegmentOutside.subs[ 5 ];
if ( frequencyAdd > 0 ) {
p1 = circleSegmentOutside;
p2 = circleSegmentOutside.subs[ 1 ];
p3 = circleSegmentOutside.subs[ 2 ];
p4 = circleSegmentOutside.subs[ 0 ];
}
var cr = Math.round( circleObj.color.r * lineColorValue );
var cg = Math.round( circleObj.color.g * lineColorValue );
var cb = Math.round( circleObj.color.b * lineColorValue );
if ( frequencyAdd > 0 ) {
drawLine( p1.x2d | 0, p1.y2d | 0, p2.x2d | 0, p2.y2d | 0, cr, cg, cb, 255 );
drawLine( p2.x2d | 0, p2.y2d | 0, p3.x2d | 0, p3.y2d | 0, cr, cg, cb, 255 );
drawLine( p3.x2d | 0, p3.y2d | 0, p4.x2d | 0, p4.y2d | 0, cr, cg, cb, 255 );
drawLine( p4.x2d | 0, p4.y2d | 0, p1.x2d | 0, p1.y2d | 0, cr, cg, cb, 255 );
drawLine( p5.x2d | 0, p5.y2d | 0, p1.x2d | 0, p1.y2d | 0, cr, cg, cb, 255 );
drawLine( p6.x2d | 0, p6.y2d | 0, p4.x2d | 0, p4.y2d | 0, cr, cg, cb, 255 );
drawLine( p7.x2d | 0, p7.y2d | 0, p3.x2d | 0, p3.y2d | 0, cr, cg, cb, 255 );
drawLine( p8.x2d | 0, p8.y2d | 0, p2.x2d | 0, p2.y2d | 0, cr, cg, cb, 255 );
}
if ( circleObj.z < fov / 2 ) {
drawLine( p5.x2d | 0, p5.y2d | 0, p6.x2d | 0, p6.y2d | 0, cr, cg, cb, 255 );
drawLine( p6.x2d | 0, p6.y2d | 0, p7.x2d | 0, p7.y2d | 0, cr, cg, cb, 255 );
drawLine( p7.x2d | 0, p7.y2d | 0, p8.x2d | 0, p8.y2d | 0, cr, cg, cb, 255 );
drawLine( p8.x2d | 0, p8.y2d | 0, p5.x2d | 0, p5.y2d | 0, cr, cg, cb, 255 );
}
}
//---
var circleSegmentOutsideangle;
//if ( j < k - 1 ) {
circleSegmentOutsideangle = circleSegmentOutside.index * ( MATHPI2 / circleSegmentOutside.segments ) + time;
circleSegmentOutside.x = circleObj.circleCenter.x + Math.cos( circleSegmentOutsideangle ) * circleSegmentOutside.radiusAudio;
circleSegmentOutside.y = circleObj.circleCenter.y + Math.sin( circleSegmentOutsideangle ) * circleSegmentOutside.radiusAudio;
/*} else {
var circleSegmentOutside1 = circleObj.segmentsOutside[ 0 ];
circleSegmentOutsideangle = circleSegmentOutside1.index * ( MATHPI2 / circleSegmentOutside1.segments ) + time;
circleSegmentOutside.x = circleObj.circleCenter.x + Math.cos( circleSegmentOutsideangle ) * circleSegmentOutside1.radiusAudio;
circleSegmentOutside.y = circleObj.circleCenter.y + Math.sin( circleSegmentOutsideangle ) * circleSegmentOutside1.radiusAudio;
}
*/
//---
/*
if ( i > 0 && i < l - 1 ) {
//if ( i > 0 && i < l - 1 && j < k - 1 ) {
var circleSegmentOutsideLineBack;// = circleObjBack[ j ];
var circleSegmentInsideLineBack;
//if ( j === 0 ) {
//pB = circleObjBack.segments[ circleObjBack.segments.length - 1 ];
//} else {
//pB = circleObjBack.segments[ j - 1 ];
//}
circleSegmentOutsideLineBack = circleObjBack.segmentsOutside[ j ];
circleSegmentInsideLineBack = circleObjBack.segmentsInside[ j ];
//drawLine( circleSegmentOutside.x2d | 0, circleSegmentOutside.y2d | 0, circleSegmentOutsideLineBack.x2d | 0, circleSegmentOutsideLineBack.y2d | 0, 0, Math.round( lineColorValue / 2 ), lineColorValue, 255 );
//drawLine( circleSegmentInside.x2d | 0, circleSegmentInside.y2d | 0, circleSegmentInsideLineBack.x2d | 0, circleSegmentInsideLineBack.y2d | 0, 0, Math.round( lineColorValue / 2 ), lineColorValue, 255 );
}
*/
}
}
if ( mouseDown ) {
circleObj.z += speed;
if ( circleObj.z > fov ) {
circleObj.z -= ( fov * 2 );
sortArray = true;
}
} else {
circleObj.z -= speed;
if ( circleObj.z < -fov ) {
circleObj.z += ( fov * 2 );
sortArray = true;
}
}
}
//---
if ( sortArray ) {
circleHolder = circleHolder.sort( function( a, b ) {
return ( b.z - a.z );
} );
}
//---
if ( mouseDown ) {
time -= 0.005;
} else {
time += 0.005;
}
//---
//soft invert colors
if ( mouseDown ) {
if ( colorInvertValue < 255 )
colorInvertValue += 5;
else
colorInvertValue = 255;
softInvert( colorInvertValue );
} else {
if ( colorInvertValue > 0 )
colorInvertValue -= 5;
else
colorInvertValue = 0;
if ( colorInvertValue > 0 )
softInvert( colorInvertValue );
}
};
//---
function softInvert( value ) {
for ( var j = 0, n = data.length; j < n; j += 4 ) {
data[ j ] = Math.abs( value - data[ j ] ); // red
data[ j + 1 ] = Math.abs( value - data[ j + 1 ] ); // green
data[ j + 2 ] = Math.abs( value - data[ j + 2 ] ); // blue
data[ j + 3 ] = 255;// - data[ j + 3 ]; // alpha
}
};
//---
function animate() {
clearImageData();
render();
context.putImageData( imageData, 0, 0 );
requestAnimationFrame( animate );
};
window.requestAnimFrame = ( function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ) {
window.setTimeout( callback, 1000 / 60 );
};
} )();
//---
init();</script>
</body>
</html> js代碼：
app.js
particlesJS('particles-js',
{
"particles": {
"number": {
"value": 40,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.7,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.6,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 200,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": false
}
); supersized：
jQuery(function($){
$.supersized({
// Functionality
slide_interval : 6000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 3000, // Speed of transition
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : [ // Slideshow Images
{image : './img/1.jpg'},
{image : './img/2.jpg'},
{image : './img/3.jpg'}
]
});
});