Starfield using KineticJS

Developer
Jeff Daze
Size
3,290 Kb
Views
8,096
  1. Starfield using KineticJS Previews
  2. Starfield using KineticJS HTML Codes
  3. Starfield using KineticJS CSS Codes
  4. Starfield using KineticJS JS Codes

How do I make an starfield using kineticjs?

What is a starfield using kineticjs? How do you make a starfield using kineticjs? This script and codes were developed by Jeff Daze on 18 January 2023, Wednesday.

Starfield using KineticJS Previews
IQ Test

Starfield using KineticJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Starfield using KineticJS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container" class="centered"></div>
<div id="buttonContainer" class="centered"> <input type="button" id="start" value="Start" /> <input type="button" id="stop" value="Stop" />
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.1/kinetic.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Starfield using KineticJS - Script Codes CSS Codes

#container
{ width: 1000px; height: 800px; border: 0px solid #00f; padding: 0px; box-shadow: 10px 10px 5px #888888; margin-top: 10px; background-color: #000;
}
#buttonContainer
{ text-align: center; margin-top: 15px;
}
.centered
{ margin-right: auto; margin-left: auto;
}

Starfield using KineticJS - Script Codes JS Codes

function Utils()
{
}
Utils.prototype.getRand = function(min, max)
{	return Math.floor(Math.random() * (max - min + 1)) + min;
};
var utils = new Utils();
/////////////////////////////////////////////////////////////
function Star() { this.maxX = 800; this.maxY = 800; this.maxZ = 10; this.minX = -800; this.minY = -800; this.minZ = 1; this.midX = 200; this.midY = 200; this.kstar = false; this.speed = 0.3; // the lower the bigger, not 0 this.starSize = 2;
};
Star.prototype.init = function(params)
{ for(var key in params) { if (typeof this[key] !== 'undefined') this[key] = params[key]; } this.setPos(); this.createKStar();
};
// randomly choose x, y, z coords
Star.prototype.setPos = function()
{ this.curX = utils.getRand(this.minX, this.maxX); this.curY = utils.getRand(this.minY, this.maxY); this.curZ = utils.getRand(this.minZ, this.maxZ); //console.log(this.toString());
};
Star.prototype.move = function()
{ this.curZ -= this.speed; // reached destination, clear for now if (this.curZ <= 0) { this.setPos(); } // set position this.kstar.setX(this.getDrawX()); this.kstar.setY(this.getDrawY()); // set color var color = parseInt((this.maxZ-this.curZ)/this.maxZ * 255); //console.log(color); this.kstar.fillRed(color); this.kstar.fillGreen(color); this.kstar.fillBlue(color); // set opacity var opacity = Math.round((this.maxZ-this.curZ)/this.maxZ*100)/100; this.kstar.fillAlpha(opacity); // set size var hsize = Math.round((this.maxZ-this.curZ)/this.maxZ*100/(this.maxZ*this.starSize)); this.kstar.height(hsize); this.kstar.width(hsize); //console.log(hsize);
};
// perspective projection
Star.prototype.getDrawX = function()
{ var dx = parseInt((this.curX / this.curZ) + this.midX); //console.log('Draw x:'+dx) return dx;
};
Star.prototype.getDrawY = function()
{ var dy = parseInt((this.curY / this.curZ) + this.midY); //console.log('Draw y:'+dy) return dy;
};
Star.prototype.createKStar = function()
{ this.kstar = new Kinetic.Circle({ x: this.getDrawX(), y: this.getDrawY(), width: 1, height: 1, fillRed: 1, fillGreen: 1, fillBlue: 1 });
};
Star.prototype.getKStar = function()
{ return this.kstar;
}
Star.prototype.toString = function()
{ return "Current x: "+this.curX+" y: "+this.curY+" z: "+this.curZ " Speed: "+this.speed;
};
////////////////////////////////////////////////////
function Starfield()
{ // work space area this.height = 800; this.width = 1000; this.depthmin = 1; this.depthmax = 10; this.heightmid = 200; this.widthmid = 200; this.speed = 0.1; // star tracking this.starcnt = 500; this.stars = []; // Kinetic objects this.stage = null; this.layer = null; this.anim = null;
};
// kineticJS info:
// stroke half within the item width, half outside
// odd stroke number results in anti-aliasing round up size
// item can run off screen
Starfield.prototype.init = function(params)
{ var _self = this; // add params that we already defined for(var key in params) { if (typeof this[key] !== 'undefined') this[key] = params[key]; } this.stars = []; this.stage = new Kinetic.Stage({ container: 'container', width: this.width, height: this.height }); this.layer = new Kinetic.Layer(); this.widthmid = Math.floor(this.width/2); this.heightmid = Math.floor(this.height/2); this.addStars(); $("#stop").click(function(){ _self.stop(); }); $("#start").click(function(){ _self.animate(); });
};
Starfield.prototype.stop = function()
{ if (this.anim) { console.log('stop'); this.anim.stop(); this.anim = false; }
};
Starfield.prototype.addStars = function()
{ for (var i =0; i < this.starcnt; i++) { var star = new Star(); star.init({ midX: this.widthmid, midY: this.heightmid, maxX: this.width*2, minX: -(this.width*2), maxY: this.height*2, minY: -(this.height*2), minZ: this.depthmin, maxZ: this.depthmax, speed: this.speed }); var kstar = star.getKStar(); this.layer.add(kstar); this.stars.push(star); } // add the layer to the stage this.stage.add(this.layer);
};
Starfield.prototype.animate = function()
{ var _self = this; if (this.anim) this.stop(); console.log('start'); this.anim = new Kinetic.Animation(function(frame) { //console.log('here: '+_self.starcnt); for (var i = 0; i < _self.starcnt; i++) { var star = _self.stars[i]; if (!star) continue; //console.log(star.toString()); star.move(); } }, _self.layer); this.anim.start();
};
/////////////////////////////////////////////////////////
var starfield = new Starfield();
starfield.init();
starfield.animate();
Starfield using KineticJS - Script Codes
Starfield using KineticJS - Script Codes
Home Page Home
Developer Jeff Daze
Username jeffdaze
Uploaded January 18, 2023
Rating 3
Size 3,290 Kb
Views 8,096
Do you need developer help for Starfield using KineticJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Daze (jeffdaze) Script Codes
Name
Circular Drag and Drop
Speed Reading
Attempt to implement diamond square algorithm
Angular Drag Example
Quick torus demo three.js
Pulsing Button
A Pen by Jeff Daze
Winter Scene
Tilemap Edge CSS
Transparent Gradient
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!