Getting Started
Getting started with Chelsea.js is as easy as pie.
By the end of this page, You will realise it for yourself.
We'll be going through the basic setup and making your first Chelsea.js animation.
Lets get started!
Download
First , you gotta download Chelsea.js( its super tiny ).
Get ChelseaJS from the Download page.
Reference to Chelsea.js in your code and you are good to go.
Set Element as the canvas (not to be confused with <canvas>) where you will work.
elem = document.getElementById("container");
setCanvas(elem);
Add draw function.
function draw() {
//code here
};
draw(); //calling the function
Add your first circle.
function draw(){
new circle(100,100,50,"#695fe6",1,'#fff',1);
};
draw();
Well, I understand you.
Drawing isn't cool enough , right?
Let's animate it as well.
So, add these two simple statements at the start and the end.
function draw(){
clearCanvas(); //clearing the canvas
new circle(100,100,50,"#695fe6",1,'#fff',1);
requestAnimationFrame(draw); //calls the function again to update the canavs every screen refresh
};
draw();
Doesn't look like an animation?
Well, It actually is refreshing the canvas every screen refresh. Its not visible because we arent changing anything every frame.
Lets make it look it like an animation and move your lovely circle forward.
var t=0;
function draw(){
clearCanvas(); //clearing the canvas
new circle(100,100+t/5,50,"#695fe6",1,'#fff',1); // add t/5 to the x coordinate of the circle
t++; //increment t
requestAnimationFrame(draw); //calls the function again to update the canavs every screen refresh
};
draw();
Here is a complete sample HTML page for the above lovely circle.
<html>
<head>
</head>
<body>
<div id="container" width="500>" height="500" style="background-color: #000;"></div>
<script src="chelsea.min.js"></script>
<script>
var t = 0;
elem = document.getElementById("container");
setCanvas(elem);
function draw() {
clearCanvas(); //clearing the canvas
new circle(100, 100 + t / 5, 50, "#695fe6", 1, '#fff', 1); // add t/5 to the x coordinate of the circle
t++; //increment t
requestAnimationFrame(draw); //calls the function again to update the canavs every screen refresh
};
draw();
</script>
</body>
</html>
That's it. Its that simple to make your first animation in ChelseaJS.
Well, You must be thinking, Now What?
To be frank, Possibilities are infinite.
Have some faith, Sky isn't the limit. Actually, There is no frickin' limit.
Make your own animations now and Share them with the world.
Explore some Examples to get a better idea about making better and more complex animations and art.