Realtime Shared Musical Keyboard
Speed Of Arts is a Real Time Shared musical keyboard. It’s powered by a web socket server, and some nifty Midi JavaScript libraries. The idea is to give the user an instrument that allows them broad artistic freedom, and gives them the ability to interact with anyone around the world musically, without getting in the way. I also want it to be visually interesting.
In it’s current form, when you connect to the website you will be provided with two options. One to join the public room, or to start your own private room. If you join the public room, you ‘ll be greeted with a familiar musical keyboard, a list of available sounds, and a graphical display. If you’re on your phone you can tap the keyboard. If you’re a musician, you can plug in a midi instrument and begin playing. If you’re at your desktop, your keyboard is transformed into an instrument. Pressing + and – will allow you to adjust your octave, while the home row and the row above allows you to play notes.
I believe that Speed Of Arts provides a valuable service to musicians and students of music. Speed Of Arts connects people effortlessly in a way that’s anonymous but musically inclined. You don’t have a picture, or a name of whoever is at the other end. But you know they’re there, and they see you as well.
I hope to expand Speed Of Arts to provide more services and meaningful interactions between players. To try Speed Of Arts yourself, go to https://SpeedOfArts.com.
Displaying your Photospheres on your website
View the example page View the Source on Github Download the Library
To simplify adding a photosphere to your website, I created the “Photosphere” library found in the above github repository.
Start by linking the required libraries in the following order
<script type="text/javascript" src="lib/three.min.js"></script> <script type="text/javascript" src="lib/Detector.js"></script> <script type="text/javascript" src="lib/OrbitControls.js"></script> <script type="text/javascript" src="lib/Photosphere.js"></script>
Next you’ll need to style the element containing the photosphere, it will have the ID #canvas-photosphere.
<style type="text/css">
#canvas-photosphere {
position: fixed;
top: 0;
left: 0;
}
</style>
Setup the detector to alert users with incompatable browsers.
<script type="text/javascript">
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
}
</script>
After the close of the if statement, you’ll add the photosphere initalizer.
<script type="text/javascript">
if (!Detector.webgl) {
Detector.addGetWebGLMessage();
}
Photosphere.init("My_Photosphere.jpg");
</script>
A quick tip to improve your results, rescale the photosphere into a square where the width and height are a power of two using Photoshop. I recommend 4096×4096. This isn’t required at all, as the software will automatically rescale, but it will improve loading speed and gives you have control over the rescaling method.
How to load more content whilst scrolling: like bing image search
This is great for any page that could contain potentially an large to infinite amount of data. When a user scrolls to the bottom of the page, in the background a javascript-server connection will feed more data to the page.
User facing page
<!DOCTYPE html>
<html>
<head>
<title>Scroll Forever</title>
<style>
.bump{
display:block;
border: 1px solid black;
padding: 10px;
}
.loading{
display:block;
border: 1px solid black;
padding: 10px;
background-color: green;
marquee-style: slide;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
index = 0; //The current position of the index
perPage = 40 - 1; //The count per page, we minus one because arrays start at zero.
contentSelector = "#content"; //The CSS selector for the content block
postSelector = ".bump"; //The CSS selector for each post
loadingSelector = ".loading"; //The CSS selector for the loading block
handle = "handle.php"; //The php file to get the JSON data from
function loadData(i,p,clear){
$(loadingSelector).show(); //Show the loading screen
a = typeof(clear) != 'undefined' ? clear : false; //Set to clear the page as false as the default.
$.getJSON(handle, //jQuery function to get JSON data.
{
"index": i, //The index
"max": p, //The maximum posts per load
},
function(data){ //Take the JSON data
var html = "";
var postId = 0;
while(postId < data.length){
html += "<div class='bump'>" + data[postId] + "</div>"; //Do something with it
postId++;
}
if(clear == true){
html += "<div class='loading'>Loading...</div>";
$(contentSelector).html(html);
index = index + perPage; //Advance the index to match the new data.
} else {
$(loadingSelector).before(html);
index = index + perPage; //Advance the index to match the new data.
}
$(loadingSelector).hide();
});
}
$(window).ready(function(){
loadData(index,perPage); //Initially load the data
var w = $(window); //Saving the context to a shorthand variable.
w.scroll(function(){ //When we scroll
if(w.scrollTop() + w.height() == $(document).height()){ //Check if the position is the bottom of the page
loadData(index,perPage); // If so, then we will load more data.
}
});
});
</script> </head> <body>The idea of this demo is to be able to continuously scroll through data. For the demo, the javascript will grab new JSON data from a php file that just gives a larger and larger number. <div id="content"> <div>Loading...</div> </div> </body> </html>
Back end (save as handle.php)
<?php
/*
Handle.php - Part of the Continueous Scroll demo.
Spits a continueously larger and larger number in an array.
*/
if(isset($_REQUEST['index']) && isset($_REQUEST['max'])){
$start = $_REQUEST['index'];
$max = $_REQUEST['max'];
$i = 0;
$data = array();
while( $i <= $max ){
$data[$i] = $i + $start; //Heres a random note. I found that if you don't know how much you're expecting to get, it's eaiser to just start the array at zero. You can put a unique ID within a sub level array.
$i++;
}
} else {
$data = array(
"Error" => "Please post with the index and max argument",
);
}
echo json_encode($data);
?>
One idea for a modification, is to begin loading when the user is scrolled halfway through the newly loaded content. This way even newer content is loaded before the user even sees the end.
Constructing an JavaScript/HTML5 Isometric Game Engine
I’ve been taking on the task of creating an isometric game engine displayed in HTML 5’s Canvas and ran primarily on JavaScript. So far the venture’s been pretty sucessful. The hardest part is remembering the simple algebraic formulas that goes behind scaling and transforming objects across the screen. When I’m finished I’ll likely release something that’s open source, though that’s when I’m finished and I’m no where near that yet.
Current Features
- All JavaScript, CSS, and HTML. None of this requires flash or any special plugin
- Runs on Android, should run in iOS.
- Screen scales with your browser window.
- Basic alert window
- Basic win condition
- Infinite layers over the map
- Movement authenticated over the server
- Map data received by the server
- Pre-loader and Loading screen
- Basic UI elements
- Being built from the ground up to work for multi-player games.
- The game’s tile set and tile image sizes can be changed by editing a single array.
Coming Soon
- Change movement and positioning, so the character can move around freely and isn’t locked to a grid.
- Allow for the user to hold down a button to move. Currently you have to tap the direction to move each block.
- Reduse bandwidth and lag by adjusting how movement is handled in client-server communication.
- Reduce bandwidth and lag by using WebSockets to poll.
- Replace the tileset with a cool custom tileset.
- Map to map teleportation.
- Multi-player functionality.
- Quest System
- Character registration and creation.
- AI systems for guided movement
- AI systems for combat
My First WebGL application
About a week ago I begun to dig through a few WebGL frameworks. I tried GLGE, CopperLicht, and SceneJS. I went through a few tutorials in each, and then I decided to do something with SceneJS.
I wrote a PHP class that was a recursive backtracer maze generator (will post regarding this later), so what I did was create a second class that transforms the map data from the recursive backtracer and translate it into a 3D Scene.
So far it’s fairly simple, I have a premade set of prims for each wall, ceiling, and floor. Then I just run through the map cell by cell, cloaning the prims and then just adding the row number and column number to the X and Z positions.
The camera view is first person, but you can still walk through walls I haven’t learned how to keep that from happening yet.
I marked the end of the maze with a gold goblet.
Inspirational Websites
When looking to design a new website, it helps to look at pre-existing work. Here’s some of the websites I like to visit to become inspired.
Nike – http://www.nike.com
Nike looks just as cool being worn, as it does on the internet. Their website sports the same futuristic sporty look that Nike has always been known for. It’s going to be years before this website looks “old”, because besides just looking futuristic it’s very well designed and truthfully very simple. There’s not much maintence and if they want to vastly change the look of any one page, they just have to switch out the background.
Apple – http://www.apple.com/
Apple is well known for easy to use products, and good design. Many of their products actually look like they were designed by Dieter Rams. Their website is a perfect personification of their design principals. Timeless, and minimalistic.
Microsoft – http://www.microsoft.com
Microsoft has to be the most difficult site to design, not because their design is complicated but because their business is so huge. Microsoft has so many diffrent departments, and each one want’s a piece of the home page. Microsoft somehow hit it right, and designed a site that will bring you right to where you need to go with minimal effort or hunting.
Selected Web Design – http://www.selected-webdesign.com/
Selected Web Design is a website full of other very good and interesting designs, they’ve got categorys and other ways to filter the selections and find a site similar to your taste. You can find your own inspirations here.
Dieter Rams 10 Principles of Good Design
From the website http://www.vitsoe.com
“As good design cannot be measured in a finite way he set about expressing the ten most important principles for what he considered was good design.”
1. Good design is innovative.
2. Good design makes a product useful.
3. Good design is aesthetic.
4. Good design makes a product understandable.
5. Good design is unobtrusive.
6. Good design is honest.
7. Good design is long-lasting.
8. Good design is thorough down to the last detail.
9. Good design is environmentally friendly.
10. Good design is as little design as possible.
Is your website too information hungry?
To the average user, registering with a website is annoying. If you’re just trying a new game out, or posting a comment on a blog then it feels like a waste of time that could be spent on typing the comment or playing the game.
To the webmaster, registration may seem necessary to use many features of your site or game. For instance if you run a chess game, you may want users to register for multiplayer features.
As a developer you need to think about how much information you really need. Most web registrations require at least 3 points of information; they are email, a unique username, and a password. However in many cases, you don’t need all three of these let alone even one.
- Email: Besides password resets, and website newsletters, and message replies there’s no reason to require an email. Uniquely identify the user by an incrementing number in the database instead. If the users are expected to pass their account name to other’s in order to play together, be creative and make a unique address system.
- Username: Usernames are great as they can link a user’s online person to their posts or game. However its not necessary and just extra fluff if their just commenting or trying out the game. Let there be Anonymous Cowards. If you run an online game, then give nameless users an automatically generated name. If you want users to have a way of uniquely identifying themselves try making up an address for them, you can theme it to the game (such as: 123 fake st. for a sims game, Quadrant 78.249.34b for a space game).
- Passwords: Truth is that there are many people who only use one computer, and it’s not public. You can always set a cookie, and make a password optional for those who do use multiple computers or don’t want a cookie.
By using these suggestions, your users can spend less time figuring out usernames and passwords and will hopefully find your website more enjoyable and return later.
Vincent Prime