112 lines
5.0 KiB
HTML
112 lines
5.0 KiB
HTML
<html>
|
|
<head>
|
|
<title>bluelibs</title>
|
|
<link href="css/css.css" rel="stylesheet" />
|
|
<script src="libs/bluecore.js"></script>
|
|
<script src="libs/blueaudio.js"></script>
|
|
<script src="libs/bluemath.js"></script>
|
|
<script src="libs/bluepixle.js"></script>
|
|
<script src="libs/blueui.js"></script>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
This project is to develop and test my own small private javascript libraries.
|
|
</p>
|
|
<p>
|
|
bluecore.js - This is as its named very basic functions like grabbing things asynchronously and such. (also contains legacy functions that are depricated and replaced in other libraries now)
|
|
</p>
|
|
<p>
|
|
blueaudio.js - This is for adding/loading audio assets to a project.
|
|
</p>
|
|
<p>
|
|
bluemath.js - Adds some helpful math objects such as vectors and matricies.
|
|
</p>
|
|
<p>
|
|
bluepixle.js - Adds helper classes to make using canvas with objects simple. (requires bluemath.js)
|
|
</p>
|
|
<p>
|
|
blueui.js - Adds classes for several highly reusable ui objects such as buttons and draggable windows.
|
|
</p>
|
|
</body>
|
|
</html>
|
|
<script>
|
|
document.body.innerHTML = ""; // javascript enabled clear screen
|
|
window.bdescription = new buiWindow("blue.js", 400, 600, false, false, false, false);
|
|
window.bcore = new buiWindow("bluecore.js", 400, 600, true, false, true, true);
|
|
window.baudio = new buiWindow("blueaudio.js", 400, 600, true, false, true, true);
|
|
window.bmath = new buiWindow("bluemath.js", 400, 600, true, false, true, true);
|
|
window.bpixle = new buiWindow("bluepixle.js", 400, 600, true, false, true, true);
|
|
window.bui = new buiWindow("blueui.js", 400, 600, true, false, true, true);
|
|
|
|
window.bdescription.content.innerText = "This project is to develop and test my own small private javascript libraries.";
|
|
window.bcore.content.innerText = "This is as its named very basic functions like grabbing things asynchronously and such. This library also containes a lot of legacy functions for backwards compatibility.";
|
|
// window.bpixle.content.innerText = "bluepixle.js - Adds helper classes to make using canveas with objects simple (requires bluemath.js)";
|
|
window.bui.content.innerText = "blueui.js - Adds classes for several reusable ui objects such as buttons and draggable windows. (You are viewing the demo for this right now)";
|
|
window.bmath.content.innerText = "bluemath.js - Adds some helpful math objects such as vectors and matricies.";
|
|
|
|
|
|
// blueaudio.js demo code
|
|
var baudioDescription = document.createElement("div");
|
|
baudioDescription.innerText = "blueaudio.js - This is for adding/loading audio assets to a project.";
|
|
var bluePlayer = new AudioContext();
|
|
var mySound = new buiButton("Click me for blueaudio.js demo",function () {
|
|
playSequence(window.bluePlayer,parseSequence(mySequence.value),"triangle",60);
|
|
});
|
|
|
|
var mySequence = document.createElement("input");
|
|
mySequence.id = "sequenceText";
|
|
mySequence.style.width = "100%";
|
|
mySequence.style.textAlign = "center";
|
|
mySequence.value = "5ab1/8;5g1/8;5e1/8;4bb1/8;4an1/8;5f1/8;5an1/8;6db3/8";
|
|
|
|
window.baudio.content.appendChild(baudioDescription);
|
|
window.baudio.content.appendChild(mySound.root);
|
|
window.baudio.content.appendChild(mySequence);
|
|
|
|
// bluepixle.js demo code
|
|
|
|
var cancan = document.createElement("canvas");
|
|
cancan.height = 400;
|
|
cancan.width = 600;
|
|
window.bpixle.content.appendChild(cancan);
|
|
|
|
var buffy = new frameBuffer(cancan.getContext("2d"), 400, 600);
|
|
var desc = new container(new vector([20,20]));
|
|
desc.addShape(new shape("text", null, new vector([500,200]), null, "#000000", null, null, {text:"bluepixle.js - Adds helper classes to make using canveas with objects simple (requires bluemath.js)"}));
|
|
buffy.addContainer(desc);
|
|
buffy.tick = setInterval(() => { buffy.pushFrame(); }, 33);
|
|
var speedFactor = 0.05;
|
|
desc.tick = setInterval(() => {
|
|
if (desc.coordinates.d[1] <= 0) { desc.movementVector.d[1] = speedFactor }
|
|
if (desc.coordinates.d[1] >= 400) { desc.movementVector.d[1] = -speedFactor }
|
|
if (desc.coordinates.d[0] <= 0) { desc.movementVector.d[0] = speedFactor }
|
|
if (desc.coordinates.d[0] >= 100) { desc.movementVector.d[0] = -speedFactor }
|
|
desc.move(66);
|
|
}, 66);
|
|
desc.movementVector.d[1] = speedFactor;
|
|
desc.movementVector.d[0] = speedFactor;
|
|
|
|
document.body.appendChild(window.bdescription.root);
|
|
window.bdescription.content.appendChild(window.bcore.root);
|
|
window.bcore.root.style.top = "80px";
|
|
window.bcore.root.style.left = "80px";
|
|
window.bdescription.content.appendChild(window.baudio.root);
|
|
window.baudio.root.style.top = "120px";
|
|
window.baudio.root.style.left = "120px";
|
|
window.bdescription.content.appendChild(window.bmath.root);
|
|
window.bmath.root.style.top = "160px";
|
|
window.bmath.root.style.left = "160px";
|
|
window.bdescription.content.appendChild(window.bpixle.root);
|
|
window.bpixle.root.style.top = "200px";
|
|
window.bpixle.root.style.left = "200px";
|
|
window.bdescription.content.appendChild(window.bui.root);
|
|
window.bui.root.style.top = "240px";
|
|
window.bui.root.style.left = "240px";
|
|
|
|
window.bcore.minimizeButton.root.click();
|
|
window.baudio.minimizeButton.root.click();
|
|
window.bmath.minimizeButton.root.click();
|
|
window.bpixle.minimizeButton.root.click();
|
|
window.bui.minimizeButton.root.click();
|
|
</script>
|