127 lines
3.8 KiB
JavaScript
127 lines
3.8 KiB
JavaScript
var app, graphics, container;
|
||
var mousedown = false, bubbles = [];
|
||
var displacementSprite, displacementFilter;
|
||
function init() {
|
||
app = new PIXI.Application({
|
||
width: window.innerWidth,
|
||
height: window.innerHeight,
|
||
backgroundColor: 0x000,
|
||
resizeTo: window,
|
||
antialias: true
|
||
});
|
||
container = new PIXI.Container();
|
||
graphics = new PIXI.Graphics();
|
||
app.stage.addChild(graphics);
|
||
app.stage.addChild(container);
|
||
|
||
document.body.appendChild(app.view);
|
||
for (var i = 0; i < 300; i++) {
|
||
var bubble = new Bubble({
|
||
x: Math.random() * app.screen.width,
|
||
y: Math.random() * app.screen.height
|
||
});
|
||
container.addChild(bubble.sprite);
|
||
bubbles.push(bubble);
|
||
}
|
||
displacement();
|
||
addEvents();
|
||
}
|
||
|
||
function addEvents() {
|
||
document.addEventListener("mousedown", function(e) {
|
||
mousedown = true;
|
||
});
|
||
document.addEventListener("mouseup", function(e) {
|
||
mousedown = false;
|
||
});
|
||
document.addEventListener("mousemove", function(e) {
|
||
if (!mousedown) return false;
|
||
var bubble = new Bubble({
|
||
x: e.clientX,
|
||
y: e.clientY
|
||
});
|
||
container.addChild(bubble.sprite);
|
||
bubbles.push(bubble);
|
||
}, false);
|
||
}
|
||
|
||
function displacement() {
|
||
displacementSprite = PIXI.Sprite.from('https://res.cloudinary.com/dvxikybyi/image/upload/v1486634113/2yYayZk_vqsyzx.png');
|
||
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
|
||
displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
|
||
displacementFilter.padding = 0;
|
||
|
||
displacementSprite.position = container.position;
|
||
|
||
app.stage.addChild(displacementSprite);
|
||
|
||
container.filters = [displacementFilter];
|
||
|
||
displacementFilter.scale.x = 50;
|
||
displacementFilter.scale.y = 50;
|
||
}
|
||
|
||
function animate() {
|
||
requestAnimationFrame(animate);
|
||
render();
|
||
}
|
||
|
||
function removeBubble(_bubble) {
|
||
var index = bubbles.indexOf(_bubble);
|
||
bubbles.splice(index, 1);
|
||
container.removeChildren(index, index+1);
|
||
}
|
||
|
||
function render() {
|
||
for (var i = 0; i < bubbles.length; i++) {
|
||
var bubble = bubbles[i];
|
||
if (bubble.isDead()) removeBubble(bubble);
|
||
else bubble.draw(graphics);
|
||
}
|
||
displacementSprite.x++;
|
||
if (displacementSprite.x > displacementSprite.width) {
|
||
displacementSprite.x = 0;
|
||
}
|
||
}
|
||
|
||
var Bubble = function(args) {
|
||
if (args === undefined) args = {};
|
||
this.sprite = PIXI.Sprite.from('https://res.cloudinary.com/losrodriguez/image/upload/v1566328006/black_bubble_g9jolh.png');
|
||
this.position = new Vector(args.x, args.y);
|
||
this.init = function() {
|
||
this.velocity = new Vector(Math.random() * 0.1 - 0.05, -0.01);
|
||
this.acceleration = new Vector(Math.random() * 0.01 - 0.05, -0.01);
|
||
this.pressure = new Vector(Math.random() * 0.1 - 0.05, -0.1);
|
||
this.waterResistance = new Vector(Math.random() * 0.1 - 0.05, -0.1);
|
||
this.scale = Math.random() * 0.5;
|
||
this.mass = Math.random() * 0.1;
|
||
this.sprite.rotation = Math.random() * Math.PI;
|
||
this.draw();
|
||
}
|
||
this.draw = function(_graphics) {
|
||
this.update();
|
||
this.sprite.x = this.position.x;
|
||
this.sprite.y = this.position.y;
|
||
this.sprite.scale.set(this.scale);
|
||
}
|
||
this.applyForce = function(_force) {
|
||
var f = _force.mult(this.mass);
|
||
this.acceleration.addTo(f);
|
||
}
|
||
this.update = function() {
|
||
this.applyForce(this.pressure);
|
||
this.applyForce(this.waterResistance);
|
||
this.velocity.addTo(this.acceleration);
|
||
this.position.addTo(this.velocity);
|
||
this.acceleration.mult(0);
|
||
this.scale -= 0.005;
|
||
}
|
||
this.isDead = function() {
|
||
return (this.scale < 0.0);
|
||
}
|
||
this.init();
|
||
return this;
|
||
}
|
||
|
||
init();
|
||
animate(); |