Skip to content

Instantly share code, notes, and snippets.

@st7en

st7en/Classes.js

Last active May 31, 2025 20:52
Show Gist options
  • Save st7en/c4b8e089db4bdae4ac1e744c48c72ad8 to your computer and use it in GitHub Desktop.
Save st7en/c4b8e089db4bdae4ac1e744c48c72ad8 to your computer and use it in GitHub Desktop.
Download ZIP
Files Modificados de Monstercat Visualizer
Raw
Classes.js
class Bar {
constructor(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.desiredPos = this.height;
}
draw(horizontal, vertical) {
ctx.fillRect(this.x + horizontal, this.y + vertical, this.width, this.height);
if (settings.border.enabled) {
ctx.strokeStyle = settings.border.colour;
ctx.lineWidth = settings.border.width;
ctx.strokeRect(
this.x + horizontal - settings.border.width / 2,
this.y + vertical - settings.border.width / 2,
this.width + settings.border.width,
this.height + settings.border.width
);
}
}
update() {
if (this.height < this.desiredPos) {
this.height += (this.desiredPos - this.height) / settings.bars.smoothingFactor;
} else if (this.height > this.desiredPos) {
this.height -= (this.height - this.desiredPos) / settings.bars.smoothingFactor;
}
this.y = canvas.height / 2 - this.height;
}
}
class Particle {
constructor() {
this.x = Math.random()*canvas.width;
this.y = Math.random()*canvas.height;
this.radius = Math.random()*1.5+0.1;
this.opacity = Math.random()*0.5+0.5;
this.speedX = Math.random()*5+0.5;
this.speedY = Math.random()*4-2;
this.changedSpeedX = this.speedX;
this.changedSpeedY = this.speedY;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
ctx.fillStyle="rgba(255,255,255," + this.opacity + ")";
ctx.fill();
}
update() {
this.x += (settings.particles.direction == "Left" ? -this.changedSpeedX : this.changedSpeedX);
this.y += this.changedSpeedY;
if(this.x > canvas.width+this.radius) {
this.x = -this.radius;
}
if(this.x < -this.radius) {
this.x = canvas.width+this.radius;
}
if(this.y > canvas.height+this.radius) {
this.y = -this.radius;
}
if(this.y < -this.radius) {
this.y = canvas.height+this.radius;
}
}
}
Raw
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Visualizer</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<canvas id="canvas"></canvas>
<script src="vibrant.min.js"></script>
<script src="Settings.js"></script>
<script src="Classes.js"></script>
<script src="Script.js"></script>
</body>
</html>
Raw
project.json
{
"contentrating" : "Everyone",
"description" : "Monstercat Audio Visualizer + Media Integration.\n\nOriginal wallpaper from:\nhttps://steamcommunity.com/id/Kahool/ \n\nReplaced Spotify API integration with windows media integration and added some new settings.\nText can be truncated and visualizer fades when there is no media.\nImage and BG scales properly with non-square thumbnails.\nAdded optional border with colour and size.\n\nWallpaper needs to be restarted to properly apply some settings.",
"file" : "index.html",
"general" :
{
"properties" :
{
"audioEqualize" :
{
"index" : 16,
"order" : 116,
"text" : "Equalize",
"type" : "bool",
"value" : true
},
"audioPeaks" :
{
"editable" : true,
"index" : 15,
"max" : 5,
"min" : 1,
"order" : 115,
"text" : "Peaks",
"type" : "slider",
"value" : 2
},
"audioSettings" :
{
"index" : 14,
"order" : 114,
"text" : "<br/><br/><h3>Audio Settings</h3>"
},
"backgroundColour" :
{
"condition" : "backgroundEnabled.value==false",
"index" : 39,
"order" : 139,
"text" : "Colour",
"type" : "color",
"value" : "0 0 0"
},
"backgroundEnabled" :
{
"index" : 38,
"order" : 138,
"text" : "Image",
"type" : "bool",
"value" : false
},
"backgroundSettings" :
{
"index" : 37,
"order" : 137,
"text" : "<br/><br/><h3>Background Settings</h3>"
},
"backgroundSrc" :
{
"condition" : "backgroundEnabled.value==true",
"index" : 40,
"order" : 140,
"text" : "Source",
"type" : "file"
},
"barColour" :
{
"index" : 7,
"order" : 107,
"text" : "Default Colour (No Thumbnail)",
"type" : "color",
"value" : "1 1 1"
},
"barOffsetX" :
{
"editable" : true,
"index" : 4,
"max" : 1000,
"min" : -1000,
"order" : 104,
"text" : "X Offset",
"type" : "slider",
"value" : 0
},
"barOffsetY" :
{
"editable" : true,
"index" : 5,
"max" : 1000,
"min" : -1000,
"order" : 105,
"text" : "Y Offset",
"type" : "slider",
"value" : 0
},
"barPadding" :
{
"editable" : true,
"index" : 2,
"max" : 10,
"min" : 0,
"order" : 102,
"text" : "Padding",
"type" : "slider",
"value" : 5
},
"barSettings" :
{
"index" : 0,
"order" : 100,
"text" : "<h3>Bar Settings</h3>"
},
"barSmoothing" :
{
"editable" : true,
"index" : 3,
"max" : 20,
"min" : 1,
"order" : 103,
"text" : "Smoothing",
"type" : "slider",
"value" : 10
},
"barVibrance" :
{
"editable" : true,
"index" : 6,
"max" : 100,
"min" : 10,
"order" : 106,
"text" : "Vibrance",
"type" : "slider",
"value" : 70
},
"barWidth" :
{
"editable" : true,
"index" : 1,
"max" : 40,
"min" : 1,
"order" : 101,
"text" : "Width",
"type" : "slider",
"value" : 20
},
"borderColour" :
{
"condition" : "borderEnabled.value==true",
"index" : 43,
"order" : 143,
"text" : "Colour",
"type" : "color",
"value" : "1 1 1"
},
"borderEnabled" :
{
"index" : 42,
"order" : 142,
"text" : "Enabled",
"type" : "bool",
"value" : true
},
"borderSettings" :
{
"index" : 41,
"order" : 141,
"text" : "<br/><br/><h3>Border Settings</h3>"
},
"borderWidth" :
{
"condition" : "borderEnabled.value==true",
"editable" : true,
"fraction" : true,
"index" : 44,
"max" : 10,
"min" : 0,
"order" : 144,
"step" : 0.1,
"text" : "Width",
"type" : "slider",
"value" : 1
},
"headerAlign" :
{
"index" : 24,
"options" :
[
{
"label" : "Left",
"value" : "left"
},
{
"label" : "Centre",
"value" : "center"
},
{
"label" : "Right",
"value" : "right"
}
],
"order" : 124,
"text" : "Alignment",
"type" : "combo",
"value" : "left"
},
"headerColour" :
{
"index" : 26,
"order" : 126,
"text" : "Colour",
"type" : "color",
"value" : "1 1 1"
},
"headerMaxWidth" :
{
"editable" : true,
"index" : 29,
"max" : 5000,
"min" : 100,
"order" : 129,
"text" : "Maximum Width",
"type" : "slider",
"value" : 1200
},
"headerOffsetX" :
{
"editable" : true,
"index" : 27,
"max" : 1000,
"min" : -1000,
"order" : 127,
"text" : "X Offset",
"type" : "slider",
"value" : 0
},
"headerOffsetY" :
{
"editable" : true,
"index" : 28,
"max" : 1000,
"min" : -1000,
"order" : 128,
"text" : "Y Offset",
"type" : "slider",
"value" : 0
},
"headerSettings" :
{
"index" : 23,
"order" : 123,
"text" : "<br/><br/><h3>Header Settings</h3>"
},
"headerSize" :
{
"editable" : true,
"index" : 25,
"max" : 200,
"min" : 50,
"order" : 125,
"text" : "Font Size",
"type" : "slider",
"value" : 100
},
"logoBackground" :
{
"condition" : "logoEnabled.value==true",
"index" : 19,
"order" : 119,
"text" : "Background",
"type" : "bool",
"value" : true
},
"logoEnabled" :
{
"index" : 18,
"order" : 118,
"text" : "Enabled",
"type" : "bool",
"value" : true
},
"logoOffsetX" :
{
"condition" : "logoEnabled.value==true",
"editable" : true,
"index" : 21,
"max" : 1000,
"min" : -1000,
"order" : 121,
"text" : "X Offset",
"type" : "slider",
"value" : 0
},
"logoOffsetY" :
{
"condition" : "logoEnabled.value==true",
"editable" : true,
"index" : 22,
"max" : 1000,
"min" : -1000,
"order" : 122,
"text" : "Y Offset",
"type" : "slider",
"value" : 0
},
"logoScale" :
{
"condition" : "logoEnabled.value==true",
"editable" : true,
"index" : 20,
"max" : 3,
"min" : 0.5,
"order" : 120,
"text" : "Scale",
"type" : "slider",
"value" : 1
},
"logoSettings" :
{
"index" : 17,
"order" : 117,
"text" : "<br/><br/><h3>Logo Settings</h3>"
},
"particleAmount" :
{
"condition" : "particlesEnabled.value==true",
"editable" : true,
"index" : 11,
"max" : 500,
"min" : 1,
"order" : 111,
"text" : "Amount",
"type" : "slider",
"value" : 200
},
"particleDirection" :
{
"condition" : "particlesEnabled.value==true",
"index" : 13,
"options" :
[
{
"label" : "Left",
"value" : "Left"
},
{
"label" : "Right",
"value" : "Right"
}
],
"order" : 113,
"text" : "Direction",
"type" : "combo",
"value" : "Right"
},
"particleSettings" :
{
"index" : 8,
"order" : 108,
"text" : "<br/><br/><h3>Particle Settings</h3>"
},
"particleSpeed" :
{
"condition" : "particlesEnabled.value==true",
"editable" : true,
"index" : 12,
"max" : 10,
"min" : 0.1,
"order" : 112,
"text" : "Speed",
"type" : "slider",
"value" : 1
},
"particlesEnabled" :
{
"index" : 9,
"order" : 109,
"text" : "Enabled",
"type" : "bool",
"value" : true
},
"particlesReact" :
{
"condition" : "particlesEnabled.value==true",
"index" : 10,
"order" : 110,
"text" : "Reactive",
"type" : "bool",
"value" : true
},
"rotateHorizontal": {
"defaultvalue": false,
"description": "Rotate bars 180 degrees horizontally",
"index": 45,
"order": 100,
"text": "Rotate Horizontal",
"type": "bool"
},
"rotateVertical": {
"defaultvalue": false,
"description": "Rotate bars 180 degrees vertically",
"index": 46,
"order": 101,
"text": "Rotate Vertical",
"type": "bool"
},
"schemecolor" :
{
"order" : 0,
"text" : "ui_browse_properties_scheme_color",
"type" : "color",
"value" : "0 0 0"
},
"subheaderAlign" :
{
"index" : 31,
"options" :
[
{
"label" : "Left",
"value" : "left"
},
{
"label" : "Centre",
"value" : "center"
},
{
"label" : "Right",
"value" : "right"
}
],
"order" : 131,
"text" : "Alignment",
"type" : "combo",
"value" : "left"
},
"subheaderColour" :
{
"index" : 33,
"order" : 133,
"text" : "Colour",
"type" : "color",
"value" : "1 1 1"
},
"subheaderMaxWidth" :
{
"editable" : true,
"index" : 36,
"max" : 5000,
"min" : 100,
"order" : 136,
"text" : "Maximum Width",
"type" : "slider",
"value" : 1200
},
"subheaderOffsetX" :
{
"editable" : true,
"index" : 34,
"max" : 1000,
"min" : -1000,
"order" : 134,
"text" : "X Offset",
"type" : "slider",
"value" : 0
},
"subheaderOffsetY" :
{
"editable" : true,
"index" : 35,
"max" : 1000,
"min" : -1000,
"order" : 135,
"text" : "Y Offset",
"type" : "slider",
"value" : 0
},
"subheaderSettings" :
{
"index" : 30,
"order" : 130,
"text" : "<br/><br/><h3>Sub Header Settings</h3>"
},
"subheaderSize" :
{
"editable" : true,
"index" : 32,
"max" : 200,
"min" : 25,
"order" : 132,
"text" : "Font Size",
"type" : "slider",
"value" : 50
}
},
"supportsaudioprocessing" : true
},
"preview" : "preview.gif",
"ratingsex" : "none",
"ratingviolence" : "none",
"tags" : [ "Music" ],
"title" : "Monstercat Audio Visualizer (+Media Integration)",
"type" : "Web",
"version" : 7,
"visibility" : "public",
"workshopid" : "3208430444",
"workshopurl" : "steam://url/CommunityFilePage/3208430444"
}
Raw
Script.js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let bars = [];
let particles = [];
let peakValue = 0.2;
const barsLength = 64;
let logo = new Image();
let mediaPlaying = false;
let defaultColour;
let background = new Image();
let currentAlpha = 0;
let rotateHorizontal = false;
let rotateVertical = false;
const audioIncrease = 0.02;
const audioDecrease = 0.98;
let settings = {
bars: {
width: 20,
padding: 5,
smoothingFactor: 8,
vibrance: 50,
colour: "#FFFFFF",
offset: {
x: 0,
y: 0
}
},
particles: {
enabled: true,
amount: 50,
speed: 2,
direction: "Right",
react: true
},
audio: {
peak: 2,
equalize: false,
},
logo: {
enabled: true,
background: true,
scale: 1,
offset: {
x: 0,
y: 0,
}
},
header: {
text: "Header",
centred: false,
size: 100,
colour: "#FFF",
maxWidth: 1200,
offset: {
x: 0,
y: 0
}
},
subheader: {
text: "Subheader",
centred: false,
size: 50,
colour: "#FFF",
maxWidth: 1200,
offset: {
x: 0,
y: 0
}
},
background: {
enabled: false,
src: "",
colour: "#000000"
},
border: {
enabled: false,
width: 1,
colour: "#FFF"
}
}
function wallpaperMediaThumbnailListener(event) {
if (mediaPlaying) {
loadImage(logo, event.thumbnail);
}
}
function wallpaperMediaPropertiesListener(event) {
mediaPlaying = event.title !== "";
if (mediaPlaying) {
const headerMaxWidth = settings.header.maxWidth;
ctx.font = settings.header.size + "px Gotham-Bold";
let truncatedTitle = event.title;
let textWidth = ctx.measureText(truncatedTitle).width;
if (textWidth > headerMaxWidth) {
while (textWidth > headerMaxWidth) {
truncatedTitle = truncatedTitle.slice(0, -1);
textWidth = ctx.measureText(truncatedTitle + "...").width;
}
settings.header.text = truncatedTitle + "...";
} else {
settings.header.text = event.title;
}
const subheaderMaxWidth = settings.subheader.maxWidth;
ctx.font = settings.subheader.size + "px Gotham-Light";
let truncatedArtist = event.artist;
textWidth = ctx.measureText(truncatedArtist).width;
if (textWidth > subheaderMaxWidth) {
while (textWidth > subheaderMaxWidth) {
truncatedArtist = truncatedArtist.slice(0, -1);
textWidth = ctx.measureText(truncatedArtist + "...").width;
}
settings.subheader.text = truncatedArtist + "...";
} else {
settings.subheader.text = event.artist;
}
}
}
window.wallpaperRegisterMediaThumbnailListener(wallpaperMediaThumbnailListener);
window.wallpaperRegisterMediaPropertiesListener(wallpaperMediaPropertiesListener);
window.wallpaperPropertyListener = {
applyUserProperties: function(properties) {
if (properties.barWidth) {
settings.bars.width = properties.barWidth.value;
initBars(); // Reinicializar barras para actualizar ancho
}
if (properties.barPadding) {
settings.bars.padding = properties.barPadding.value;
initBars(); // Reinicializar barras para actualizar espaciado
}
if (properties.barSmoothing) {
settings.bars.smoothing = properties.barSmoothing.value;
}
if (properties.barOffsetX) {
settings.bars.offset.x = properties.barOffsetX.value;
}
if (properties.barOffsetY) {
settings.bars.offset.y = properties.barOffsetY.value;
}
if (properties.barVibrance) {
settings.bars.vibrance = properties.barVibrance.value;
}
if (properties.particlesEnabled) {
settings.particles.enabled = properties.particlesEnabled.value;
}
if (properties.particlesReact) {
settings.particles.react = properties.particlesReact.value;
}
if (properties.particleAmount) {
settings.particles.amount = properties.particleAmount.value;
initParticles();
}
if (properties.particleSpeed) {
settings.particles.speed = properties.particleSpeed.value;
}
if (properties.particleDirection) {
settings.particles.direction = properties.particleDirection.value;
}
if (properties.audioPeaks) {
settings.audio.peak = properties.audioPeaks.value;
}
if (properties.audioEqualize) {
settings.audio.equalize = properties.audioEqualize.value;
}
if (properties.logoEnabled) {
settings.logo.enabled = properties.logoEnabled.value;
}
if (properties.logoBackground) {
settings.logo.background = properties.logoBackground.value;
}
if (properties.logoScale) {
settings.logo.scale = properties.logoScale.value;
}
if (properties.logoOffsetX) {
settings.logo.offset.x = properties.logoOffsetX.value;
}
if (properties.logoOffsetY) {
settings.logo.offset.y = properties.logoOffsetY.value;
}
if (properties.headerSize) {
settings.header.size = properties.headerSize.value;
}
if (properties.headerAlign) {
settings.header.align = properties.headerAlign.value;
}
if (properties.headerColour) {
let c = properties.headerColour.value.split(' ').map(Number);
settings.header.colour = `rgb(${c[0] * 255}, ${c[1] * 255}, ${c[2] * 255})`;
}
if (properties.headerOffsetX) {
settings.header.offset.x = properties.headerOffsetX.value;
}
if (properties.headerOffsetY) {
settings.header.offset.y = properties.headerOffsetY.value;
}
if (properties.headerMaxWidth) {
settings.header.maxWidth = properties.headerMaxWidth.value;
}
if (properties.subheaderSize) {
settings.subheader.size = properties.subheaderSize.value;
}
if (properties.subheaderAlign) {
settings.subheader.align = properties.subheaderAlign.value;
}
if (properties.subheaderColour) {
let c = properties.subheaderColour.value.split(' ').map(Number);
settings.subheader.colour = `rgb(${c[0] * 255}, ${c[1] * 255}, ${c[2] * 255})`;
}
if (properties.subheaderOffsetX) {
settings.subheader.offset.x = properties.subheaderOffsetX.value;
}
if (properties.subheaderOffsetY) {
settings.subheader.offset.y = properties.subheaderOffsetY.value;
}
if (properties.subheaderMaxWidth) {
settings.subheader.maxWidth = properties.subheaderMaxWidth.value;
}
if (properties.backgroundEnabled) {
settings.background.enabled = properties.backgroundEnabled.value;
}
if (properties.backgroundSrc) {
settings.background.src = properties.backgroundSrc.value;
loadImage(background, settings.background.src);
}
if (properties.backgroundColour) {
let c = properties.backgroundColour.value.split(' ').map(Number);
settings.background.colour = `rgb(${c[0] * 255}, ${c[1] * 255}, ${c[2] * 255})`;
}
if (properties.borderEnabled) {
settings.border.enabled = properties.borderEnabled.value;
}
if (properties.borderWidth) {
settings.border.width = properties.borderWidth.value;
}
if (properties.borderColour) {
let c = properties.borderColour.value.split(' ').map(Number);
settings.border.colour = `rgb(${c[0] * 255}, ${c[1] * 255}, ${c[2] * 255})`;
}
if (properties.rotateHorizontal) {
rotateHorizontal = properties.rotateHorizontal.value;
}
if (properties.rotateVertical) {
rotateVertical = properties.rotateVertical.value;
}
}
};
const resize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.width = window.innerWidth + "px";
canvas.style.height = window.innerHeight + "px";
};
const loadImage = (elem, image, callback) => {
elem.loaded = false;
elem.src = image;
elem.onload = () => {
elem.loaded = true;
if (typeof callback === "function") {
callback(image);
}
};
};
window.wallpaperRegisterAudioListener((audioData) => {
if (mediaPlaying) {
let max = 0;
let data = [];
let finalProcessing = [];
let average = 0;
for (let i = 0; i < audioData.length / 2; i++) {
data.push(Math.pow((audioData[i] + audioData[i + 1]) / 2, settings.audio.peak));
if (settings.audio.equalize) {
data[i] /= pinknoise[i];
}
if (data[i] > max) {
max = data[i];
}
}
peakValue = peakValue * audioDecrease + max * audioIncrease;
for (let i = 0; i < data.length; i++) {
data[i] /= peakValue;
if (data[i] > 1.2) {
data[i] = 1.2;
}
}
for (let i = 0; i < data.length; i++) {
if (i == 0 || i == data.length - 1) {
finalProcessing[i] = data[i];
} else {
finalProcessing[i] = (data[i - 1] * 2 + data[i] * 3 + data[i + 1] * 2) / 7;
}
average += finalProcessing[i];
}
average /= finalProcessing.length;
average *= settings.audio.peak * settings.particles.speed;
if (settings.particles.react) {
for (let i = 0; i < particles.length; i++) {
particles[i].changedSpeedX = particles[i].speedX * (average + 0.1);
particles[i].changedSpeedY = particles[i].speedY * (average + 0.1);
}
} else {
for (let i = 0; i < particles.length; i++) {
particles[i].changedSpeedX = particles[i].speedX * settings.particles.speed / 10;
particles[i].changedSpeedY = particles[i].speedY * settings.particles.speed / 10;
}
}
for (let i = 0; i < bars.length; i++) {
bars[i].desiredPos = finalProcessing[i] * canvas.height / 3 + 1;
}
}
});
window.onload = () => {
const lightFont = new FontFace('Gotham-Light', 'url(Light.ttf)');
const boldFont = new FontFace('Gotham-Bold', 'url(Bold.ttf)');
Promise.all([lightFont.load(), boldFont.load()]).then(() => {
resize();
for (let i = 0; i < barsLength; i++) {
bars.push(new Bar(
canvas.width / 2 - (barsLength * (settings.bars.width + settings.bars.padding)) / 2 + i * (settings.bars.width + settings.bars.padding),
canvas.height / 2 - 25,
settings.bars.width,
25
));
}
for (let i = 0; i < settings.particles.amount; i++) {
particles.push(new Particle());
}
window.requestAnimationFrame(draw);
});
};
const draw = () => {
window.requestAnimationFrame(draw);
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (settings.background.enabled && background.loaded) {
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
} else {
ctx.fillStyle = settings.background.colour;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
if (mediaPlaying) {
currentAlpha = Math.min(currentAlpha + 0.005, 1);
} else {
currentAlpha = Math.max(currentAlpha - 0.005, 0);
}
ctx.globalAlpha = currentAlpha;
if (currentAlpha !== 0) {
if (settings.particles.enabled) {
for (let i = 0; i < particles.length; i++) {
particles[i].draw();
particles[i].update();
}
}
if (mediaPlaying || currentAlpha > 0) {
ctx.save();
if (rotateHorizontal || rotateVertical) {
let barsWidth = barsLength * (settings.bars.width + settings.bars.padding);
let centerX = canvas.width / 2 - barsWidth / 2 + settings.bars.offset.x;
let centerY = canvas.height / 2 + settings.bars.offset.y;
ctx.translate(centerX + barsWidth / 2, centerY);
if (rotateHorizontal) {
ctx.rotate(Math.PI);
}
if (rotateVertical) {
ctx.rotate(Math.PI);
}
ctx.translate(-(centerX + barsWidth / 2), -centerY);
}
ctx.fillStyle = settings.bars.colour;
for (let i = 0; i < bars.length; i++) {
bars[i].draw(settings.bars.offset.x, settings.bars.offset.y);
bars[i].update();
}
ctx.restore();
}
if (settings.logo.enabled && logo.loaded) {
const logoAspectRatio = logo.width / logo.height;
const logoScale = settings.logo.scale;
const logoWidth = 150 * logoScale;
const logoHeight = logoWidth / logoAspectRatio;
const logoY = canvas.height / 2 + (50 * logoScale) + (logoWidth - logoHeight) / 2 + settings.logo.offset.y;
const logoX = canvas.width / 2 - (barsLength * (settings.bars.width + settings.bars.padding)) / 2 + settings.logo.offset.x;
const logoBackgroundWidth = logoWidth + 40 * logoScale;
const logoBackgroundHeight = logoHeight + 40 * logoScale;
const borderWidth = settings.border.width;
if (settings.logo.background) {
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(logoX, logoY - 20 * logoScale, logoBackgroundWidth, logoBackgroundHeight);
}
ctx.drawImage(logo, logoX + (20 * logoScale), logoY, logoWidth, logoHeight);
if (settings.logo.background && settings.border.enabled) {
ctx.strokeStyle = settings.border.colour;
ctx.lineWidth = borderWidth;
ctx.strokeRect(logoX - borderWidth / 2, logoY - 20 * logoScale - borderWidth / 2, logoBackgroundWidth + borderWidth, logoBackgroundHeight + borderWidth);
}
}
ctx.font = settings.header.size + "px Gotham-Bold";
ctx.textBaseline = 'middle';
ctx.textAlign = settings.header.align;
ctx.fillStyle = settings.header.colour;
ctx.fillText(settings.header.text.toUpperCase(), canvas.width / 2 - (barsLength * (settings.bars.width + settings.bars.padding)) / 2 + 218 * settings.logo.scale + settings.header.offset.x, canvas.height / 2 + 90 + settings.header.offset.y);
ctx.font = settings.subheader.size + "px Gotham-Light";
ctx.textBaseline = 'middle';
ctx.textAlign = settings.subheader.align;
ctx.fillStyle = settings.subheader.colour;
ctx.fillText(settings.subheader.text.toUpperCase(), canvas.width / 2 - (barsLength * (settings.bars.width + settings.bars.padding)) / 2 + 218 * settings.logo.scale + settings.subheader.offset.x, canvas.height / 2 + 170 + settings.subheader.offset.y);
}
};
const updateBars = () => {
for (let i = 0; i < bars.length; i++) {
bars[i].x = canvas.width / 2 - (barsLength * (settings.bars.width + settings.bars.padding)) / 2 + i * (settings.bars.width + settings.bars.padding);
bars[i].y = canvas.height / 2 - 25;
bars[i].width = settings.bars.width;
bars[i].height = 25;
}
};
const updateParticles = () => {
if (settings.particles.amount > particles.length) {
while (particles.length < settings.particles.amount) {
particles.push(new Particle());
}
} else {
var diff = particles.length - settings.particles.amount;
particles.splice(-diff, diff);
}
};
const getColour = (clr) => {
let colour = clr.split(" ");
for (let i = 0; i < colour.length; i++) {
colour[i] = (colour[i] * 255).toString(16);
if (colour[i].length == 1) {
colour[i] = "0" + colour[i];
}
}
colour = colour.join("");
colour = "#" + colour;
return colour;
};
const initBars = () => {
barsLength = Math.floor((canvas.width - settings.bars.offset.x * 2) / (settings.bars.width + settings.bars.padding));
bars = [];
for (let i = 0; i < barsLength; i++) {
bars.push(new Bar(i));
}
};
const pinknoise = [1.1760367470305, 0.85207379418243, 0.68842437227852, 0.63767902570829, 0.5452348949654, 0.50723325864167, 0.4677726234682, 0.44204182748767,
0.41956517802157, 0.41517375040002, 0.41312118577934, 0.40618363960446, 0.39913707474975, 0.38207008614508, 0.38329789106488, 0.37472136606245,
0.36586428412968, 0.37603017335105, 0.39762590761573, 0.39391828858591, 0.37930603769622, 0.39433365764563, 0.38511504613859, 0.39082579241834,
0.3811852720504, 0.40231453727161, 0.40244151133175, 0.39965366884521, 0.39761103827545, 0.51136400422212, 0.66151212038954, 0.66312205226679,
0.7416276690995, 0.74614971301133, 0.84797007577483, 0.8573583910469, 0.96382997811663, 0.99819377577185, 1.0628692615814, 1.1059083969751,
1.1819808497335, 1.257092297208, 1.3226521464753, 1.3735992532905, 1.4953223705889, 1.5310064942373, 1.6193923584808, 1.7094805527135,
1.7706604552218, 1.8491987941428, 1.9238418849406, 2.0141596921333, 2.0786429508827, 2.1575522518646, 2.2196355526005, 2.2660112509705,
2.320762171749, 2.3574848254513, 2.3986127976537, 2.4043566176474, 2.4280476777842, 2.3917477397336, 2.4032522546622, 2.3614180150678
];
Raw
Settings.js
window.wallpaperPropertyListener = {
applyUserProperties: (properties) => {
/*************/
//Bar settings
/*************/
if (properties.barWidth) {
settings.bars.width = properties.barWidth.value;
updateBars();
}
if (properties.barPadding) {
settings.bars.padding = properties.barPadding.value;
updateBars();
}
if (properties.barSmoothing) {
settings.bars.smoothingFactor = properties.barSmoothing.value;
}
if (properties.barOffsetX) {
settings.bars.offset.x = properties.barOffsetX.value;
}
if (properties.barOffsetY) {
settings.bars.offset.y = properties.barOffsetY.value;
}
if (properties.barVibrance) {
settings.bars.vibrance = properties.barVibrance.value;
}
if (properties.barColour) {
defaultColour = getColour(properties.barColour.value);
settings.bars.colour = defaultColour;
}
/******************/
//Particle settings
/******************/
if (properties.particlesEnabled) {
settings.particles.enabled = properties.particlesEnabled.value;
}
if (properties.particlesReact) {
settings.particles.react = properties.particlesReact.value;
}
if (properties.particleAmount) {
settings.particles.amount = properties.particleAmount.value;
updateParticles();
}
if (properties.particleSpeed) {
settings.particles.speed = properties.particleSpeed.value;
updateParticles();
}
if (properties.particleDirection) {
settings.particles.direction = properties.particleDirection.value;
}
/***************/
//Audio settings
/***************/
if (properties.audioPeaks) {
settings.audio.peak = properties.audioPeaks.value;
}
if (properties.audioEqualize) {
settings.audio.equalize = properties.audioEqualize.value;
}
/**************/
//Logo settings
/**************/
if (properties.logoEnabled) {
settings.logo.enabled = properties.logoEnabled.value;
}
if (properties.logoBackground) {
settings.logo.background = properties.logoBackground.value;
}
if (properties.logoScale) {
settings.logo.scale = properties.logoScale.value;
}
if (properties.logoOffsetX) {
settings.logo.offset.x = properties.logoOffsetX.value;
}
if (properties.logoOffsetY) {
settings.logo.offset.y = properties.logoOffsetY.value;
}
/****************/
//Header settings
/****************/
if (properties.headerAlign) {
settings.header.align = properties.headerAlign.value;
}
if (properties.headerSize) {
settings.header.size = properties.headerSize.value;
}
if (properties.headerColour) {
settings.header.colour = getColour(properties.headerColour.value);
}
if (properties.headerOffsetX) {
settings.header.offset.x = properties.headerOffsetX.value;
}
if (properties.headerOffsetY) {
settings.header.offset.y = properties.headerOffsetY.value;
}
if (properties.headerMaxWidth) {
settings.header.maxWidth = properties.headerMaxWidth.value;
}
/********************/
//Sub Header settings
/********************/
if (properties.subheaderAlign) {
settings.subheader.align = properties.subheaderAlign.value;
}
if (properties.subheaderSize) {
settings.subheader.size = properties.subheaderSize.value;
}
if (properties.subheaderColour) {
settings.subheader.colour = getColour(properties.subheaderColour.value);
}
if (properties.subheaderOffsetX) {
settings.subheader.offset.x = properties.subheaderOffsetX.value;
}
if (properties.subheaderOffsetY) {
settings.subheader.offset.y = properties.subheaderOffsetY.value;
}
if (properties.subheaderMaxWidth) {
settings.subheader.maxWidth = properties.subheaderMaxWidth.value;
}
/********************/
//Background Settings
/********************/
if (properties.backgroundEnabled) {
settings.background.enabled = properties.backgroundEnabled.value;
if (settings.background.enabled && settings.background.src) {
canvas.style.background = "url('file:///" + settings.background.src + "')";
canvas.style.backgroundPosition="center";
canvas.style.backgroundSize="100% 100%";
canvas.style.backgroundRepeat="no-repeat";
} else {
canvas.style.background = "none";
}
}
if (properties.backgroundSrc) {
settings.background.src = properties.backgroundSrc.value;
if (settings.background.enabled && settings.background.src) {
canvas.style.background = "url('file:///" + settings.background.src + "')";
canvas.style.backgroundPosition="center";
canvas.style.backgroundSize="100% 100%";
canvas.style.backgroundRepeat="no-repeat";
} else {
canvas.style.background = "none";
}
}
if (properties.backgroundColour && !settings.background.enabled) {
settings.background.colour = getColour(properties.backgroundColour.value);
canvas.style.background = settings.background.colour;
}
/****************/
//Border Settings
/****************/
if (properties.borderEnabled) {
settings.border.enabled = properties.borderEnabled.value;
}
if (properties.borderWidth) {
settings.border.width = properties.borderWidth.value;
}
if (properties.borderColour) {
settings.border.colour = getColour(properties.borderColour.value);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment