56
edits
Line 537: | Line 537: | ||
=== main.js === | === main.js === | ||
<source lang="java"> | <source lang="java"> | ||
//Globale Variablen | |||
var greens = new Array('#1fad0c','#199508','#1b710f','#4d7e0c','#6cba07'); | |||
var reds = new Array('#66200a','#96391d','#d34317','#ec6338','#fb997b'); | |||
var blues = new Array('#064077','#2565a0','#5c97cf','#63acef','#a8d3fc'); | |||
var yellows = new Array('#d8d62c','#edeb4c','#f7f56f','#dcdb82','#f6f5b3'); | |||
var multis = new Array ('#1b710f','#4d7e0c','#d34317','#ec6338','#63acef','#a8d3fc','#dcdb82','#f6f5b3'); | |||
var greys = new Array('#272727', '#4a4a4a', '#717171', '#a0a0a0', '#c8c8c8'); | |||
var fill_color_circle = greens; | |||
var gLetter = 'A'; | |||
var gText = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; | |||
var gLetterIndex = 0; | |||
var gAnimation = true; | |||
var Heigh_or_Width = Math.min(window.innerHeight, window.innerWidth); | |||
var gLetterHigh = Heigh_or_Width*0.4; | |||
var loadfont = 'Arial'; | |||
var font = gLetterHigh + 'px ' + loadfont; | |||
var canvas = document.getElementById('canvas'); | |||
canvas.width = window.innerWidth; | |||
canvas.height = window.innerHeight - document.getElementById('Title').offsetHeight; | |||
var ctx = canvas.getContext('2d'); | |||
var Grid_Scale = 250; | |||
var Grid_Cell_Size = Math.ceil(Heigh_or_Width / Grid_Scale); | |||
var Clips = []; | |||
var activeCells = []; | |||
var intv = 6; | |||
var minc = 1; | |||
var maxc = 5; | |||
var res; | |||
var faktor = 1; | |||
//Color Buttons | |||
document.getElementById('green-button').onclick=function(){ | |||
fill_color_circle = greens; | |||
return fill_color_circle; | |||
}; | |||
document.getElementById('red-button').onclick=function(){ | |||
fill_color_circle = reds; | |||
return fill_color_circle; | |||
}; | |||
document.getElementById('blue-button').onclick=function(){ | |||
fill_color_circle = blues; | |||
return fill_color_circle; | |||
}; | |||
document.getElementById('yellow-button').onclick=function(){ | |||
fill_color_circle = yellows; | |||
return fill_color_circle; | |||
}; | |||
document.getElementById('multi-button').onclick=function(){ | |||
fill_color_circle = multis; | |||
return fill_color_circle; | |||
}; | |||
document.getElementById('grey-button').onclick=function(){ | |||
fill_color_circle = greys; | |||
return fill_color_circle; | |||
}; | |||
//Font Buttons | |||
document.getElementById('sans').onclick=function(){ | |||
loadfont = 'Arial'; | |||
font = gLetterHigh + 'px ' + loadfont; | |||
return font; | |||
}; | |||
document.getElementById('serif').onclick=function(){ | |||
loadfont = 'Gabriela'; | |||
font = gLetterHigh + 'px ' + loadfont; | |||
return font; | |||
}; | |||
document.getElementById('hand').onclick=function(){ | |||
loadfont = 'Stalemate'; | |||
font = gLetterHigh + 'px ' + loadfont; | |||
return font; | |||
}; | |||
//Size Buttons | |||
document.getElementById('thin').onclick=function(){ | |||
minc = 1; | |||
maxc = 5; | |||
return minc; | |||
return maxc; | |||
}; | |||
document.getElementById('medium').onclick=function(){ | |||
minc = 1; | |||
maxc = 5; | |||
minc = minc*3; | |||
maxc = maxc*3; | |||
return minc; | |||
return maxc; | |||
}; | |||
document.getElementById('big').onclick=function(){ | |||
minc = 1; | |||
maxc = 5; | |||
minc = minc*6; | |||
maxc = maxc*6; | |||
return minc; | |||
return maxc; | |||
}; | |||
//Faktor Buttons | |||
document.getElementById('x1').onclick=function(){ | |||
faktor = 1; | |||
return faktor; | |||
}; | |||
document.getElementById('x2').onclick=function(){ | |||
faktor = 3; | |||
return faktor; | |||
}; | |||
document.getElementById('x3').onclick=function(){ | |||
faktor = 8; | |||
return faktor; | |||
}; | |||
document.getElementById('x4').onclick=function(){ | |||
faktor = 20; | |||
return faktor; | |||
}; | |||
//Funktion: Stop Funktion die Animation anhält | |||
function myStopFunction(b) { | |||
clearInterval(b); | |||
} | |||
//Funktion: Random Choice | |||
function choice(random_choice) { | |||
return random_choice[Math.round(Math.random())]; //0 oder 1 | |||
} | |||
//Funktion: Clean Canvas | |||
function cleanup() { | |||
ctx.clearRect(0, 0, canvas.width, canvas.height); | |||
console.log ('Clean'); | |||
} | |||
//Funktion: Fonteinstellungen | |||
function start() { | |||
ctx.fillStyle = 'white'; | |||
ctx.font = font; | |||
ctx.textAlign = 'center'; | |||
ctx.fontWeight='bold'; | |||
ctx.fillText(gLetter, canvas.width/2, gLetterHigh); | |||
} | |||
//Funktion: Grid erkennen / Array erstellen / x Werte an y Position speichern oder false wnn nicht auf buchstabe | |||
function clip_grid() | |||
{ | |||
for (var y = 0; y < Grid_Scale; y += 1) | |||
{ | |||
var clipColumn = []; | |||
clipColumn.length = Grid_Cell_Size; | |||
for (var x = 0; x < Grid_Scale; x += 1) | |||
{ | |||
var data = ctx.getImageData(x * Grid_Cell_Size, y * Grid_Cell_Size,Grid_Cell_Size,Grid_Cell_Size); | |||
var v = data.data[(Grid_Cell_Size + Grid_Cell_Size)]; | |||
if (v > 0) | |||
{ | |||
activeCells.push(data); | |||
clipColumn[x] = activeCells.length - 1; | |||
} | |||
else | |||
{ | |||
clipColumn[x] = false; | |||
} | |||
} | |||
Clips[y] = clipColumn; | |||
//console.log (clipColumn); | |||
} | |||
console.log ('Grid'); | |||
} | |||
//Funktion: Kreis zeichnen | |||
function circle(centerX,centerY,radius) | |||
{ | |||
ctx.beginPath(); | |||
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); | |||
ctx.fillStyle = fill_color_circle[getRandomInt(0,fill_color_circle.length)]; // Füllen mit zufälliger Farbe aus Liste | |||
ctx.fill(); | |||
ctx.lineWidth = 2; | |||
ctx.strokeStyle = fill_color_circle[getRandomInt(0,fill_color_circle.length)]; // Füllen mit zufälliger Farbe aus Liste | |||
ctx.stroke(); | |||
} | |||
//Funktion: Randomvariable Kreise | |||
function getRandomInt(min, max) { | |||
return Math.floor(Math.random() * (max - min + 1)) + min; | |||
} | |||
//Funktion: Grid in finale Liste speichern | |||
function prepare() | |||
{ | |||
var tx = 0; | |||
var ty = 0; | |||
var a = []; | |||
if (canvas.width > canvas.height) | |||
{ | |||
tx = (canvas.width - Heigh_or_Width) / 2; | |||
} | |||
else | |||
{ | |||
ty = (canvas.height - Heigh_or_Width) / 2; | |||
} | |||
var count=0; | |||
for (var y = 0; y < Grid_Scale; y += 1) | |||
{ | |||
for (var x = 0; x < Grid_Scale; x += 1) | |||
{ | |||
var cellData = Clips[y][x]; | |||
if (cellData !== false) | |||
{ | |||
a[count]= []; | |||
var imgData = choice(activeCells); | |||
a[count]['0']=true; | |||
a[count]['1']=x*Grid_Cell_Size; | |||
a[count]['2']=y*Grid_Cell_Size; | |||
count++; | |||
} | |||
} | |||
} | |||
res = a; | |||
//console.log (res); | |||
console.log ('Prepare'); | |||
} | |||
//Funktion:Circle zeichnen auf Punkte im Buchstaben Grid | |||
function draw(a) | |||
{ | |||
var n=-1; | |||
if (n<0) | |||
{ | |||
n=getRandomInt(0,a.length); | |||
while(a[n]['0']===false) | |||
{ | |||
n=getRandomInt(0,a.length); | |||
} | |||
} | |||
var rad=getRandomInt(minc,maxc); | |||
circle(a[n]['1'],a[n]['2'],rad); | |||
console.log ('Draw'); | |||
} | |||
//Funktion: Event Listener auf Keyboardeingabe - beendet Alphabet | |||
window.addEventListener('keypress', function (getLetter) { | |||
gAnimation = false; | |||
var newLetter = String.fromCharCode(getLetter.keyCode); | |||
gLetter = newLetter; | |||
render(); | |||
}); | |||
//Funktion: Alphabet | |||
function nextLetter(bl) { | |||
if (gAnimation) { | |||
myStopFunction(bl); | |||
gLetterIndex = (gLetterIndex + 1) % gText.length; | |||
gLetter = gText[gLetterIndex]; | |||
render(); | |||
} | |||
console.log ('Next Letter'); | |||
} | |||
//Funktion: Alles aufrufen | |||
function render() { | |||
cleanup(); | |||
start(); | |||
clip_grid(); | |||
cleanup(); | |||
prepare(); | |||
var drw=window.setInterval(function(){draw(res);},intv/(2*faktor)); | |||
var stp=window.setTimeout(function(){nextLetter(drw);},intv*res.length/(faktor/2)); | |||
console.log ('Render'); | |||
} | |||
//Funktionsaufruf | |||
console.log ('Start Project'); | |||
render(); | |||
</source> | </source> |
edits