Integrates Codef Library
* Adds StarField & 3D Lines * Style fixes to accommodate canvas * Adds Canvas container Signed-off-by: Indrajith K L <mac91112@gmail.com>
This commit is contained in:
Indrajith K L
6
hg.css
6
hg.css
@@ -50,6 +50,7 @@ body {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.music-player .color-overlay {
|
.music-player .color-overlay {
|
||||||
@@ -251,3 +252,8 @@ dialog::backdrop {
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#codef-canvas canvas {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
@@ -46,7 +46,11 @@
|
|||||||
<!-- <div id="upload-info" class="no-pause" title="Upload a playlist (downloaded from history)">Upload</div> -->
|
<!-- <div id="upload-info" class="no-pause" title="Upload a playlist (downloaded from history)">Upload</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="codef-canvas"></div>
|
||||||
<input id="file-upload" type="file" accept="application/json" />
|
<input id="file-upload" type="file" accept="application/json" />
|
||||||
|
<script src="libs/codef_core.js"></script>
|
||||||
|
<script src="libs/codef_starfield.js"></script>
|
||||||
|
<script src="libs/codef_3d.js"></script>
|
||||||
<script src="player.js"></script>
|
<script src="player.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
929
libs/codef_3d.js
Normal file
929
libs/codef_3d.js
Normal file
File diff suppressed because one or more lines are too long
319
libs/codef_core.js
Normal file
319
libs/codef_core.js
Normal file
@@ -0,0 +1,319 @@
|
|||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
Copyright (c) 2011 Antoine Santo Aka NoNameNo
|
||||||
|
|
||||||
|
This File is part of the CODEF project. (https://github.com/N0NameN0/CODEF)
|
||||||
|
|
||||||
|
More info : http://codef.santo.fr
|
||||||
|
Demo gallery http://www.wab.com
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
window.requestAnimFrame = (function(){
|
||||||
|
return window.requestAnimationFrame ||
|
||||||
|
window.webkitRequestAnimationFrame ||
|
||||||
|
window.mozRequestAnimationFrame ||
|
||||||
|
window.oRequestAnimationFrame ||
|
||||||
|
window.msRequestAnimationFrame ||
|
||||||
|
function(/* function */ callback, /* DOMElement */ element){
|
||||||
|
window.setTimeout(callback, 1000 / 60);
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
function canvas(w, h, divname){
|
||||||
|
this.width=w;
|
||||||
|
this.height=h;
|
||||||
|
this.canvas;
|
||||||
|
this.contex;
|
||||||
|
this.canvas = document.createElement("canvas");
|
||||||
|
if(divname) document.getElementById(divname).appendChild(this.canvas);
|
||||||
|
this.canvas.setAttribute('width', w);
|
||||||
|
this.canvas.setAttribute('height', h);
|
||||||
|
this.contex = this.canvas.getContext('2d');
|
||||||
|
|
||||||
|
this.handlex=0;
|
||||||
|
this.handley=0;
|
||||||
|
this.midhandled=false;
|
||||||
|
this.tilew=0;
|
||||||
|
this.tileh=0;
|
||||||
|
this.tilestart=0;
|
||||||
|
|
||||||
|
this.fill = function(color){
|
||||||
|
var tmp = this.contex.fillStyle;
|
||||||
|
var tmp2= this.contex.globalAlpha;
|
||||||
|
this.contex.globalAlpha=1;
|
||||||
|
this.contex.fillStyle = color;
|
||||||
|
this.contex.fillRect (0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
this.contex.fillStyle = tmp
|
||||||
|
this.contex.globalAlpha=tmp2;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.clear = function(){
|
||||||
|
this.contex.clearRect (0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.plot = function(x,y,width,color){
|
||||||
|
this.quad(x,y,x+width,y,x+width,y+width,x,y+width,color);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.line = function(x1,y1,x2,y2,width,color){
|
||||||
|
var tmp=this.contex.strokeStyle;
|
||||||
|
this.contex.strokeStyle=color;
|
||||||
|
this.contex.lineWidth=width;
|
||||||
|
this.contex.beginPath();
|
||||||
|
this.contex.moveTo(x1,y1);
|
||||||
|
this.contex.lineTo(x2,y2);
|
||||||
|
this.contex.stroke();
|
||||||
|
this.contex.closePath();
|
||||||
|
this.contex.strokeStyle=tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.triangle = function(x1,y1,x2,y2,x3,y3,color){
|
||||||
|
this.contex.beginPath();
|
||||||
|
this.contex.moveTo(x1,y1);
|
||||||
|
this.contex.lineTo(x2,y2);
|
||||||
|
this.contex.lineTo(x3,y3);
|
||||||
|
this.contex.closePath();
|
||||||
|
this.contex.fillStyle=color;
|
||||||
|
this.contex.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.quad = function(x1,y1,x2,y2,x3,y3,x4,y4,color){
|
||||||
|
this.contex.beginPath();
|
||||||
|
|
||||||
|
if(arguments.length==5){
|
||||||
|
this.contex.moveTo(x1,y1);
|
||||||
|
this.contex.lineTo(x1+x2,y1);
|
||||||
|
this.contex.lineTo(x1+x2,y1+y2);
|
||||||
|
this.contex.lineTo(x1,y1+y2);
|
||||||
|
this.contex.closePath();
|
||||||
|
this.contex.fillStyle=x3;
|
||||||
|
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
this.contex.moveTo(x1,y1);
|
||||||
|
this.contex.lineTo(x2,y2);
|
||||||
|
this.contex.lineTo(x3,y3);
|
||||||
|
this.contex.lineTo(x4,y4);
|
||||||
|
this.contex.closePath();
|
||||||
|
this.contex.fillStyle=color;
|
||||||
|
|
||||||
|
}
|
||||||
|
this.contex.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.initTile=function(tilew,tileh, tilestart){
|
||||||
|
this.tileh=tileh;
|
||||||
|
this.tilew=tilew;
|
||||||
|
if(typeof(tilestart)!='undefined')
|
||||||
|
this.tilestart=tilestart;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.draw = function(dst,x,y,alpha, rot,w,h){
|
||||||
|
var tmp=dst.contex.globalAlpha;
|
||||||
|
if(typeof(alpha)=='undefined') alpha=1;
|
||||||
|
dst.contex.globalAlpha=alpha;
|
||||||
|
if(arguments.length==3 || arguments.length==4)
|
||||||
|
dst.contex.drawImage(this.canvas, x-this.handlex,y-this.handley);
|
||||||
|
else if(arguments.length==5){
|
||||||
|
dst.contex.translate(x,y);
|
||||||
|
dst.contex.rotate(rot*Math.PI/180);
|
||||||
|
dst.contex.translate(-this.handlex,-this.handley);
|
||||||
|
dst.contex.drawImage(this.canvas, 0,0);
|
||||||
|
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
dst.contex.translate(x,y);
|
||||||
|
dst.contex.rotate(rot*Math.PI/180);
|
||||||
|
dst.contex.scale(w,h);
|
||||||
|
dst.contex.translate(-this.handlex,-this.handley);
|
||||||
|
dst.contex.drawImage(this.canvas, 0,0);
|
||||||
|
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
|
dst.contex.globalAlpha=tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.drawTile = function(dst, nb, x, y, alpha, rot, w, h){
|
||||||
|
var tmp=dst.contex.globalAlpha;
|
||||||
|
if(typeof(alpha)=='undefined') alpha=1;
|
||||||
|
dst.contex.globalAlpha=alpha;
|
||||||
|
this.drawPart(dst,x,y,Math.floor((nb%(this.canvas.width/this.tilew)))*this.tilew,Math.floor(nb/(this.canvas.width/this.tilew))*this.tileh,this.tilew,this.tileh,alpha, rot, w, h);
|
||||||
|
dst.contex.globalAlpha=tmp;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.drawPart = function(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy){
|
||||||
|
var tmp=dst.contex.globalAlpha;
|
||||||
|
if(typeof(alpha)=='undefined') alpha=1;
|
||||||
|
dst.contex.globalAlpha=alpha;
|
||||||
|
if(arguments.length==7 || arguments.length==8){
|
||||||
|
dst.contex.translate(x,y);
|
||||||
|
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||||
|
dst.contex.drawImage(this.canvas,partx,party,partw,parth,null,null,partw,parth);
|
||||||
|
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
|
else if(arguments.length==9){
|
||||||
|
dst.contex.translate(x,y);
|
||||||
|
dst.contex.rotate(rot*Math.PI/180);
|
||||||
|
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||||
|
dst.contex.drawImage(this.canvas,partx,party,partw,parth,null,null,partw,parth);
|
||||||
|
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
dst.contex.translate(x,y);
|
||||||
|
dst.contex.rotate(rot*Math.PI/180);
|
||||||
|
dst.contex.scale(zx,zy);
|
||||||
|
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||||
|
dst.contex.drawImage(this.canvas,partx,party,partw,parth,null,null,partw,parth);
|
||||||
|
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
|
dst.contex.globalAlpha=tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setmidhandle=function(){
|
||||||
|
this.handlex=parseInt(this.canvas.width/2);
|
||||||
|
this.handley=parseInt(this.canvas.height/2);
|
||||||
|
this.midhandled=true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.sethandle=function(x,y){
|
||||||
|
this.handlex=x;
|
||||||
|
this.handley=y;
|
||||||
|
this.midhandled=false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.print=function(dst, str, x, y, alpha, rot, w, h){
|
||||||
|
for(var i=0; i<str.length; i++){
|
||||||
|
if(typeof(w)!='undefined')
|
||||||
|
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew*w,y,alpha,rot,w,h);
|
||||||
|
else
|
||||||
|
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew,y,alpha,rot,w,h);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return this;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function image(img){
|
||||||
|
this.img = new Image();
|
||||||
|
this.img.src=img;
|
||||||
|
this.handlex=0;
|
||||||
|
this.handley=0;
|
||||||
|
this.midhandled=false;
|
||||||
|
this.tilew=0;
|
||||||
|
this.tileh=0;
|
||||||
|
this.tilestart=0;
|
||||||
|
|
||||||
|
this.initTile=function(tilew,tileh,tilestart){
|
||||||
|
this.tileh=tileh;
|
||||||
|
this.tilew=tilew;
|
||||||
|
if(typeof(tilestart)!='undefined')
|
||||||
|
this.tilestart=tilestart;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.draw = function(dst,x,y,alpha, rot,w,h){
|
||||||
|
var tmp=dst.contex.globalAlpha;
|
||||||
|
if(typeof(alpha)=='undefined') alpha=1;
|
||||||
|
dst.contex.globalAlpha=alpha;
|
||||||
|
if(arguments.length==3 || arguments.length==4)
|
||||||
|
dst.contex.drawImage(this.img, x-this.handlex,y-this.handley);
|
||||||
|
else if(arguments.length==5){
|
||||||
|
dst.contex.translate(x,y);
|
||||||
|
dst.contex.rotate(rot*Math.PI/180);
|
||||||
|
dst.contex.translate(-this.handlex,-this.handley);
|
||||||
|
dst.contex.drawImage(this.img, 0,0);
|
||||||
|
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
dst.contex.translate(x,y);
|
||||||
|
dst.contex.rotate(rot*Math.PI/180);
|
||||||
|
dst.contex.scale(w,h);
|
||||||
|
dst.contex.translate(-this.handlex,-this.handley);
|
||||||
|
dst.contex.drawImage(this.img, 0,0);
|
||||||
|
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
|
dst.contex.globalAlpha=tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.drawTile = function(dst, nb, x, y, alpha, rot, w, h){
|
||||||
|
var tmp=dst.contex.globalAlpha;
|
||||||
|
if(typeof(alpha)=='undefined') alpha=1;
|
||||||
|
dst.contex.globalAlpha=alpha;
|
||||||
|
this.drawPart(dst,x,y,Math.floor((nb%(this.img.width/this.tilew)))*this.tilew,Math.floor(nb/(this.img.width/this.tilew))*this.tileh,this.tilew,this.tileh,alpha, rot, w, h);
|
||||||
|
dst.contex.globalAlpha=tmp;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
this.drawPart = function(dst,x,y,partx,party,partw,parth,alpha, rot,zx,zy){
|
||||||
|
var tmp=dst.contex.globalAlpha;
|
||||||
|
if(typeof(alpha)=='undefined') alpha=1;
|
||||||
|
dst.contex.globalAlpha=alpha;
|
||||||
|
if(arguments.length==7 || arguments.length==8){
|
||||||
|
dst.contex.translate(x,y);
|
||||||
|
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||||
|
dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth);
|
||||||
|
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
|
else if(arguments.length==9){
|
||||||
|
dst.contex.translate(x,y);
|
||||||
|
dst.contex.rotate(rot*Math.PI/180);
|
||||||
|
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||||
|
dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth);
|
||||||
|
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
dst.contex.translate(x,y);
|
||||||
|
dst.contex.rotate(rot*Math.PI/180);
|
||||||
|
dst.contex.scale(zx,zy);
|
||||||
|
if(this.midhandled==true) dst.contex.translate(-partw/2,-parth/2); else dst.contex.translate(-this.handlex,-this.handley);
|
||||||
|
dst.contex.drawImage(this.img,partx,party,partw,parth,null,null,partw,parth);
|
||||||
|
dst.contex.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
}
|
||||||
|
dst.contex.globalAlpha=tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
this.setmidhandle=function(){
|
||||||
|
this.handlex=parseInt(this.img.width/2);
|
||||||
|
this.handley=parseInt(this.img.height/2);
|
||||||
|
this.midhandled=true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.sethandle=function(x,y){
|
||||||
|
this.handlex=x;
|
||||||
|
this.handley=y;
|
||||||
|
this.midhandled=false;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.print=function(dst, str, x, y, alpha, rot, w, h){
|
||||||
|
for(var i=0; i<str.length; i++){
|
||||||
|
if(typeof(w)!='undefined')
|
||||||
|
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew*w,y,alpha,rot,w,h);
|
||||||
|
else
|
||||||
|
this.drawTile(dst, str[i].charCodeAt(0)-this.tilestart,x+i*this.tilew,y,alpha,rot,w,h);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
150
libs/codef_starfield.js
Normal file
150
libs/codef_starfield.js
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
Copyright (c) 2011 Antoine Santo Aka NoNameNo
|
||||||
|
|
||||||
|
This File is part of the CODEF project. (https://github.com/N0NameN0/CODEF)
|
||||||
|
|
||||||
|
More info : http://codef.santo.fr
|
||||||
|
Demo gallery http://www.wab.com
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
|
------------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
function starfield3D(dest, nb, speed, w, h, centx, centy, color, ratio, offsetx, offsety){
|
||||||
|
this.dest=dest;
|
||||||
|
this.test=true;
|
||||||
|
this.n=nb;
|
||||||
|
this.star=new Array(this.n);
|
||||||
|
this.w=w;
|
||||||
|
this.h=h;
|
||||||
|
this.x=0;
|
||||||
|
this.y=0;
|
||||||
|
this.z=0;
|
||||||
|
this.offsetx=0;
|
||||||
|
this.offsety=0;
|
||||||
|
if(offsetx) this.offsetx=offsetx;
|
||||||
|
if(offsety) this.offsety=offsety;
|
||||||
|
this.centx=centx;
|
||||||
|
this.centy=centy;
|
||||||
|
this.color=color;
|
||||||
|
this.star_x_save,this.star_y_save;
|
||||||
|
this.star_speed=speed;
|
||||||
|
this.star_ratio=ratio;
|
||||||
|
this.star_color_ratio=0;
|
||||||
|
this.x=Math.round(this.w/2);
|
||||||
|
this.y=Math.round(this.h/2);
|
||||||
|
this.z=(this.w+this.h)/2;
|
||||||
|
this.star_color_ratio=1/this.z;
|
||||||
|
this.cursor_x=this.x;
|
||||||
|
this.cursor_y=this.y;
|
||||||
|
|
||||||
|
for(var i=0;i<this.n;i++){
|
||||||
|
this.star[i]=new Array(5);
|
||||||
|
this.star[i][0]=Math.random()*this.w*2-this.x*2;
|
||||||
|
this.star[i][1]=Math.random()*this.h*2-this.y*2;
|
||||||
|
this.star[i][2]=Math.round(Math.random()*this.z);
|
||||||
|
this.star[i][3]=0;
|
||||||
|
this.star[i][4]=0;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.draw = function(){
|
||||||
|
var tmp=this.dest.contex.strokeStyle;
|
||||||
|
var tmp2 = this.dest.contex.globalAlpha;
|
||||||
|
var tmp3 = this.dest.contex.lineWidth;
|
||||||
|
this.dest.contex.globalAlpha=1;
|
||||||
|
this.dest.contex.strokeStyle=this.color;
|
||||||
|
|
||||||
|
for(var i=0;i<this.n;i++){
|
||||||
|
this.test=true;
|
||||||
|
this.star_x_save=this.star[i][3];
|
||||||
|
this.star_y_save=this.star[i][4];
|
||||||
|
this.star[i][0]+=(this.centx-this.x)>>4; if(this.star[i][0]>this.x<<1) { this.star[i][0]-=this.w<<1; this.test=false; } if(this.star[i][0]<-this.x<<1) { this.star[i][0]+=this.w<<1; this.test=false; }
|
||||||
|
this.star[i][1]+=(this.centy-this.y)>>4; if(this.star[i][1]>this.y<<1) { this.star[i][1]-=this.h<<1; this.test=false; } if(this.star[i][1]<-this.y<<1) { this.star[i][1]+=this.h<<1; this.test=false; }
|
||||||
|
this.star[i][2]-=this.star_speed; if(this.star[i][2]>this.z) { this.star[i][2]-=this.z; this.test=false; } if(this.star[i][2]<0) { this.star[i][2]+=this.z; this.test=false; }
|
||||||
|
this.star[i][3]=this.x+(this.star[i][0]/this.star[i][2])*this.star_ratio;
|
||||||
|
this.star[i][4]=this.y+(this.star[i][1]/this.star[i][2])*this.star_ratio;
|
||||||
|
if(this.star_x_save>0&&this.star_x_save<this.w&&this.star_y_save>0&&this.star_y_save<this.h&&this.test){
|
||||||
|
this.dest.contex.lineWidth=(1-this.star_color_ratio*this.star[i][2])*2;
|
||||||
|
this.dest.contex.beginPath();
|
||||||
|
this.dest.contex.moveTo(this.star_x_save+this.offsetx,this.star_y_save+this.offsety);
|
||||||
|
this.dest.contex.lineTo(this.star[i][3]+this.offsetx,this.star[i][4]+this.offsety);
|
||||||
|
this.dest.contex.stroke();
|
||||||
|
this.dest.contex.closePath();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.dest.contex.strokeStyle=tmp;
|
||||||
|
this.dest.contex.globalAlpha=tmp2;
|
||||||
|
this.dest.contex.lineWidth=tmp3;
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function starfield2D_dot(dst,params){
|
||||||
|
this.dst=dst;
|
||||||
|
this.stars=new Array();
|
||||||
|
var t=0;
|
||||||
|
|
||||||
|
for(var i=0; i<params.length; i++){
|
||||||
|
for(var j=0; j<params[i].nb; j++){
|
||||||
|
this.stars[t]={x:Math.random()*this.dst.canvas.width, y:Math.random()*this.dst.canvas.height, speedx:params[i].speedx, speedy:params[i].speedy, color:params[i].color, size:params[i].size};
|
||||||
|
t++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.draw=function(){
|
||||||
|
for(var i=0; i<this.stars.length; i++){
|
||||||
|
this.dst.plot(this.stars[i].x,this.stars[i].y,this.stars[i].size,this.stars[i].color);
|
||||||
|
this.stars[i].x+=this.stars[i].speedx;
|
||||||
|
this.stars[i].y+=this.stars[i].speedy;
|
||||||
|
if(this.stars[i].x>this.dst.canvas.width) this.stars[i].x=0;
|
||||||
|
if(this.stars[i].x<0) this.stars[i].x=this.dst.canvas.width;
|
||||||
|
if(this.stars[i].y>this.dst.canvas.height) this.stars[i].y=0;
|
||||||
|
if(this.stars[i].y<0) this.stars[i].y=this.dst.canvas.height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function starfield2D_img(dst,img,params){
|
||||||
|
this.dst=dst;
|
||||||
|
this.stars=new Array();
|
||||||
|
this.img=img;
|
||||||
|
var t=0;
|
||||||
|
|
||||||
|
for(var i=0; i<params.length; i++){
|
||||||
|
for(var j=0; j<params[i].nb; j++){
|
||||||
|
this.stars[t]={x:Math.random()*this.dst.canvas.width, y:Math.random()*this.dst.canvas.height, speedx:params[i].speedx, speedy:params[i].speedy, params:params[i].params};
|
||||||
|
t++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.draw=function(){
|
||||||
|
for(var i=0; i<this.stars.length; i++){
|
||||||
|
this.dst.contex.drawImage(this.img[this.stars[i].params].img,this.stars[i].x,this.stars[i].y);
|
||||||
|
this.stars[i].x+=this.stars[i].speedx;
|
||||||
|
this.stars[i].y+=this.stars[i].speedy;
|
||||||
|
if(this.stars[i].x>this.dst.canvas.width) this.stars[i].x=0-this.img[this.stars[i].params].img.width;
|
||||||
|
if(this.stars[i].x<0-this.img[this.stars[i].params].img.width) this.stars[i].x=this.dst.canvas.width;
|
||||||
|
if(this.stars[i].y>this.dst.canvas.height) this.stars[i].y=0-this.img[this.stars[i].params].img.height;
|
||||||
|
if(this.stars[i].y<0-this.img[this.stars[i].params].img.height) this.stars[i].y=this.dst.canvas.height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
27
player.js
27
player.js
@@ -10,6 +10,11 @@
|
|||||||
// const uploadInfoEl = document.getElementById("upload-info");
|
// const uploadInfoEl = document.getElementById("upload-info");
|
||||||
const fileUploadEl = document.getElementById("file-upload");
|
const fileUploadEl = document.getElementById("file-upload");
|
||||||
let volume = 1;
|
let volume = 1;
|
||||||
|
let effectCanvas;
|
||||||
|
let starField;
|
||||||
|
let line3D;
|
||||||
|
const synthwaveColor = 0xff2975;
|
||||||
|
|
||||||
openDialog();
|
openDialog();
|
||||||
getMusic();
|
getMusic();
|
||||||
listenUploadFileChange();
|
listenUploadFileChange();
|
||||||
@@ -49,6 +54,7 @@
|
|||||||
document.getElementById("initButton")?.addEventListener("click", () => {
|
document.getElementById("initButton")?.addEventListener("click", () => {
|
||||||
modalEl.classList.remove("open");
|
modalEl.classList.remove("open");
|
||||||
playMusic();
|
playMusic();
|
||||||
|
initCodef();
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("history").addEventListener("click", () => {
|
document.getElementById("history").addEventListener("click", () => {
|
||||||
@@ -223,4 +229,25 @@ https://retrowave.ru/${musicData.streamUrl}
|
|||||||
|
|
||||||
document.body.removeChild(element);
|
document.body.removeChild(element);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function initCodef() {
|
||||||
|
const width = window.innerWidth;
|
||||||
|
const height = window.innerHeight;
|
||||||
|
effectCanvas = new canvas(width, height, 'codef-canvas');
|
||||||
|
starField = new starfield3D(effectCanvas, 500, 2, width, height, width/2, height/2, '#ffffff', 100, 0, 0);
|
||||||
|
line3D = new codef3D(effectCanvas, 320, 75, 1, 1500 );
|
||||||
|
line3D.line({x:-320, y:0, z:0},{x:320, y:0, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
|
||||||
|
line3D.line({x: 0, y:-240, z:0},{x:0, y:240, z:0}, new LineBasicMaterial({ color: synthwaveColor, linewidth:2}));
|
||||||
|
renderCodeFx();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCodeFx() {
|
||||||
|
effectCanvas.fill('#000000');
|
||||||
|
line3D.group.rotation.x+=0.01;
|
||||||
|
line3D.group.rotation.y+=0.02;
|
||||||
|
line3D.group.rotation.z+=0.04;
|
||||||
|
starField.draw();
|
||||||
|
line3D.draw();
|
||||||
|
requestAnimationFrame(renderCodeFx);
|
||||||
|
}
|
||||||
})();
|
})();
|
||||||
|
|||||||
Reference in New Issue
Block a user