Audiovisualizer med story. Egenprogrammert bevegelse av kamera, enten "flytrough" eller azimuth (rotasjon om punkt hhv origo)
Ingen av kodene mine får plass i 15.000,- char limiten.
Kode
0, 0, 0);
// Enable the assignment of the buffer object to the attribute variable
gl.enableVertexAttribArray(a_attribute);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return true;
}
var newArray = [];
// Note: These variables need to be global, since then need to
// maintain their value between invocations of the event handlers:
var g_dragging = false;
var g_lastX = -1, g_lastY = -1; // Last position of the mouse
// Note: These variables are made global in urder to print them on
// screen in the draw() function:
var transformedEyeDirection = new Vector4();
function initEventHandlers(document, canvas) {
if (camMode == FlyThroughCam) {
document.onkeydown = function (ev) {
startTime = Date.now();
var dx = 0.0, dy = 0.0, dz = 0.0, odx = 0.0, ody = 0.0, odz = 0.0;
if (ev.keyCode == 33) { // The PgUp key was pressed
dx = 0.0; dy = 0.1; dz = 0.0;
if (camMode == AzimuthCam) {
g_camera.elevation = Math.max(Math.min(g_camera.elevation + dy, 90.0), -90.0);
startTime = Date.now();
g_camera.azimuth = (g_camera.azimuth + dx + 360.0) % 360.0;
}
else if (camMode == AzimuthScreensaver) {
// g_camera.elevation = 45;
// g_camera.azimuth = (g_camera.azimuth + dx + 360.0) % 360.0;
}
else if (camMode == FlyThroughCam) {
// Limit x-axis rotation angle to -90 to 90 degrees
g_eye.pitch = Math.max(Math.min(g_eye.pitch - dy, 90.0), -90.0);
// Limit y-axis rotation angle to 0 to 360 degrees
startTime = Date.now();
g_eye.heading = (g_eye.heading - dx + 360.0) % 360.0;
}
}
setViewProjectionMatrix(g_projMatrix, g_eye);
g_lastX = x, g_lastY = y;
};
canvas.onmousewheel = function (ev) {
if (camMode == AzimuthCam) {
var dm = ev.deltaY * 0.01;
g_camera.distance = Math.max(2.0, g_camera.distance + dm);
setViewProjectionMatrix(g_projMatrix, g_eye);
}
};
}
var powArray = [];
var thisPowArray = [];
var historyArr = [];
var historyArr2 = [];
var reducedArray = [];
var vpM = new Matrix4();
function setViewProjectionMatrix(projMatrix, eye){
if (camMode == AzimuthCam) {
// g_mvpMatrix.set(projMatrix);
g_viewMatrix.setTranslate(0.0, 0.0, -g_camera.distance);
g_viewMatrix.rotate(g_camera.elevation, 1.0, 0.0, 0.0);
g_viewMatrix.rotate(g_camera.azimuth, 0.0, 1.0, 0.0);
// g_mvpMatrix.multiply(g_viewMatrix);
vpM = new Matrix4();
vpM.set(g_projMatrix).multiply(g_viewMatrix);
}
else if (camMode == AzimuthScreensaver) {
g_camera.azimuth = screensaverRotation % 360.0;
g_viewMatrix.setTranslate(0.0, 0.0, -g_camera.distance);
g_viewMatrix.rotate(g_camera.elevation, 1.0, 0.0, 0.0);
g_viewMatrix.rotate(g_camera.azimuth, 0.0, 1.0, 0.0);
vpM = new Matrix4();
vpM.set(g_projMatrix).multiply(g_viewMatrix);
}
else if (camMode == FlyThroughCam) {
g_viewMatrix.setRotate(-eye.pitch, 1.0, 0.0, 0.0);
g_viewMatrix.rotate(-eye.heading, 0.0, 1.0, 0.0);
g_viewMatrix.translate(-eye.x, -eye.y, -eye.z);
vpM = new Matrix4();
vpM.set(g_projMatrix).multiply(g_viewMatrix);
}
}
function powerDraw(gl, n, gu_MvpMatrix, g_outputParagraph, array){
g_outputParagraph.innerHTML = getPowPara();
var start = Date.now();
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
var startComp = Date.now();
var xStart = -barCrossection * Math.pow(2,(powTwo -1));
var xMove = Math.pow(2,(7-powTwo));
for(var i = 0; i < historyLength; i++){
var thisPos = powArray.length - i;
var thisArray = historyArr[thisPos];
for(var i = 0; i < thisArray.length; i++){ //Math.pow(2,powTwo); i++){
var pVolume = thisArray[i];
var xPos = xStart + i * barCrossection;
pushMatrix(g_modelMatrix);
g_modelMatrix.setTranslate(xPos,pVolume/2,thisPos);
drawBox(gl, n, barCrossection, pVolume, barCrossection, vpM, gu_MvpMatrix);
g_modelMatrix = popMatrix();
}
}
var endComp = Date.now();
var compInterval = Date.now() - lastCompUpdate;
if(compInterval > 2){
lastCompUpdate = Date.now();
computationTracker = Date.now() - startComp;
}
// for(var i = 0; i < (numOfBars-1); i++){
// placementBarX = xArr[i];
// placementBarY = yArr[i];
// thisArrayZ = zArr[i];
/// xArr.push(placementBarX);
// yArr.push(placementBarY);
// zArr.push(thisArrayZ
// Draw X-axis
pushMatrix(g_modelMatrix);
g_modelMatrix.setTranslate(5.0, 0.0, 0.0);
g_modelMatrix.translate(-5.0, 0.0, -5.0);
drawBox(gl, n, 10.0, 0.1, 0.1, vpM, gu_MvpMatrix);
g_modelMatrix = popMatrix();
// Draw Y-axis
pushMatrix(g_modelMatrix);
g_modelMatrix.setTranslate(0.0, 5.0, 0.0);
g_modelMatrix.translate(-5.0, 0.0, -5.0);
drawBox(gl, n, 0.1, 10.0, 0.1, vpM, gu_MvpMatrix);
g_modelMatrix = popMatrix();
// Draw Z-axis
pushMatrix(g_modelMatrix);
g_modelMatrix.setTranslate(0.0, 0.0, 5.0);
g_modelMatrix.translate(-5.0, 0.0, -5.0);
drawBox(gl, n, 0.1, 0.1, 10.0, vpM, gu_MvpMatrix);
g_modelMatrix = popMatrix();
var endFrame = Date.now();
var frameInterval = Date.now() - lastFrameTimeUpdate;
if(frameInterval > 2){
lastFrameTimeUpdate = Date.now();
frameTracker = Date.now() - frameStart;
}
}
function soloDraw(gl, n, gu_MvpMatrix, g_outputParagraph, array) {
takeTime();
// g_mvpMatrix.set(projMatrix);
// g_mvpMatrix.multiply(g_viewMatrix);
//g_outputParagraph.innerHTML = "Screensaver enabled";
g_outputParagraph.innerHTML = getOutPara(array);
var start = Date.now();
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
var startComp = Date.now();
var breadthBars = totalBreadth/numOfBars;
secondsShown = historyFrequency * historyLength;
var stepsToShow = Math.min(historyArr.length, historySteps);
var stepsZdir = historyLength/(stepsToShow+1);
stepPrII = Math.round(array.length/numOfBars);
var totalNrArrays = historyArr.length;
var firstStepNr = totalNrArrays - stepsToShow;
if (firstStepNr< 0){firstStepNr = 0;}
var firstStepLength = -stepsToShow+1;
for(var i = 0; i < stepsToShow; i++){
var thisArrayNr = firstStepNr + i;
var thisArrayZ = firstStepLength + stepsZdir * i;
var thisArray = historyArr[thisArrayNr];
for(var ii = 0; ii < numOfBars; ii++){
var k = stepPrII*ii;
if(thisArray[k] > 0.2){
var volume = (thisArray[k])/(heightFactor);
var placementBarX = -totalBreadth/2 + ii*breadthBars;
var placementBarY = volume/2;
pushMatrix(g_modelMatrix);
g_modelMatrix.setTranslate(placementBarX, volume/2, thisArrayZ);
drawBox(gl, n, breadthBars, volume, stepsZdir, vpM, gu_MvpMatrix);
g_modelMatrix = popMatrix();
}
}
}
var endComp = Date.now();
var compInterval = Date.now() - lastCompUpdate;
if(compInterval > 2){
lastCompUpdate = Date.now();
computationTracker = Date.now() - startComp;
}
// for(var i = 0; i < (numOfBars-1); i++){
// placementBarX = xArr[i];
// placementBarY = yArr[i];
// thisArrayZ = zArr[i];
/// xArr.push(placementBarX);
// yArr.push(placementBarY);
// zArr.push(thisArrayZ
// Draw X-axis
pushMatrix(g_modelMatrix);
g_modelMatrix.setTranslate(5.0, 0.0, 0.0);
g_modelMatrix.translate(-5.0, 0.0, -5.0);
drawBox(gl, n, 10.0, 0.1, 0.1, vpM, gu_MvpMatrix);
g_modelMatrix = popMatrix();
// Draw Y-axis
pushMatrix(g_modelMatrix);
g_modelMatrix.setTranslate(0.0, 5.0, 0.0);
g_modelMatrix.translate(-5.0, 0.0, -5.0);
drawBox(gl, n, 0.1, 10.0, 0.1, vpM, gu_MvpMatrix);
g_modelMatrix = popMatrix();
// Draw Z-axis
pushMatrix(g_modelMatrix);
g_modelMatrix.setTranslate(0.0, 0.0, 5.0);
g_modelMatrix.translate(-5.0, 0.0, -5.0);
drawBox(gl, n, 0.1, 0.1, 10.0, vpM, gu_MvpMatrix);
g_modelMatrix = popMatrix();
var endFrame = Date.now();
var frameInterval = Date.now() - lastFrameTimeUpdate;
if(frameInterval > 2){
lastFrameTimeUpdate = Date.now();
frameTracker = Date.now() - frameStart;
}
}
var g_matrixStack = []; // Array for storing a matrix
function pushMatrix(m) { // Store the specified matrix to the array
var m2 = new Matrix4(m);
g_matrixStack.push(m2);
}
function popMatrix() { // Retrieve the matrix from the array
return g_matrixStack.pop();
}
// Draw rectangular solid
function drawBox(gl, n, width, height, depth, viewProjMatrix, gu_MvpMatrix) {
pushMatrix(g_modelMatrix);
g_modelMatrix.scale(width, height, depth);
var g_mvpMatrix = new Matrix4();
g_mvpMatrix.set(viewProjMatrix);
g_mvpMatrix.multiply(g_modelMatrix);
gl.uniformMatrix4fv(gu_MvpMatrix, false, g_mvpMatrix.elements);
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
g_modelMatrix = popMatrix();
}
var screensaverRotation = 0;
var sinceLastInput = 0;
var g_last = Date.now();
function takeTime() {
var now = Date.now();
var elapsed = now - g_last;
g_last = now;
sinceLastInput = (Date.now() - startTime)/1000;
screensaverRotation = sinceLastInput * 20;
if (sinceLastInput > timeToSaver) {
// var lastMode = camMode;
Screensaver();
}
}
var g_last = Date.now();
function animate(angle) {
// Calculate the elapsed time
var now = Date.now();
var elapsed = now - g_last;
g_last = now;
// Update the current rotation angle (adjusted by the elapsed time)
var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
newAngle %= 360;
currentRot += (rot_Step * elapsed) / 1000.0;
}
function setupAudioNodes() {
g_scriptNode = g_audioCtx.createScriptProcessor(0, 1, 1);
g_scriptNode.connect(g_audioCtx.destination);
g_analyser = g_audioCtx.createAnalyser();
g_analyser.smoothingTimeConstant = 0.3;
g_analyser.fftSize = 256;
g_source = g_audioCtx.createBufferSource();
g_source.connect(g_analyser);
g_analyser.connect(g_scriptNode);
g_source.connect(g_audioCtx.destination);
}
function loadSound(url) {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = function () {
g_audioCtx.decodeAudioData(request.response, function (buffer) {
g_audioBuffer = buffer;
playSound();
}, onError);
}
request.send();
}
function playSound() {
g_source.buffer = g_audioBuffer;
g_source.start();
}
function restartSound() {
if (g_source != 0) {
g_source.stop();
}
setupAudioNodes();
playSound();
}
function stopSound() {
g_source.stop();
}
function onError(e) {
console.log(e);
}
function timeToSaver() {
dMElement.innerHTML = 'timeToSaver ( = ' + timeToSaver + ')';
}
function getOutPara(array) {
var betweUpdates = (1/historyFrequency)*60*1000;
var para = " t since last input: " + Math.round(sinceLastInput) + "<p>" + "With current input, there are: " + stepsShown + " steps shown, each represented by " + numOfBars + " bars. "
+ "<p>" + " Time to complete all computations: " + frameTracker + "<p>" +
" Time to complete computation of bars loop: " + computationTracker + "<p>"+" Set delay betwenUpdates (historyFrequency): " + betweUpdates;
return para;
}
function getPowPara() {
var powPara = " t since last interval: " +interval+ + " elemcount " + elementCount +" <p>" + "With current input, there are: " + reducedArray + " histRed" + historyArr2 + " steps shown, each represented by "+" bars. "
+ "<p>" + " Time to complete all computations: " + thisPowArray + "<p>" +
" Time to complete computation of bars loop: " + historyArr.length + "<p>"+" Set delay betwenUpdates (historyFrequency): ";
return powPara;
}
function Azimuth() {
camMode = AzimuthCam;
dMElement.innerHTML = 'CamMode = AzimuthCam ( = ' + camMode + ')';
}
function FlyThrough() {
camMode = FlyThroughCam;
dMElement.innerHTML = 'CamMode = FlyThroughCam ( = ' + camMode + ')';
}
function PowerOfTwoMode(){
if(powTwoMode){
powTwoMode = false;
}
else{
powTwoMode = true;
}
}
function setPow2(){
powTwo = Number(document.getElementById("txt_powTwo").value);
if(powTwo < 8 && powTwo > 0){
powTwo = floor(powTwo);
interval = pow(2,(7-powTwo));
elementCount = pow(2,powTwo);
}
else{
powTwo = 4;
powTwo = floor (powTwo);
interval = pow(2,(7-powTwo));
elementCount = pow(2,powTwo);
}
}
function setBarCrossection(){
barCrossection = Number(document.getElementById("txt_barCrossection").value);
}
function Screensaver() {
camMode = AzimuthScreensaver;
// dMElement.innerHTML = 'CamMode = AzimuthScreensaver ( = ' + camMode + ')';
}
function Exam() {
VisualMode = ExamGraph;
dMElement.innerHTML = 'VisualMode = ExamGraph ( = ' + VisualMode + ')';
}
function tTSaver() {
timeToSaver = Number(document.getElementById("txt_timeToSaver").value);
}
function numB() {
numOfBars = Number(document.getElementById("txt_numOfBars").value);
}
function updates(){
totalBreadth = Number(document.getElementById("txt_updatesPrSecond").value);
}
function updatesHeight(){
heightFactor = Number(document.getElementById("txt_historyHeightFactor").value);
}
function updatesLength(){
historyLength = Number(document.getElementById("txt_historyElementsInStory").value);
}
function updatesSteps(){
historySteps = Number(document.getElementById("txt_historyStepsInStory").value);
}
function updateFrequency(){
historyFrequency = Number(document.getElementById("txt_historyElementsPrSecond").value);
}