Friday, December 28, 2012

Sprite3D.js - Why and how?



Sprite3D.js is a free, simple, easy to use API. Sprite3D.js allows you to use Webkit and Gecko based engines to use 3D transformations; new in HTML5! I am here to discuss why you should use Sprite3D.js and where you can use it. Lets begin!



First off, what are the ways you can create 3D in browsers? Three ways: Canvas, WebGL, and Webkit transformations. Now, unfortunately, Canvas and WebGL are not designed for 3D. They are 2D only. The only reason you can make WebGL 3D is by using matrix multiplication to apply matrix transformations to pixel positions. Now, this it great; if you understand how everything works, both in the engine and the GPU. Canvas has absolutely no 3D what-so-ever. Sure, you'd think there would be, after seeing canvas.getContext("2d"), you could switch the 2d to 3d and get 3d! NOPE! This doesn't work, since nobody knows how to easily create canvas functions for 3D. However, you can draw lines and simulate 3D, but it works REALLY bad and the graphics look choppy.

So, we narrow it down to WebGL and Sprite3D.js. WebGL is powered and based on OpenGL, so you people coming from C++ probably have already seen this before. But, for those of us who don't know anything about OpenGL, this is very tough stuff. Sprite3D.js is easy to understand, and easy to get up and running. There are disadvantages to either, though. First off, WebGL is NOT very supported cross-browser and cross-platform. Only a small amount of browsers and systems can run WebGL, IF it is even enabled in the first place. Most mobile devices have this feature (chrome on Android, for example), but it is disabled. But, WebGL can support regular mesh objects from editors like Blender, and can support easy lighting. Sprite3D.js uses Webkit and Moz transformations (and will support IE 10 if IE 10 supports 3D tranformations), so the browser does all the work (if it supports HTML5, that is). Mobile devices with an HTML5 browser run this quite well. There are no need for matrix algorithms or GPU work, it just makes life easy. But, Sprite3D.js does not support mesh, just still images, so your objects have to be planes or boxes (but this can be easily fixed with sprite sheets doing a flyover of the mesh). Sprite3D.js also can't do lighting effects (but they can be simulated, thanks to a special CSS3 property).

Sprite3D.js is your best choice, based on what it can do. There are issues, but they can be very easily fixed with some code.



Now, lets talk about how easy Sprite3D.js really is. First, everything you do is in JavaScript and CSS3. CSS3 is used for styling the elements. Even though the actual elements are HTML, you define the objects easily in the JavaScript. Here is the syntax:
<DOCTYPE html>
<html>
<head>
<title>Sprite3D.js  rules!</title>
<link rel="stylesheet" type="text/css" href="objects.css" media="all" />
</head>
<body>
<script src="Sprite3D.js"></script>
<script>
//Sprite3D.js code here
//notice how the code is in the body section, instead of the head section
//this is because we need to wait for the body to load before we start to add
//elements to it
</script>
</body>
</html>
The <body> section doesn't have any HTML elements in it, Sprite3D.js takes care of that. To make a stage (where all your sprites will live), you just use the Sprite3D.stage() method:
var stage = Sprite3D.stage();
Now, to add actual object, you need a css class, to make the object look like something:
.square {
width:50px;
height:50px;
background-color:green;
}
Our first object will be a 50X50px green square. Not too exiting, but still something. Lets add our square to our stage. Put this code after the stage variable assignment:
//create our element using Sprite3D.create(class);
var square = Sprite3D.create(".square");
//add it to the stage
stage.appendChild(square);
//update the stage
stage.update();
Now, we should have a square on our screen. Lets make the box rotate, too. Put the following code directly after the last code:
setInterval(function(){
//turn it 1 degree across the x-axis, 4 degrees across the y-axis, and 1 degree across the z-axis
//and to save space, we will chain them together
square.rotateX(1).rotateY(4).rotateZ(1);
//make sure to always update, otherwise the sprite doesn't do anything
square.update();
}, 200);
Now, your square is doing an animated rotation. Browse through the Sprite3D.js code and see what other transformation methods there are, and experiment.


I have told you why Sprite3D.js is usually a better solution, and how to use it. There are a lot of ways you can use this (interactive animations, navigation bars, games, etc.). I hope you use this great tool to encourage the creators to develop it more. My next Sprite3D.js tutorial will be on lighting sprites. Any questions? Comment away!

Tuesday, September 25, 2012

Cosmos C# GUI Tutorial — Mouse Cursors

Hello again. This is another Cosmos tutorial. This one is how to use mouse input. Ill teach you about the mouse object. You need Cosmos milestone 5, but they are all basicly the same. You also need to know about the VGAScreen object, which I have a tutorial for as well. Let's get to it.
To start, create a Cosmos C# project and add this namespace:
using Cosmos.Hardware;
Now add these class level variables:
VGASceen screen;
Mouse mouse;

Now, Cosmos gave us some Console code. Thats cool, but not sorta what we want. So, in the BeforeRun and Run methods, remove all code inside them (all the code inside the { }'s). Awesome! Now lets get our VGAScreen setup. Put this code inside the BeforeRun method:
screen = new VGAScreen();
screen.SetMode320x200x8();
screen.Clear(15);

Yay! But our mouse variable isnt set, so lets set it. We also need to initialize it. Add this code to the end of the BeforeRun method:
mouse = new Mouse();
mouse.Initialize();
while(true){
Run();
}

Okay, yes, the while loop isnt really needed, since Cosmos already loops the Run loop, but i found its a little faster by looping it yourself. Add this code to the Run method:
screen.SetPixel320x200x8((uint)mouse.X, (uint)mouse.Y, 0);
So, now debug it. You have a cursor, right? Cool! Okay, yeah its cool for a minute, but you might be thinking why the mouse isnt a cursor, its a crappy paint brush! Well, think about it. We are just setting the mouse "cursor" as a pixel. And pixels dont do anything until you set them. Right now we dont want a paint OS, we want a cursor! Add these class level variables:
uint lastX = 0;
uint lastY = 0;

And replace all the code in the Run loop with:
screen.SetPixel320x200x8(lastX, lastY, 15);
lastX = (uint)mouse.X;
lastY = (uint)mouse.Y;
screen.SetPixel320x200x8((uint)mouse.X, (uint)mouse.Y, 0);

Now debug it! You have a mouse cursor! But, if you have a different color pixel underneath the mouse, it will change it to the color 15. And it probably wont look too good. Lets fix that! Add this class level variable:
uint lastColor = 15;
Now replace all the code in the Run method with:
screen.SetPixel320x200x8(lastX, lastY, lastColor);
lastX = (uint)mouse.X;
lastY = (uint)mouse.Y;
lastColor = screen.GetPixel320x200x8((uint)mouse.X, (uint)mouse.Y);
screen.SetPixel((uint)mouse.X, (uint)mouse.Y, 0);

And that will fix it. Thats a pretty sexy cursor, right? Well, sorta. I made a cursor and mine looks kinda like this:
XXX
XX
X

A X represents a pixel. Its looks soooooo cool, but it has a lot of code. Thats because each pixel has to have a value of the color behind it. I had a color array, then used a switch statement to reset the background pixels, use another switch statement to get the background color, set the mouse cursor pixels, and repeat. It takes a while, but it works perfectly, and looks a ton better than a single pixel. And if you think mine was confusing, just think of what Windows, Mac, Linux, or any other operating system has to do for their cursor. In X's, theirs looks kinda like this:
X
XX
XXX
XXXX
XXXXX
XXXXXX
XXXXXXX
XXXXXXXX
XXXX
XXXX
XXXX
For now, though, just stick with your pixel mouse.

Thanks for reading this! My next tutorial is advanced mouse methods (we make a paint OS. YAY!) and lines. I am currently messing around with Bitmap and SPF image formats, too. Comment if you need help.

Some people requested to see my code, so fix the errors they were getting. I changed my mistakes in my above code. Here is the code I used:
using System;
using System.Collections.Generic;
using System.Text;
using Sys = Cosmos.System;
using Cosmos.Hardware;
//using Raw;

namespace Datacore_Raw
{
    public class Kernel : Sys.Kernel
    {
        VGAScreen screen;
        Mouse mouse;
        uint lastX = 0;
        uint lastY = 0;
        uint lastColor = 15; 

        protected override void BeforeRun()
        {
            screen = new VGAScreen();
            screen.SetMode320x200x8();
            screen.Clear(15);
            mouse = new Mouse();
            mouse.Initialize();
            while (true)
            {
                Run();
            } 
        }

        protected override void Run()
        {
            screen.SetPixel320x200x8(lastX, lastY, lastColor);
            lastX = (uint)mouse.X;
            lastY = (uint)mouse.Y;
            lastColor = screen.GetPixel320x200x8((uint)mouse.X, (uint)mouse.Y);
            screen.SetPixel((uint)mouse.X, (uint)mouse.Y, 0); 
        }
    }
}

Monday, July 16, 2012

Cosmos C# GUI tutorial — VGA and rectangles

Everybody wants a GUI in Cosmos. It makes your OS more interesting. It is possible, but it is really hard to make good graphics. This tutorial will get you started with a simple GUI that draws a single pixel and a rectangle. This tutorial assumes that you are using milestone 5 of Cosmos. Other milestones are similar to making a GUI. Let's get started!
To begin with, a GUI in Cosmos is just setting the color of pixels in the text console. Cosmos uses VGA for setting pixels. Its format is 256 color (numbers 0-255). This is all handeled by an object called VGAScreen. Now enough with the lecturing, let's begin. The VGAScreen object is in the hardware Cosmos namespace. So, add this namespace to the top of your Kernel.cs:
using Cosmos.Hardware;
Now our code is a tiny bit cleaner later on. Since VGAScreen is an object, we need a variable. Add this class level variable for our VGA screen to live in:
VGAScreen screen;
As soon as we initialoze our new variable, we are ready to go. Add this code to the BeforeRun() method of Kernel.cs:
screen = new VGAScreen();
screen.SetMode320x200x8();
screen.Clear(15);

The method SetMode320x200x8() initializes the computer for graphics. The Clear(uint c) method clears the entier screen to the color (c) that you want. 15 is supposed to be white, but it ends up to be light blue. If you want black, black is 0.
That is a super super super basic GUI, but usually you want shapes to make graphics. To start off, ill teach you how to make a rectangle. A rectangle is the easiest shape to make, so let's get started. Our screen variable has a functon called SetPixel320x200x8(uint x, uint y, uint c). If you can't guess, it sets the pixel at x and y to the color c. This is where all the magic happens. Let's try setting a pixel at (10, 6) with a color of light green. Put this code inside the Run() method:
screen.SetPixel320x200x8(10, 6, 16);
When you debug the code, the pixel we told to change green changed to green! Now that we know how to change the color of a pixel, we can work on drawing a rectangle. Add this method to Kernel.cs:
public void drawRect(uint x, uint y, uint length, uint height, uint c)
{
for(int l = 1;l<=length;l++)
{
for(int h=1;h<=height;h++)
{
screen.SetPixel320x200x8(x+l, y+h, c);
}
}
}

This code is saying, "for every collum, draw a row". It looks weird, but it works. Now lets draw a rectangle. Add this code to the Run() method in Kernel.cs:
drawRect(5, 5, 50, 50, 16);
Debug it and you have a rectangle!!
That's it for this tutorial. Ill make another tutorial for making a mouse cursor. I decided to make this because i noticed that nobody else has made one. Youd better thank me, because I had no help with figuring all this out. You an leave comments if you have any questions.
Check out my latest tutorial on Mouse cursors.

Thursday, June 28, 2012

Welcome!

Welcome to my awesome blog! I've never had a blog before, so I guess this is a learning experience for me. Anyway, let's get down to buisness. I am a teenager, I started programming when I was 11, my favorite color is green, my idol is Steve Jobs (even though he is dead), my "company" is Macrobit, I do math for fun, I love building electronics, I strongly dislike Minecraft (because they stupidly made it in Java), I want a Macintosh, I try to help people on Stack Overflow, I love Call of Duty, and I dream to be the worlds first trillionare. Try saying that in one breath! Now, let's see. Who loves the programming language C#? I love it. Its my most favorite language of all languages. I love it so much that i am going to build an OS in it. Yes, a real, comercial OS, made with C# with a little help from the Cosmos developers. Thanks, you guys! It will take years, with probably over a billion lines of code. You just wait untill it is just as popular as Windows. Speaking of that, my ULTIMATE dream is to buy out Microsoft. HA! Like that is going to happen. Maybe at least something smaller, like Oracle or Autodesk or DigiPen. I'm a BIG dreamer, as you can tell...