Particles with pixi.js

Developer
Keegan Brown
Size
2,963 Kb
Views
26,312
  1. Particles with pixi.js Previews
  2. Particles with pixi.js HTML Codes
  3. Particles with pixi.js CSS Codes
  4. Particles with pixi.js JS Codes

How do I make an particles with pixi.js?

What is a particles with pixi.js? How do you make a particles with pixi.js? This script and codes were developed by Keegan Brown on 16 October 2022, Sunday.

Particles with pixi.js Previews
IQ Test

Particles with pixi.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Particles with pixi.js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div id="container"></div> <script src="js/index.js"></script>
</body>
</html>

Particles with pixi.js - Script Codes CSS Codes

html,body{ margin:0; padding:0; min-height: 1000px; height:100%; width:100%;
}
#container, #container canvas { margin:0; padding:0; height:100%; width:100%; display:block;
}

Particles with pixi.js - Script Codes JS Codes

$(window).load( function () { var mainw = $("#container").width(), mainh = $("#container").height(), mousex = Math.floor(mainw/2), mousey = Math.floor(mainh/2); $("#container").on("mousemove", function (e) { mousex = e.pageX; mousey = e.pageY; }); //asdfasdf	var stage = new PIXI.Stage();	var renderer = PIXI.autoDetectRenderer( mainw, mainh, {clearBeforeRender: false, preserveDrawingBuffer: true, backgroundColor : 0xFFFFFF} );	var world = []; renderer.view.style.display = "block";	// add render view to DOM	$("#container").append(renderer.view);	function randomNumber(min, max) { return Math.floor(Math.random() * (1 + max - min) + min);	}	function Particle ( config, seed, stage ) { this.config = config;	this.x = config.x;	this.y = config.y; this.seed = seed;	this.radius = config.radius;	this.color = config.color;	this.graphics = initGraphics( stage, this );	this.tween = addParticleTween(this, seed, 1);	} Particle.prototype.draw = function () { this.graphics.x = this.x; this.graphics.y = this.y; var rgb = this.color.b | (this.color.g << 8) | (this.color.r << 16); this.graphics.beginFill( rgb, this.color.a ); this.graphics.drawCircle( 0, 0, this.radius ); this.graphics.endFill(); this.graphics.cacheAsBitmap = true; //console.log(this.graphics.x); } function initGraphics ( stage, _self ) { var _graphics = new PIXI.Graphics(); var rgb = _self.color.b | (_self.color.g << 8) | (_self.color.r << 16); _graphics.beginFill( rgb, _self.color.a ); _graphics.drawCircle( 0, 0, _self.radius ); _graphics.endFill(); _graphics.cacheAsBitmap = true; stage.addChild(_graphics); return _graphics; }	function generateParticles (stage) {	for (i = 0; i < 1000; i++) { var radius = Math.ceil(Math.random() * 7); var _p = new Particle({ x: randomNumber(0, mainw), y: randomNumber(0, mainh), radius: radius, color: { r: randomNumber(0, 140), g: randomNumber(100, 198), b: randomNumber(100, 255), a: ((Math.random()*0.3)+0.7) } }, i, stage);	world.push(_p);	}	}	function addParticleTween ( _self, seed, dir ) {	var _x = mousex; var _y = mousey; var _a = 1; var _ease = Power1.easeIn; if ( dir < 0 ) { _ease = Power1.easeOut; _x = _self.config.x; _y = _self.config.y; _a = 0.2; } else { //var _angle = getAngleVector( Math.random(), 10 ); _self.config.x = _self.x+((Math.random()*100)-50);	_self.config.y = _self.y+((Math.random()*100)-50); }	TweenMax.to( _self, 1, { delay: seed*0.001, x: _x, y: _y, fillAlpha: _a, ease: _ease, onComplete: addParticleTween, onCompleteParams: [ _self, seed, dir*-1 ] } );	} function getAngleVector (angle, dist) { var _y = Math.sin(angle) * dist; var _x = Math.cos(angle) * dist; return [_x, _y]; }	TweenLite.ticker.addEventListener("tick", go); var test = 0; function go() { for ( var i = 0, len = world.length; i < len; i++ ) { world[i].draw(); } if ( test < 10 ) {	console.log( world[0] ); test++; } renderer.render(stage); } generateParticles(stage);
});
Particles with pixi.js - Script Codes
Particles with pixi.js - Script Codes
Home Page Home
Developer Keegan Brown
Username keeganbrown
Uploaded October 16, 2022
Rating 3
Size 2,963 Kb
Views 26,312
Do you need developer help for Particles with pixi.js?

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!

Keegan Brown (keeganbrown) Script Codes
Name
A CSS Trip through outer space
Particles with GSAP and SketchJS
Paint drips up the wall, sometimes.
Easy-peasy 3D Scrolling Parallax with GSAP
Text With Mouse Reactive Soft Shadow
Meteor Shower
Brute Force Random Traveling Salesman solver
GreenSock SplitText Contest Entry
Trying out GSAP 1.19
Reddit Fixed Position Image Scroller
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!