Starfield using KineticJS
How do I make an starfield using kineticjs?
Starfield simulation using KineticJS.. What is a starfield using kineticjs? How do you make a starfield using kineticjs? This script and codes were developed by A S P on 15 January 2023, Sunday.
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: 800px; height: 500px; 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 = 1.25;
};
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(); //console.log('Reset star'); } // set position this.kstar.setX(this.getDrawX()); this.kstar.setY(this.getDrawY()); // set color // | 0 replaces slow parseInt function var color = ((this.maxZ-this.curZ)/this.maxZ * 255) | 0; //console.log('Color: '+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('Size: '+hsize);
};
// perspective projection
// +0.5 to offset canvas auto-anti-aliasing
Star.prototype.getDrawX = function()
{ var dx = ((this.curX / this.curZ) + this.midX)+0.5; //console.log('Draw x:'+dx) return dx;
};
Star.prototype.getDrawY = function()
{ var dy = ((this.curY / this.curZ) + this.midY)+0.5; //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: 255, fillGreen: 255, fillBlue: 255 });
};
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 = 500; this.width = 800; this.depthmin = 5; this.depthmax = 15; this.heightmid = 200; this.widthmid = 200; this.speed = 0.3; // star tracking // total number of stars to add this.startotal = 500; // number of stars to add at a time this.starincrement = 50; // tracking current stars in field 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(); // add the layer to the stage this.stage.add(this.layer); this.widthmid = Math.floor(this.width/2); this.heightmid = Math.floor(this.height/2); $("#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; this.stars = []; this.layer.removeChildren(); }
};
Starfield.prototype.addStars = function()
{ var _self = this; // check if we have added all the stars required if (this.startotal <= this.stars.length) return true; console.log('adding stars: '+this.stars.length) for (var i =0; i < this.starincrement; 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); } setTimeout(function(){ _self.addStars(); }, 500);
};
Starfield.prototype.animate = function()
{ var _self = this; console.log('start'); if (this.anim) this.stop(); this.addStars(); this.anim = new Kinetic.Animation(function(frame) { for (var i = 0; i < _self.stars.length; i++) { var star = _self.stars[i]; if (!star) continue; star.move(); } }, _self.layer); this.anim.start();
};
/////////////////////////////////////////////////////////
var starfield = new Starfield();
starfield.init();
starfield.animate();
Developer | A S P |
Username | asp |
Uploaded | January 15, 2023 |
Rating | 3 |
Size | 3,512 Kb |
Views | 4,048 |
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!
Name | Size |
Scan Lines | 3,012 Kb |
Keyboard Controls | 2,294 Kb |
Color Palettes | 2,875 Kb |
Button Pulse | 2,377 Kb |
SVG Alien | 2,107 Kb |
Browser Spellchecker Testing | 3,394 Kb |
Typing Text | 1,677 Kb |
Combination Lock | 3,427 Kb |
Handlebars Script Tag | 1,694 Kb |
Paper Book with Folded Corner | 3,129 Kb |
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!
Name | Username | Size |
Tic Tac Toe | Volv | 4,862 Kb |
Css3 slide | Nakome | 3,190 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
Sass Radar | Jlong | 6,887 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Isometric css island | Xaddict | 2,950 Kb |
Super Discount | Orrinward | 3,225 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!