345 lines
9.0 KiB
JavaScript
Executable File
345 lines
9.0 KiB
JavaScript
Executable File
/* global noise */
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
TODO
|
|
set opacity in RGB instead of SubTile
|
|
|
|
*/
|
|
|
|
var canvas;
|
|
var ctx;
|
|
var stop = false;
|
|
var PartType = {
|
|
UP: 0,
|
|
RIGHT: 1,
|
|
DOWN: 2,
|
|
LEFT: 3,
|
|
EMPTY: 4,
|
|
FULL: 5
|
|
};
|
|
var a = 0;
|
|
var tiles = [];
|
|
var animspeed = 100;
|
|
var animstep = 0;
|
|
var step = 0;
|
|
var steps = [];
|
|
$(function() {
|
|
|
|
|
|
|
|
a = Math.sqrt(Math.pow(document.body.clientWidth /19, 2)/3);
|
|
canvas=document.getElementById("bg");
|
|
ctx = canvas.getContext("2d");
|
|
canvas.width = document.body.clientWidth;
|
|
canvas.height = document.body.clientHeight - Math.floor(document.body.clientHeight%a) ;
|
|
ctx.width = document.body.clientWidth ; // - document.body.clientWidth%19;
|
|
ctx.height = document.body.clientHeight - (document.body.clientHeight%a) ;
|
|
|
|
//ctx.fillStyle = "rgba(21, 21, 21, 100)";
|
|
ctx.fillStyle = '#00f';
|
|
ctx.fill();
|
|
//drawHexRect(ctx, 100, 10, 10);
|
|
//var t = new Tile(100, 50, 50, ctx);
|
|
//t.full();
|
|
//t.draw();
|
|
|
|
|
|
|
|
|
|
$('#bg').css('top', ((document.body.clientHeight%a)/2)); // - document.body.clientHeight%a;
|
|
console.log(ctx.height + " " + a);
|
|
console.log(Math.floor(canvas.height/a));
|
|
for(var x = 0; x<19; x++){
|
|
tiles[x] = [];
|
|
for(var y = 0; y<Math.floor(canvas.height/a); y++){
|
|
tiles[x][y] = new Tile((ctx.width/19)*x, a*y, (ctx.width/19));
|
|
//tiles[k][i].draw();
|
|
}
|
|
}
|
|
|
|
|
|
console.log(ctx.height + " " + ctx.width + " " + canvas.height + " " + canvas.width + " " + window.innerWidth);
|
|
main();
|
|
});
|
|
|
|
var noiseStep = 10;
|
|
var noiseStepIndex = 0;
|
|
|
|
function hsvToRgb(h, s, v) {
|
|
var r, g, b;
|
|
|
|
var i = Math.floor(h * 6);
|
|
var f = h * 6 - i;
|
|
var p = v * (1 - s);
|
|
var q = v * (1 - f * s);
|
|
var t = v * (1 - (1 - f) * s);
|
|
|
|
switch (i % 6) {
|
|
case 0: r = v, g = t, b = p; break;
|
|
case 1: r = q, g = v, b = p; break;
|
|
case 2: r = p, g = v, b = t; break;
|
|
case 3: r = p, g = q, b = v; break;
|
|
case 4: r = t, g = p, b = v; break;
|
|
case 5: r = v, g = p, b = q; break;
|
|
}
|
|
|
|
return new RGB(r * 255, g * 255, b * 255 );
|
|
}
|
|
|
|
var perlinTime = 0;
|
|
|
|
var perlinResolution = 0.1 ;
|
|
|
|
noise.seed(Math.random());
|
|
|
|
function updateNoise(){
|
|
|
|
|
|
var noiseWidth = (tiles.length*2);
|
|
var noiseHeight = (tiles[0].length*2);
|
|
|
|
var noiseMap = new Array(noiseWidth);
|
|
|
|
for(var x=0;x<(noiseWidth);x++) {
|
|
noiseMap[x] = new Array(noiseHeight);
|
|
for(var y=0;y<(noiseHeight);y++) {
|
|
var color = 0.4 + (Math.abs(((noise.perlin3(x/noiseWidth/perlinResolution , y/noiseHeight/perlinResolution , perlinTime/2 ) ) ) )) * 0.5 ;
|
|
noiseMap[x][y] = hsvToRgb( color , 0.8 , 0.8 );
|
|
}
|
|
}
|
|
|
|
for(var x=0;x<tiles.length;x++){
|
|
for(var y=0;y<tiles[0].length;y++){
|
|
tiles[x][y].up.color = noiseMap[2*x][2*y].mix(noiseMap[(2*x)+1][2*y]);
|
|
|
|
tiles[x][y].left.color = noiseMap[2*x][2*y].mix(noiseMap[(2*x)][(2*y)+1]);
|
|
|
|
tiles[x][y].right.color = noiseMap[(2*x)+1][2*y].mix(noiseMap[(2*x)+1][(2*y)+1]);
|
|
|
|
tiles[x][y].down.color = noiseMap[2*x][(2*y)+1].mix(noiseMap[(2*x)+1][(2*y)+1]);
|
|
}
|
|
}
|
|
|
|
perlinTime += 0.01;
|
|
}
|
|
|
|
function main(){
|
|
|
|
updateNoise();
|
|
|
|
//if(animstep == animspeed){
|
|
// if(step<steps.length){
|
|
// steps[step]();
|
|
// step++;
|
|
// }else{
|
|
// step = 0;
|
|
// steps[step]();
|
|
// }
|
|
// animstep = 0;
|
|
//}else{
|
|
// animstep++;
|
|
//}
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
for(var k = 0; k<Math.floor(canvas.height/a); k++){
|
|
for(var i = 0; i<19; i++){
|
|
//tiles[k][i] = new Tile((ctx.width/19), (ctx.width/19)*i, a*k, ctx);
|
|
tiles[i][k].draw();
|
|
}
|
|
}
|
|
if(stop==true){
|
|
console.log("ended");
|
|
}else{
|
|
requestAnimFrame(main);
|
|
}
|
|
|
|
}
|
|
|
|
var Vector2 = function(x, y){
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
|
|
var RGB = function(r, g, b){
|
|
var self = this;
|
|
this.r = r;
|
|
this.g = g;
|
|
this.b = b;
|
|
|
|
this.mix = function(other){
|
|
return new RGB((this.r+other.r)/2, (this.g+other.g)/2, (this.b+other.b)/2);
|
|
}
|
|
|
|
}
|
|
|
|
var TileChange = function(x, y, tileType, newColor){
|
|
var self = this;
|
|
this.x = x;
|
|
this.y = y;
|
|
this.tileType = tileType;
|
|
this.newColor = newColor;
|
|
}
|
|
|
|
var AnimationStep = function(animation, length){
|
|
var self = this;
|
|
this.animation = animation;
|
|
this.length = length || animation.interval;
|
|
this.tileChanges = new Array();
|
|
|
|
this.play = function() {
|
|
this.newTiles.forEach(function(tileChange){
|
|
tiles[tileChange.x][tileChange].subTiles[tileChange.tileType].color = tileChange.color;
|
|
});
|
|
}
|
|
|
|
this.addTileChange = function(tileChange){
|
|
this.tileChanges.push(tileChange);
|
|
}
|
|
|
|
}
|
|
|
|
var Animation = function(repeat, interval){
|
|
var self = this;
|
|
this.steps = new Array();
|
|
this.interval = interval || 100;
|
|
this.repeat = repeat || false;
|
|
|
|
this.addStep = function(animationStep){
|
|
this.steps.push(animationStep);
|
|
}
|
|
|
|
this.play = function(){
|
|
var stepIndex = 0;
|
|
setInterval(function(){
|
|
if(this.stepIndex < this.steps.length){
|
|
this.step[++stepIndex].play();
|
|
}
|
|
else {
|
|
if(this.repeat){
|
|
self.play();
|
|
}
|
|
}
|
|
}, this.interval);
|
|
}
|
|
}
|
|
|
|
var SubTile = function(tile, type, color, opacity){
|
|
var self = this;
|
|
this.color = color || new RGB(0, 0, 0);
|
|
this.opacity = opacity || 1;
|
|
this.tile = parent;
|
|
|
|
this.getVertices = null;
|
|
}
|
|
|
|
var SubTileUp = function(tile, color, opacity) {
|
|
SubTile.call(this, tile, PartType.UP, color, opacity);
|
|
|
|
this.getVertices = function(startX, startY, width){
|
|
var r = new Array(3);
|
|
|
|
r[0] = new Vector2(startX, startY);
|
|
r[1] = new Vector2(startX+width, startY);
|
|
r[2] = new Vector2(startX+(width/2), startY+(this.tile.a/2));
|
|
|
|
return r;
|
|
}
|
|
}
|
|
|
|
var SubTileDown = function(tile, color, opacity) {
|
|
SubTile.call(this, tile, PartType.DOWN, color, opacity);
|
|
|
|
this.getVertices = function(startX, startY, width){
|
|
var r = new Array(3);
|
|
|
|
r[0] = new Vector2(startX+width, startY+this.tile.a);
|
|
r[1] = new Vector2(startX, startY+this.tile.a);
|
|
r[2] = new Vector2(startX+(width/2), startY+(this.tile.a/2));
|
|
|
|
return r;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
var SubTileRight = function(tile, color, opacity) {
|
|
SubTile.call(this, tile, PartType.RIGHT, color, opacity);
|
|
|
|
this.getVertices = function(startX, startY, width){
|
|
var r = new Array(3);
|
|
|
|
r[0] = new Vector2(startX+width, startY);
|
|
r[1] = new Vector2(startX+width, startY+this.tile.a);
|
|
r[2] = new Vector2(startX+(width/2), startY+(this.tile.a/2));
|
|
|
|
return r;
|
|
}
|
|
}
|
|
|
|
var SubTileLeft = function(type, color, opacity) {
|
|
SubTile.call(this, type, PartType.LEFT, color, opacity);
|
|
|
|
this.getVertices = function(startX, startY, width){
|
|
var r = new Array(3);
|
|
|
|
r[0] = new Vector2(startX, startY+this.tile.a);
|
|
r[1] = new Vector2(startX, startY);
|
|
r[2] = new Vector2(startX+(width/2), startY+(this.tile.a/2));
|
|
|
|
return r;
|
|
}
|
|
}
|
|
|
|
var Tile = function(startX, startY, width){
|
|
this.up = new SubTileUp(this);
|
|
this.down = new SubTileDown(this);
|
|
this.left = new SubTileLeft(this);
|
|
this.right = new SubTileRight(this);
|
|
|
|
this.subTiles = [this.up, this.right, this.down, this.left];
|
|
|
|
this.width = width;
|
|
this.startX = startX;
|
|
this.startY = startY;
|
|
|
|
this.a = Math.sqrt(Math.pow(width, 2)/3);
|
|
|
|
this.draw = function(){
|
|
for(var n=0;n<4;n++){
|
|
var currentSubTile = this.subTiles[n];
|
|
var vertices = currentSubTile.getVertices(this.startX, this.startY, this.width);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(vertices[0].x, vertices[0].y );
|
|
ctx.lineTo(vertices[1].x, vertices[1].y );
|
|
ctx.lineTo(vertices[2].x, vertices[2].y );
|
|
ctx.lineTo(vertices[0].x, vertices[0].y );
|
|
ctx.closePath();
|
|
|
|
ctx.fillStyle = "rgba( "+Math.floor(currentSubTile.color.r)+", "+Math.floor(currentSubTile.color.g)+", "+Math.floor(currentSubTile.color.b)+", "+ currentSubTile.opacity+")";
|
|
ctx.fill();
|
|
|
|
ctx.strokeStyle = "#ffffff";
|
|
ctx.lineWidth = 0.5;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
var requestAnimFrame = (function(){
|
|
return window.requestAnimationFrame ||
|
|
window.webkitRequestAnimationFrame ||
|
|
window.mozRequestAnimationFrame ||
|
|
window.oRequestAnimationFrame ||
|
|
window.msRequestAnimationFrame ||
|
|
function(callback){
|
|
window.setTimeout(callback, 1000 / 60);
|
|
};
|
|
})();
|
|
|