Create a stars background with Kinetic.js

stars_tutorial.js

//1. Create the app object to have easy access to all variables.

var app = {

};

//2. Add an initialize function to our app objects to have it called when the document is ready and create origin variables

var app = {
  // add initialize method to our app
	initialize: function() {
		// create an origin point or where we begin making all elements
		app.origin_x = 0;
		app.origin_y = 0;
	}
};

//3. Inside the initialize method assign document.width/length to variables and create a Kinetic stage and 2 layers(or canvas).

var app = {
  // add initialize method to our app
	initialize: function() {
		// create an origin point or where we begin making all elements
		app.origin_x = 0;
		app.origin_y = 0;
	  // get the document dimensions
	  app.width = document.width;
		app.height = document.height;
    // create Kinetic Stage using document dimensions
		app.stage = new Kinetic.Stage({
			container: 'main_container',
			width: app.width,
			height: app.height
		});
		// create 2 Kinetic layers and add them to app.layers
		app.layers.space = new Kinetic.Layer();
		app.layers.stars = new Kinetic.Layer();

	}
};

//3. Create a layers object inside app so that we can find our layers(don't forget the comma after the initialize method)

var app = {
  // add initialize method to our app
	initialize: function() {
		// create an origin point or where we begin making all elements
		app.origin_x = 0;
		app.origin_y = 0;
	  // get the document dimensions
	  app.width = document.width;
		app.height = document.height;
    // create Kinetic Stage using document dimensions
		app.stage = new Kinetic.Stage({
			container: 'main_container',
			width: app.width,
			height: app.height
		});
		// create 2 Kinetic layers and add them to app.layers
		app.layers.space = new Kinetic.Layer();
		app.layers.stars = new Kinetic.Layer();
	},
	// add a layers object for reference
	layers: {}
};

//4. Create a document ready function that will initialize our app on document ready

var app = {
  // add initialize method to our app
	initialize: function() {
		// create an origin point or where we begin making all elements
		app.origin_x = 0;
		app.origin_y = 0;
	  // get the document dimensions
	  app.width = document.width;
		app.height = document.height;
    // create Kinetic Stage using document dimensions
		app.stage = new Kinetic.Stage({
			container: 'main_container',
			width: app.width,
			height: app.height
		});
		// create 2 Kinetic layers and add them to app.layers
		app.layers.space = new Kinetic.Layer();
		app.layers.stars = new Kinetic.Layer();
	},
	// add a layers object for reference
	layers: {},
	
};
// document ready to call app.initialize
$(function(){
	app.initialize();
});

//5. Add a create object to our app with a create method(or function). This method will create a black Kinetic rectangle element and fill the whole page.

var app = {
  // add initialize method to our app
	initialize: function() {
		// create an origin point or where we begin making all elements
		app.origin_x = 0;
		app.origin_y = 0;
	  // get the document dimensions
	  app.width = document.width;
		app.height = document.height;
    // create Kinetic Stage using document dimensions
		app.stage = new Kinetic.Stage({
			container: 'main_container',
			width: app.width,
			height: app.height
		});
		// create 2 Kinetic layers and add them to app.layers
		app.layers.space = new Kinetic.Layer();
		app.layers.stars = new Kinetic.Layer();
	},
	// add a layers object for reference
	layers: {},
	// create a create object with a space method. Get it? create space?
	create: {
		space: function(){
			var rect = new Kinetic.Rect({
				// give our rectangle some built-in Kinetic properties
				x: app.origin_x,
				y: app.origin_y,
				width: app.width,
				height: app.height,
				fill: 'black'
			});
			// add the rectangle to the space layer
			app.layers.space.add(rect);
			// then add the space layer to the stage
			app.stage.add(app.layers.space);
		}
	}
};
// document ready to call app.initialize
$(function(){
	app.initialize();
});

//6. Add our app.create.space function to the initialize method to run it on document ready 

var app = {
  // add initialize method to our app
	initialize: function() {
		// create an origin point or where we begin making all elements
		app.origin_x = 0;
		app.origin_y = 0;
	  // get the document dimensions
	  app.width = document.width;
		app.height = document.height;
    // create Kinetic Stage using document dimensions
		app.stage = new Kinetic.Stage({
			container: 'main_container',
			width: app.width,
			height: app.height
		});
		// create 2 Kinetic layers and add them to app.layers
		app.layers.space = new Kinetic.Layer();
		app.layers.stars = new Kinetic.Layer();

		app.create.space();
	},
	// add a layers object for reference
	layers: {},
	// create object for constructing kinetic elements
	create: {
		space: function(){
			var rect = new Kinetic.Rect({
				// give our rectangle some built-in Kinetic properties
				x: app.origin_x,
				y: app.origin_y,
				width: app.width,
				height: app.height,
				fill: 'black'
			});

			// add the rectangle to the space layer
			app.layers.space.add(rect);
			// then add the space layer to the stage
			app.stage.add(app.layers.space);
		}
	}

};
// document ready to call app.initialize
$(function(){
	app.initialize();
});

//7. Create the stars method inside the create object and add app.create.stars method(or function) to initialize method

var app = {
  // add initialize method to our app
	initialize: function() {
		// create an origin point or where we begin making all elements
		app.origin_x = 0;
		app.origin_y = 0;
	  // get the document dimensions
	  app.width = document.width;
		app.height = document.height;
    // create Kinetic Stage using document dimensions
		app.stage = new Kinetic.Stage({
			container: 'main_container',
			width: app.width,
			height: app.height
		});
		// create 2 Kinetic layers and add them to app.layers
		app.layers.space = new Kinetic.Layer();
		app.layers.stars = new Kinetic.Layer();

		app.create.space();
		app.create.stars(1000);
	},
	// add a layers object for reference
	layers: {},
	// create object for constructing kinetic elements
	create: {
		space: function(){
			var rect = new Kinetic.Rect({
				// give our rectangle some built-in Kinetic properties
				x: app.origin_x,
				y: app.origin_y,
				width: app.width,
				height: app.height,
				fill: 'black'
			});

			// add the rectangle to the space layer
			app.layers.space.add(rect);
			// then add the space layer to the stage
			app.stage.add(app.layers.space);
		},
		// stars method has a num argument which is how many stars we want to create
		stars: function(num){
			// create a bunch of stars using a for loop
			for (var i = 0; i < num; i++){
				var star = new Kinetic.Circle({
					x: Math.round(Math.random() * app.width),
					y: Math.round(Math.random() * app.height),
					radius: Math.ceil(Math.random()*10) / 5,
					fill: 'white',
					opacity: Math.ceil(Math.random()*10) / 10
				});
				// add the star to the stars layer
				app.layers.stars.add(star);
			}
			// add the space layer to the stage
				app.stage.add(app.layers.stars);
		}
	}

};
// document ready to call app.initialize
$(function(){
	app.initialize();
});

//8. Now we want to rotate the stars around themselves. This is where it gets a little tricky. First we need set the rotational //axis in the middle of the stars layer instead of the default origin inside the initialize

var app = {
  // add initialize method to our app
	initialize: function() {
		// create an origin point or where we begin making all elements
		app.origin_x = 0;
		app.origin_y = 0;
	  // get the document dimensions
	  app.width = document.width;
		app.height = document.height;
    // create Kinetic Stage using document dimensions
		app.stage = new Kinetic.Stage({
			container: 'main_container',
			width: app.width,
			height: app.height
		});
		// create 2 Kinetic layers and add them to app.layers
		app.layers.space = new Kinetic.Layer();
		app.layers.stars = new Kinetic.Layer();
		// change stars rotational axis to the center of the layer
		app.layers.stars.setPosition(app.width/2, app.height/2);
		app.layers.stars.setOffset(app.width/2, app.height/2);

		app.create.space();
		app.create.stars(1000);
	},
	// add a layers object for reference
	layers: {},
	// create object for constructing kinetic elements
	create: {
		space: function(){
			var rect = new Kinetic.Rect({
				// give our rectangle some built-in Kinetic properties
				x: app.origin_x,
				y: app.origin_y,
				width: app.width,
				height: app.height,
				fill: 'black'
			});

			// add the rectangle to the space layer
			app.layers.space.add(rect);
			// then add the space layer to the stage
			app.stage.add(app.layers.space);
		},
		// stars method has a num argument which is how many stars we want to create
		stars: function(num){
			// create a bunch of stars using a for loop
			for (var i = 0; i < num; i++){
				var star = new Kinetic.Circle({
					x: Math.round(Math.random() * app.width),
					y: Math.round(Math.random() * app.height),
					radius: Math.ceil(Math.random()*10) / 5,
					fill: 'white',
					opacity: Math.ceil(Math.random()*10) / 10
				});
				// add the star to the stars layer
				app.layers.stars.add(star);
			}
			// add the space layer to the stage
				app.stage.add(app.layers.stars);
		}
	}

};
// document ready to call app.initialize
$(function(){
	app.initialize();
});


// 9. If we try rotating the stars layer now, you will see that blank space on the side because our stars layer is a rectangle. // We need to turn it into a square and make it long enough to not have any blank space on the sides. The most efficient way to // to this is to calculate the diagonal of our document. If our stars layer's width and height equal to the diagonal it will // // cover the screen at all times during its rotation. So here is one way we can get the diagonal inside the initialize method.

var app = {
  // add initialize method to our app
	initialize: function() {
	  // create an origin point or where we begin making all elements
	  app.origin_x = 0;
	  app.origin_y = 0;
	  // get the document dimensions
	  app.width = document.width;
	  app.height = document.height;
          // get the diagonal length. A^2 + B^2 = C^2, finally we get to use this formula for something useful.
	  app.diagonal = Math.sqrt((app.width*app.width) + (app.height*app.height));
    // create Kinetic Stage using document dimensions
		app.stage = new Kinetic.Stage({
			container: 'main_container',
			width: app.width,
			height: app.height
		});
		// create 2 Kinetic layers and add them to app.layers
		app.layers.space = new Kinetic.Layer();
		app.layers.stars = new Kinetic.Layer();
		// change stars rotational axis to the center of the layer
		app.layers.stars.setPosition(app.width/2, app.height/2);
		app.layers.stars.setOffset(app.width/2, app.height/2);

		app.create.space();
		app.create.stars(1000);
	},
	// add a layers object for reference
	layers: {},
	// create object for constructing kinetic elements
	create: {
		space: function(){
			var rect = new Kinetic.Rect({
				// give our rectangle some built-in Kinetic properties
				x: app.origin_x,
				y: app.origin_y,
				width: app.width,
				height: app.height,
				fill: 'black'
			});

			// add the rectangle to the space layer
			app.layers.space.add(rect);
			// then add the space layer to the stage
			app.stage.add(app.layers.space);
		},
		// stars method has a num argument which is how many stars we want to create
		stars: function(num){
			// create a bunch of stars using a for loop
			for (var i = 0; i < num; i++){
				var star = new Kinetic.Circle({
					x: Math.round(Math.random() * app.width),
					y: Math.round(Math.random() * app.height),
					radius: Math.ceil(Math.random()*10) / 5,
					fill: 'white',
					opacity: Math.ceil(Math.random()*10) / 10
				});
				// add the star to the stars layer
				app.layers.stars.add(star);
			}
			// add the space layer to the stage
				app.stage.add(app.layers.stars);
		}
	}

};
// document ready to call app.initialize
$(function(){
	app.initialize();
});

// 10. Now we need to spread the stars around the layer if it were a square with a side length of a diagonal, we do this in the app.create.stars // method

var app = {
  // add initialize method to our app
	initialize: function() {
	  // create an origin point or where we begin making all elements
	  app.origin_x = 0;
	  app.origin_y = 0;
	  // get the document dimensions
	  app.width = document.width;
	  app.height = document.height;
    // get the diagonal length. A^2 + B^2 = C^2, finally we get to use this formula for something real.
	  app.diagonal = Math.sqrt((app.width*app.width) + (app.height*app.height));
    // create Kinetic Stage using document dimensions
	  app.stage = new Kinetic.Stage({
			container: 'main_container',
			width: app.width,
			height: app.height
		});
		// create 2 Kinetic layers and add them to app.layers
		app.layers.space = new Kinetic.Layer();
		app.layers.stars = new Kinetic.Layer();
		// change stars rotational axis to the center of the layer
		app.layers.stars.setPosition(app.width/2, app.height/2);
		app.layers.stars.setOffset(app.width/2, app.height/2);

		app.create.space();
		app.create.stars(1000);
	},
	// add a layers object for reference
	layers: {},
	// create object for constructing kinetic elements
	create: {
		space: function(){
			var rect = new Kinetic.Rect({
				// give our rectangle some built-in Kinetic properties
				x: app.origin_x,
				y: app.origin_y,
				width: app.width,
				height: app.height,
				fill: 'black'
			});

			// add the rectangle to the space layer
			app.layers.space.add(rect);
			// then add the space layer to the stage
			app.stage.add(app.layers.space);
		},
		// stars method has a num argument which is how many stars we want to create
		stars: function(num){
			// create a bunch of stars using a for loop
			for (var i = 0; i < num; i++){
				var star = new Kinetic.Circle({
					x: Math.round((Math.random() * (app.diagonal)) - ((app.diagonal - app.width)/2)),
					y: Math.round((Math.random() * (app.diagonal)) - ((app.diagonal - app.height)/2)),
					radius: Math.ceil(Math.random()*10) / 5,
					fill: 'white',
					opacity: Math.ceil(Math.random()*10) / 10
				});
				// add the star to the stars layer
				app.layers.stars.add(star);
			}
			// add the space layer to the stage
				app.stage.add(app.layers.stars);
		}
	}

};
// document ready to call app.initialize
$(function(){
	app.initialize();
});

// 11. Now we just need to through in Kinetic's animate function into window onload and we're done.

var app = {
  // add initialize method to our app
	initialize: function() {
		// create an origin point or where we begin making all elements
		app.origin_x = 0;
		app.origin_y = 0;
	  // get the document dimensions
	  app.width = document.width;
		app.height = document.height;
		// get the diagonal length. A^2 + B^2 = C^2, finally we get to use this formula for something real.
		app.diagonal = Math.sqrt((app.width*app.width) + (app.height*app.height));
    // create Kinetic Stage using document dimensions
		app.stage = new Kinetic.Stage({
			container: 'main_container',
			width: app.width,
			height: app.height
		});
		// create 2 Kinetic layers and add them to app.layers
		app.layers.space = new Kinetic.Layer();
		app.layers.stars = new Kinetic.Layer();
		// change stars rotational axis to the center of the layer
		app.layers.stars.setPosition(app.width/2, app.height/2);
		app.layers.stars.setOffset(app.width/2, app.height/2);

		app.create.space();
		app.create.stars(1000);
	},
	// add a layers object for reference
	layers: {},
	// create object for constructing kinetic elements
	create: {
		space: function(){
			var rect = new Kinetic.Rect({
				// give our rectangle some built-in Kinetic properties
				x: app.origin_x,
				y: app.origin_y,
				width: app.width,
				height: app.height,
				fill: 'black'
			});

			// add the rectangle to the space layer
			app.layers.space.add(rect);
			// then add the space layer to the stage
			app.stage.add(app.layers.space);
		},
		// stars method has a num argument which is how many stars we want to create
		stars: function(num){
			// create a bunch of stars using a for loop
			for (var i = 0; i < num; i++){
				var star = new Kinetic.Circle({
					x: Math.round((Math.random() * (app.diagonal)) - ((app.diagonal - app.width)/2)),
					y: Math.round((Math.random() * (app.diagonal)) - ((app.diagonal - app.height)/2)),
					radius: Math.ceil(Math.random()*10) / 5,
					fill: 'white',
					opacity: Math.ceil(Math.random()*10) / 10
				});
				// add the star to the stars layer
				app.layers.stars.add(star);
			}
			// add the space layer to the stage
				app.stage.add(app.layers.stars);
		}
	}

};
// document ready to call app.initialize
$(function(){
	app.initialize();
	// Kinetic's animate function
	var anim = new Kinetic.Animation(function(frame) {
		app.layers.stars.rotateDeg(0.1);
		app.layers.stars.draw();
	});
	anim.start();
});

awesome!