208 lines
6.1 KiB
JavaScript
208 lines
6.1 KiB
JavaScript
function $(sel, s) {
|
|
return $$(sel, s)[0];
|
|
}
|
|
|
|
function $$(sel, s) {
|
|
s = s || document;
|
|
return s.querySelectorAll(sel);
|
|
}
|
|
|
|
Node.prototype.addDelegatedEventListener = function (type, aim, cb) {
|
|
this.addEventListener(type, (event) => {
|
|
let target = event.target;
|
|
if (target.matches(aim)) {
|
|
cb(event, target);
|
|
} else {
|
|
let parent = target.closest(aim);
|
|
if (parent) {
|
|
cb(event, parent);
|
|
}
|
|
}
|
|
})
|
|
};
|
|
|
|
function create(name, content) {
|
|
let d = document.createElement(name);
|
|
if (content) {
|
|
d.innerHTML = content;
|
|
}
|
|
return d;
|
|
}
|
|
|
|
function append(to, array) {
|
|
for (let item in array) {
|
|
to.appendChild(array[item]);
|
|
}
|
|
}
|
|
|
|
function generateRotationSliders() {
|
|
let group = $('#rotate');
|
|
generateSlider(["X", "Y", "Z", "X-Inc", "Y-Inc", "Z-Inc"], 0, 360, 0, group, "rotate");
|
|
generateCheckBox(["by Beat"], true, group, "rotate");
|
|
}
|
|
|
|
function generateTranslateSliders() {
|
|
let group = $('#translate');
|
|
generateSlider(["X", "Y", "Z"], -1, 1, 1, group, "translate");
|
|
}
|
|
|
|
function generateColorSliders() {
|
|
let group = $('#color');
|
|
generateSlider(["R", "G", "B"], 0, 255, 125, group, "color");
|
|
generateCheckBox(["by Beat"], true, group, "color");
|
|
}
|
|
|
|
function generateWorldSliders() {
|
|
let group = $('#world');
|
|
generateSlider(["LightPos-X", "LightPos-Y", "LightPos-Z"], -1, 1, 1, group, "light");
|
|
generateSlider(["LightAngle"], 0, 360, 90, group, "light");
|
|
}
|
|
|
|
function generateDrawSliders() {
|
|
let group = $('#draw'),
|
|
g = "drawMode"
|
|
generateSlider(["DrawMode"], 0, 6, 0, group, g);
|
|
generateSlider(["Form"], 0, 3, 0, group, g);
|
|
generateSlider(["Radius"], 20, 1500, 500, group, g);
|
|
generateSlider(["Total"], 0, 200, 50, group, g);
|
|
generateSlider(["PointSize"], 1, 10, 2, group, g, .2);
|
|
generateSlider(["Smoothing"], 0, 1, 0.8, group, g, .05);
|
|
generateSlider(["Steps"], 512, analyser.fftSize / 2, 512, group, g, 256);
|
|
generateCheckBox(["Dirty"], false, group, g)
|
|
}
|
|
|
|
function setRotations(changedEl) {
|
|
let group = $('#rotate');
|
|
let items = ["#X", "#Y", "#Z"];
|
|
for (let i in items) {
|
|
let el = $(items[i], group);
|
|
if (el === changedEl) {
|
|
sphereObject.rotationRaw[i] = getValue(el)
|
|
}
|
|
}
|
|
items = ["#X-Inc", "#Y-Inc", "#Z-Inc"];
|
|
for (let i in items) {
|
|
let el = $(items[i], group);
|
|
if (el === changedEl) {
|
|
sphereObject.rotateInc[i] = getValue(el) / 360;
|
|
}
|
|
}
|
|
|
|
sphereObject.rotateByBeat = $('#rotateby-Beat', group).checked;
|
|
}
|
|
|
|
function setColors() {
|
|
let group = $('#color');
|
|
sphereObject.color.r = getValue($('#R', group)) / 255;
|
|
sphereObject.color.g = getValue($('#G', group)) / 255;
|
|
sphereObject.color.b = getValue($('#B', group)) / 255;
|
|
|
|
sphereObject.colorByBeat = $('#colorby-Beat', group).checked;
|
|
}
|
|
|
|
function setWorld() {
|
|
let group = $('#world');
|
|
sphereObject.lightPos[0] = getValue($('#LightPos-X', group)) * 0.2;
|
|
sphereObject.lightPos[1] = getValue($('#LightPos-Y', group)) * 0.2;
|
|
sphereObject.lightPos[2] = getValue($('#LightPos-Z', group)) * 0.2;
|
|
|
|
lightAngle = getValue($('#LightAngle', group))
|
|
}
|
|
|
|
function setDraw() {
|
|
let group = $('#draw');
|
|
sphereObject.drawMode = getValue($('#DrawMode', group));
|
|
sphereObject.sphereMode = getValue($('#Form', group));
|
|
sphereObject.radius = getValue($('#Radius', group));
|
|
sphereObject.total = getValue($('#Total', group));
|
|
sphereObject.pointSize = getValue($('#PointSize', group));
|
|
sphereObject.steps = getValue($('#Steps', group));
|
|
sphereObject.dirtyMode = $('#drawModeDirty', group).checked;
|
|
analyser.smoothingTimeConstant = getValue($('#Smoothing', group));
|
|
}
|
|
|
|
function setTranslate() {
|
|
let group = $('#translate');
|
|
let items = ["#X", "#Y", "#Z"];
|
|
for (let i in items) {
|
|
sphereObject.translate[i] = getValue($(items[i], group))
|
|
}
|
|
}
|
|
|
|
function generateSlider(fromList, min, max, value, appendTo, group, stepSize) {
|
|
for (let i = 0; i < fromList.length; i++) {
|
|
let label = create("label", fromList[i]);
|
|
let reset = create("button", "d");
|
|
let range = create("input");
|
|
range.type = "range";
|
|
range.min = min;
|
|
range.max = max;
|
|
range.value = value;
|
|
range.id = fromList[i];
|
|
range.step = max === 1 ? .01 : (stepSize || 1);
|
|
range.dataset.group = group;
|
|
range.dataset.value = value;
|
|
let item = create("group-input");
|
|
append(item, [label, range, reset])
|
|
appendTo.appendChild(item);
|
|
}
|
|
}
|
|
|
|
function generateCheckBox(fromList, defaultValue, appendTo, group) {
|
|
for (let i = 0; i < fromList.length; i++) {
|
|
let label = create("label", fromList[i])
|
|
let checkbox = create("input");
|
|
checkbox.type = "checkbox";
|
|
checkbox.checked = defaultValue === true;
|
|
checkbox.dataset.group = group;
|
|
checkbox.id = group + fromList[i].split(" ").join("-");
|
|
let item = create("group-input");
|
|
append(item, [label, createSwitch(checkbox)])
|
|
appendTo.appendChild(item);
|
|
}
|
|
}
|
|
|
|
function createSwitch(checkbox) {
|
|
let swi = create("switch");
|
|
let label = create("label");
|
|
label.setAttribute("for", checkbox.id);
|
|
append(swi, [checkbox, label]);
|
|
return swi;
|
|
}
|
|
|
|
function changeHandler(el) {
|
|
let d = el.dataset.group;
|
|
if (d === "rotate") {
|
|
setRotations(el);
|
|
} else if (d === "translate") {
|
|
setTranslate();
|
|
} else if (d === "color") {
|
|
setColors();
|
|
} else if (d === "light") {
|
|
setWorld();
|
|
} else if (d === "drawMode") {
|
|
setDraw();
|
|
}
|
|
}
|
|
|
|
document.body.addDelegatedEventListener('input', 'group-input input', (ev, el) => {
|
|
changeHandler(el);
|
|
})
|
|
|
|
document.body.addDelegatedEventListener('click', 'group-input button', (ev, el) => {
|
|
let input = $('input', el.parentNode);
|
|
input.value = input.dataset.value;
|
|
changeHandler(input);
|
|
});
|
|
|
|
function getValue(slider) {
|
|
try {
|
|
return parseFloat(slider.value);
|
|
} catch (e) {
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
$('.settings-icon').addEventListener('click', function () {
|
|
$('.off-can').classList.toggle("closed");
|
|
}) |