I have an audio visualizer I've made and (I've increased the height cap of it so the problem is more clear) for some reason it just cuts off at a certain point and I haven't been able to figure it out. While the visualizer has this issue when oriented to the left like this, the problem does not exist when anchored normally to the bottom. Any help to figure this out would be greatly appreciated!
How it looks now \/
How I want the height to look (but sideways so its extends to the end of the canvas horizontally) \/
This is the code for it:
<head>
<meta charset="UTF-8">
<script src="properties.js"></script>
<script src="clockRefresh.js"></script>
<link href='https://fonts.googleapis.com/css?family=DM Mono' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Share Tech Mono' rel='stylesheet'>
<style>
#time-panel {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 20px;
}
#hour, #min, #sec {
font-family: 'dm mono';
font-weight: 1000;
}
#clock {
display: table;
margin: 0 auto;
}
#audioCanvas {
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
}
</style>
</head>
<body onload="clock()" >
<div id="time-panel">
<canvas id="canvas"></canvas>
<span id="clock">
<span id="hour"></span>
<span id="min"></span>
<span id="sec"></span>
</span>
</div>
<!-- Canvas where visualizer is drawn -->
<canvas id="audioCanvas"></canvas>
<!-- Script that creates said visualizer -->
<script>
// Get the audio canvas once the page has loaded
let audioCanvas = document.getElementById('audioCanvas');
// Get the 2D context of the canvas to draw on it in wallpaperAudioListener
let audioCanvasCtx = audioCanvas.getContext('2d');
// Setting internal canvas resolution to user screen resolution
// (CSS canvas size differs from internal canvas size)
audioCanvas.height = window.innerHeight;
audioCanvas.width = window.innerWidth;
function wallpaperAudioListener(audioArray) {
audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);
if (sessionStorage.getItem("audio-orientation") == "left" ||
sessionStorage.getItem("audio-orientation") == "right") {
// Render bars along the full height of the canvas
var barWidth = Math.round(1.0 / 128.0 * audioCanvas.height);
var halfCount = audioArray.length / 2;
}
else {
// Render bars along the full width of the canvas
var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
var halfCount = audioArray.length / 2;
}
// Begin with the left channel in red
audioCanvasCtx.fillStyle = 'rgb(255,0,0)';
// Iterate over the first 64 array elements (0 - 63) for the left channel audio data
for (var i = 0; i < halfCount; i += parseInt(sessionStorage.getItem("bar-amount"))) {
// Create an audio bar with its hight depending on the audio volume level of the current frequency
var height = audioCanvas.height * Math.min(audioArray[i], 1) * sessionStorage.getItem("bar-height");
audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
}
// Now draw the right channel in blue
audioCanvasCtx.fillStyle = 'rgb(0,0,255)';
// Iterate over the last 64 array elements (64 - 127) for the right channel audio data
for (var i = halfCount; i < audioArray.length; i += parseInt(sessionStorage.getItem("bar-amount"))) {
// Create an audio bar with its hight depending on the audio volume level
// Using audioArray[191 - i] here to inverse the right channel for aesthetics
var height = audioCanvas.height * Math.min(audioArray[191 - i], 1) * sessionStorage.getItem("bar-height");;
audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
}
if (sessionStorage.getItem("audio-orientation") == "left") {
//temp canvas to store rotation data
var tempCanvas = document.createElement("canvas"),
tempCtx = tempCanvas.getContext("2d");
tempCanvas.width = audioCanvas.width;
tempCanvas.height = audioCanvas.height;
tempCtx.drawImage(audioCanvas, 0, 0, audioCanvas.width, audioCanvas.height);
// Now clear the portion to rotate.
audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);
audioCanvasCtx.save();
// Translate (190/2 is half of the box we drew)
audioCanvasCtx.translate(audioCanvas.width / 2, 0);
// Rotate it
audioCanvasCtx.rotate(90 * Math.PI/180);
// Finally draw the image data from the temp canvas.
audioCanvasCtx.translate(audioCanvas.height / 45, -audioCanvas.width / 16);
audioCanvasCtx.width = audioCanvasCtx.width * 10;
audioCanvasCtx.drawImage(tempCanvas, 0, 0, audioCanvas.width, audioCanvas.height * 2, 0, 0, audioCanvas.width, audioCanvas.height * 2);
audioCanvasCtx.restore();
}
}
// Register the audio listener provided by Wallpaper Engine.
window.wallpaperRegisterAudioListener(wallpaperAudioListener);
</script>
</body>
The code is based on this which gives a bit more detail on how the code works. The bar-values are coming from another script that store settings changes.
Comments
Post a Comment