xevion/lovely
1
0
Fork 0
mirror of https://github.com/Xevion/lovely.git synced 2025-12-06 03:15:36 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix many major issues with app

Browse Source 
- Manager ticking function not getting correct this reference
- Scale on Sprites not being set initially
- Sections and SectionSprite not being generated properly
- Blur X direction inverted ?
- Messed with scaling more
- General fixes
This commit is contained in:
Xevion
2022-04-03 19:36:17 -05:00
parent d2c05793c9
commit abc500b5da
3 changed files with 102 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/App.vue
View File

@@ -4,72 +4,14 @@
<script> <script>
import * as PIXI from 'pixi.js' import * as PIXI from 'pixi.js'
import {Point, TextStyle} from "pixi.js"; import Manager from "@/manage";
import easing from "@/easing";
import {MotionBlurFilter} from "@pixi/filter-motion-blur";
export default { export default {
name: 'App', name: 'App',
components: {}, components: {},
methods: { methods: {
getAngle: function (originX, originY, targetX, targetY) {
var dx = originX - targetX;
var dy = originY - targetY;
// var theta = Math.atan2(dy, dx); // [0, Ⲡ] then [-Ⲡ, 0]; clockwise; 0° = west
// theta *= 180 / Math.PI; // [0, 180] then [-180, 0]; clockwise; 0° = west
// if (theta < 0) theta += 360; // [0, 360]; clockwise; 0° = west
// var theta = Math.atan2(-dy, dx); // [0, Ⲡ] then [-Ⲡ, 0]; anticlockwise; 0° = west
// theta *= 180 / Math.PI; // [0, 180] then [-180, 0]; anticlockwise; 0° = west
// if (theta < 0) theta += 360; // [0, 360]; anticlockwise; 0° = west
var theta = Math.atan2(dy, -dx); // [0, Ⲡ] then [-Ⲡ, 0]; anticlockwise; 0° = east
theta *= 180 / Math.PI; // [0, 180] then [-180, 0]; anticlockwise; 0° = east
if (theta < 0) theta += 360; // [0, 360]; anticlockwise; 0° = east
//
// var theta = Math.atan2(-dy, -dx); // [0, Ⲡ] then [-Ⲡ, 0]; clockwise; 0° = east
// theta *= 180 / Math.PI; // [0, 180] then [-180, 0]; clockwise; 0° = east
// if (theta < 0) theta += 360; // [0, 360]; clockwise; 0° = east
return theta;
},
rotateAngle: function (angle, rotation) {
return (angle + rotation) % 360;
},
generateEven: function (minX, maxX, minY, maxY, minDistance, maxPoints, maxIterations) {
let pointCount = 0;
let iterations = 0;
let points = [];
// Generate a point until maximums satisifed
while (pointCount < maxPoints && iterations < maxIterations) {
iterations++;
let newPoint = new Point(this.uniform(minX, maxX), this.uniform(minY, maxY));
if (!points.some((otherPoint) => this.getDistance(newPoint, otherPoint) < minDistance)) {
pointCount++;
points.push(newPoint);
}
}
return points;
},
getDistance: function (a, b) {
return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2))
},
randomNumber: function (min, max) {
return Math.round(Math.random() * (max - min + 1) + min);
},
uniform: function (min, max) {
return (Math.random() * (max - min)) + min;
},
randomChoice: function (array) {
if (array.length < 1) return null;
return array[this.randomNumber(0, array.length - 1)];
},
drawPixi: function () { drawPixi: function () {
var canvas = document.getElementById('pixi') const canvas = document.getElementById('pixi')
const app = new PIXI.Application({ const app = new PIXI.Application({
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
@@ -78,49 +20,11 @@ export default {
view: canvas, view: canvas,
}) })
// Constants
const WIDTH = app.screen.width;
const HEIGHT = app.screen.height;
const LEFT = -WIDTH / 2;
const RIGHT = WIDTH / 2;
const TOP = -HEIGHT / 2;
const BOTTOM = HEIGHT / 2;
const commonPositions = {
topLeft: new Point(-WIDTH / 2, HEIGHT / 2),
topRight: new Point(WIDTH / 2, HEIGHT / 2),
bottomLeft: new Point(-WIDTH / 2, -HEIGHT / 2),
bottomRight: new Point(WIDTH / 2, -HEIGHT / 2),
center: new Point(0, 0)
}
const emojiList = ["heart_with_arrow",
"heart_with_ribbon",
"heavy_heart_exclamation_mark_ornament",
"revolving_hearts",
"sparkles",
"sparkling_heart"];
// Load all textures into memory
let textures = emojiList.map((emoji_name) => PIXI.Texture.from(require(`./assets/emojis/${emoji_name}.png`)));
// Add a spawning buffer of 3% of the average of the app's width & height.
let edgeBuffer = Math.round(0.03 * ((app.screen.width + app.screen.height) / 2));
// Generate initial points
let objects = [];
let points = this.generateEven(
-app.screen.width / 2 + edgeBuffer,
app.screen.width / 2 - edgeBuffer,
-app.screen.height / 2 + edgeBuffer,
app.screen.height / 2 - edgeBuffer,
50, 200, 10000)
app.stage.x = app.screen.width / 2; app.stage.x = app.screen.width / 2;
app.stage.y = app.screen.height / 2; app.stage.y = app.screen.height / 2;
let setupByPoint = (point) => { /**
let setupByPoint = (point) => {
// Select a random texture for a new sprite // Select a random texture for a new sprite
let sprite = new PIXI.Sprite(this.randomChoice(textures)); let sprite = new PIXI.Sprite(this.randomChoice(textures));
@@ -144,69 +48,20 @@ export default {
sprite.totalTime = 0; sprite.totalTime = 0;
// console.log(`${sprite.velocityX} ${sprite.velocityY}`) // console.log(`${sprite.velocityX} ${sprite.velocityY}`)
// Motion Blur
// sprite.filters = [new MotionBlurFilter([1, 2], 3)]
// Setup the sprite for rendering // Setup the sprite for rendering
return sprite; return sprite;
} }
*/
// Generate emoji objects // Buffer the removal of items to 50px outside the canvas.
points.forEach((point) => { let specialStyle = new PIXI.TextStyle({fill: "pink", stroke: "white", strokeThickness: 1});
let sprite = setupByPoint(point);
objects.push(sprite);
app.stage.addChild(sprite);
})
// Buffer the removal of items to 50px outside the canvas.
const REMOVAL_BUFFER = 300;
const easingFunction = easing.outCirc();
const maxDistance = this.getDistance(commonPositions.topLeft, commonPositions.center);
const MAX_BASELINE = 0.65;
const BASE_SPRITECOUNT = Math.max(objects.length, 150);
let specialStyle = new PIXI.TextStyle({ fill: "pink", stroke: "white", strokeThickness: 1});
let centerText = new PIXI.Text("Love you forever, Cris.", specialStyle); let centerText = new PIXI.Text("Love you forever, Cris.", specialStyle);
centerText.anchor.set(0.5, 0.5); centerText.anchor.set(0.5, 0.5);
// app.stage.addChild(centerText); // app.stage.addChild(centerText);
centerText.x = 0; centerText.x = 0;
// console.log(`${objects.length} sprites generated.`) const manager = new Manager(app, 8);
app.ticker.add((delta) => { app.ticker.add(manager.tick);
let index = 0;
while (index < objects.length) {
let sprite = objects[index];
let distanceScale = this.getDistance(commonPositions.center, new Point(sprite.x, sprite.y)) / maxDistance;
distanceScale = Math.max(1, distanceScale + 0.3);
let easeValue = easingFunction(distanceScale);
if (sprite.baselineScale < MAX_BASELINE)
sprite.baselineScale = Math.min(MAX_BASELINE, sprite.baselineScale + (0.10 * delta * 0.09));
sprite.x += sprite.velocityX * delta * easeValue;
sprite.y += sprite.velocityY * delta * easeValue;
let scale = sprite.baselineScale * Math.log(distanceScale + 1)
sprite.scale.set(scale, scale);
if (sprite.x + REMOVAL_BUFFER < LEFT || sprite.x - REMOVAL_BUFFER > RIGHT || sprite.y - REMOVAL_BUFFER > BOTTOM || sprite.y + REMOVAL_BUFFER < TOP) {
objects.splice(index, 1);
app.stage.removeChild(sprite);
}
index++;
if (objects.length < BASE_SPRITECOUNT) {
let newPoint = new Point(this.uniform(-WIDTH / 2, WIDTH / 2), this.uniform(-HEIGHT / 2, HEIGHT / 2));
let newSprite = setupByPoint(newPoint);
objects.push(newSprite);
app.stage.addChild(newSprite);
console.log(newSprite)
}
}
});
}, },
}, },
mounted() { mounted() {

124
src/manage.js
View File

@@ -1,22 +1,41 @@
import * as PIXI from 'pixi.js' import * as PIXI from 'pixi.js'
import {Point} from "pixi.js"; import {Point} from "pixi.js";
import easing from "@/easing";
import util from "@/util";
import {MotionBlurFilter} from "@pixi/filter-motion-blur";
import random from "@/random";
class Manager { class Manager {
REMOVAL_BUFFER = 100 // The buffer zone for sprite removal to prevent sprites from being deleted before they are entirely out of view. REMOVAL_BUFFER = 100 // The buffer zone for sprite removal to prevent sprites from being deleted before they are entirely out of view.
MAX_BASELINE_SCALE = 0.65; // Maximum scaling constant for sprites. MAX_BASELINE_SCALE = 0.65; // Maximum scaling constant for sprites.
MAX_SPRITE_COUNT = 200; // The maximum number of sprites that should be rendered at once. MAX_SPRITE_COUNT = 200; // The maximum number of sprites that should be rendered at once.
EASING_FUNCTION = easing.outQuint(); // The easing function that controls movement & scaling easing.
MOTION_BLUR_KERNEL_SIZE = 3; // Controls motion blur quality.
MOTION_BLUR_SCALE = 8; // The maximum scale motion blur can be in either X or Y.
VELOCITY_SCALE = 7;
EDGE_BUFFER = 0.15;
MIN_RADIUS = 30;
constructor(app, sections) { constructor(app, sectionCount) {
this.app = app; this.app = app;
this.sectionCount = sectionCount;
// A list of containers with separate sections of items relegated by their angle. // A list of containers with separate sections of items relegated by their angle.
this.sections = Array(sections).map(() => { this.sections = util.generateSections(sectionCount).map((sectionData) => {
new PIXI.Container() const container = new PIXI.Container();
}); let blurX = sectionData.velocityPoint.x * this.MOTION_BLUR_SCALE,
this.sectionSprites = Array(sections).map(() => { blurY = sectionData.velocityPoint.y * this.MOTION_BLUR_SCALE;
Array() container.filters = [new MotionBlurFilter([blurX, blurY], this.MOTION_BLUR_KERNEL_SIZE)]
app.stage.addChild(container);
return container;
}); });
this.sectionSprites = Array.from(Array(sectionCount), () => new Array(0))
// Section Constants
this.BASE_ANGLE_DEG = 360 / this.sectionCount;
this.BASE_ANGLE_RAD = (Math.PI * 2) / this.sectionCount;
// Geometric Constants // Geometric Constants
this.WIDTH = app.screen.width; this.WIDTH = app.screen.width;
this.HEIGHT = app.screen.height; this.HEIGHT = app.screen.height;
@@ -25,6 +44,15 @@ class Manager {
this.TOP = -this.HEIGHT / 2; this.TOP = -this.HEIGHT / 2;
this.BOTTOM = this.HEIGHT / 2; this.BOTTOM = this.HEIGHT / 2;
// Position Constants
this.POSITIONS = {
topLeft: new Point(-this.WIDTH / 2, this.HEIGHT / 2),
topRight: new Point(this.WIDTH / 2, this.HEIGHT / 2),
bottomLeft: new Point(-this.WIDTH / 2, -this.HEIGHT / 2),
bottomRight: new Point(this.WIDTH / 2, -this.HEIGHT / 2),
center: new Point(0, 0)
}
// A list of texture names for the emojis to be used. // A list of texture names for the emojis to be used.
this.emojiList = ["heart_with_arrow", this.emojiList = ["heart_with_arrow",
"heart_with_ribbon", "heart_with_ribbon",
@@ -38,26 +66,54 @@ class Manager {
(emoji_name) => PIXI.Texture.from(require(`./assets/emojis/${emoji_name}.png`)) (emoji_name) => PIXI.Texture.from(require(`./assets/emojis/${emoji_name}.png`))
); );
// Removal Buffer Constants // Buffer size constants
this.BUFFER_LEFT = this.LEFT - this.REMOVAL_BUFFER; this.BUFFER_LEFT = this.LEFT - this.REMOVAL_BUFFER;
this.BUFFER_RIGHT = this.RIGHT + this.REMOVAL_BUFFER; this.BUFFER_RIGHT = this.RIGHT + this.REMOVAL_BUFFER;
this.BUFFER_TOP = this.TOP - this.REMOVAL_BUFFER; this.BUFFER_TOP = this.TOP - this.REMOVAL_BUFFER;
this.BUFFER_BOTTOM = this.BOTTOM + this.REMOVAL_BUFFER; this.BUFFER_BOTTOM = this.BOTTOM + this.REMOVAL_BUFFER;
this.MAX_DISTANCE = util.getDistance(this.POSITIONS.topLeft, this.POSITIONS.center);
this.total_sprites = 0;
// Generation Constants
this.MAX_RADIUS = Math.min(this.app.screen.width, this.app.screen.height) * (1 - this.EDGE_BUFFER);
} }
/** /**
* Generate a new point and automatically add it to the container. * Generate a new point and automatically add it to the container.
*/ */
generatePoint() { generatePoint() {
} // Generation initial data on the point
let point = random.pointInCircle(new Point(0, 0), this.MIN_RADIUS, this.MAX_RADIUS);
let sprite = new PIXI.Sprite(random.choice(this.textures));
/** // Place the sprite at the point
* Removes a sprite from the app. sprite.anchor.set(0.5, 0.5);
* @param sprite sprite.x = point.x;
* @param section sprite.y = point.y;
*/
removeSprite(sprite, section = null) {
// Set scale
// let distanceFromCenter = this.getDistance(commonPositions.center, point);
// sprite.baselineScale = this.uniform(0.45, 0.65);
sprite.baselineScale = random.uniform(0.05, 0.12)
sprite.scale.set(0, 0)
// Get the correct section & velocity for the sprite
const angleFromCenter = util.getAngle(0, 0, point.x, point.y) * Math.PI / 180;
const sectionIndex = Math.floor(angleFromCenter / this.BASE_ANGLE_RAD);
const velocity = this.VELOCITY_SCALE * random.uniform(0.8, 1.2);
sprite.velocityX = Math.cos(angleFromCenter) * velocity;
sprite.velocityY = Math.sin(angleFromCenter) * velocity * -1;
// console.log({sprite.velocityX})
// console.log({sprite.velocityX, sprite.velocityY})
// Add it to the section & section list
this.sections[sectionIndex].addChild(sprite);
this.sectionSprites[sectionIndex].push(sprite);
this.total_sprites++;
return sprite;
} }
/* /*
@@ -70,20 +126,23 @@ class Manager {
sprite.y < this.BUFFER_TOP; sprite.y < this.BUFFER_TOP;
} }
tick(delta) { /**
* Ticking function for Manager object.
let index = 0; * @param delta The time (in seconds) that passed between now and the last tick() call.
*/
tick = (delta) => {
// Iterate through each section // Iterate through each section
for (const [sectionIndex, section] of this.sections.entries()) { for (const [sectionIndex, section] of this.sections.entries()) {
// Iterate through all sprites moving in that section // Iterate through all sprites moving in that section
for (const [spriteIndex, sprite] of this.sectionSprites[sectionIndex].entries()) { for (const [spriteIndex, sprite] of this.sectionSprites[sectionIndex].entries()) {
let distanceScale = this.getDistance(commonPositions.center, new Point(sprite.x, sprite.y)) / maxDistance; let distanceScale = util.getDistanceSimple(0, 0, sprite.x, sprite.y) / this.MAX_DISTANCE;
// distanceScale = Math.max(1, distanceScale + 0.3);
let easeValue = easingFunction(distanceScale); // distanceScale = Math.max(1, distanceScale + 0.3);
let easeValue = this.EASING_FUNCTION(distanceScale);
if (sprite.baselineScale < this.MAX_BASELINE_SCALE)
sprite.baselineScale = Math.min(this.MAX_BASELINE_SCALE, sprite.baselineScale + (0.1 * delta * 0.25));
if (sprite.baselineScale < MAX_BASELINE)
sprite.baselineScale = Math.min(MAX_BASELINE, sprite.baselineScale + (0.1 * delta * 0.25));
let scale = sprite.baselineScale * Math.log(distanceScale + 1) let scale = sprite.baselineScale * Math.log(distanceScale + 1)
sprite.scale.set(scale, scale); sprite.scale.set(scale, scale);
@@ -92,24 +151,17 @@ class Manager {
// Remove sprites outside view // Remove sprites outside view
if (this.outside(sprite)) { if (this.outside(sprite)) {
this.sectionSprites[sectionIndex].splice(index, 1); this.sectionSprites[sectionIndex].splice(spriteIndex, 1);
section.removeChild(sprite); section.removeChild(sprite);
this.total_sprites--;
sprite.destroy();
} }
} }
} }
while (index < objects.length) { // Generate one sprite on each tick if needed.
let sprite = objects[index]; if (this.total_sprites < this.MAX_SPRITE_COUNT) {
this.generatePoint();
index++;
if (objects.length < BASE_SPRITECOUNT) {
let newPoint = new Point(this.uniform(-WIDTH / 2, WIDTH / 2), this.uniform(-HEIGHT / 2, HEIGHT / 2));
let newSprite = setupByPoint(newPoint);
objects.push(newSprite);
app.stage.addChild(newSprite);
console.log(newSprite)
}
} }
} }
} }

7
src/util.js
View File

@@ -1,6 +1,9 @@
import {Point} from "pixi.js"; import {Point} from "pixi.js";
export default { export default {
getDistanceSimple(aX, aY, bX, bY) {
return Math.sqrt(Math.pow(aX - bX, 2) + Math.pow(aY - bY, 2))
},
getDistance(a, b) { getDistance(a, b) {
return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2)) return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2))
}, },
@@ -32,7 +35,7 @@ export default {
/** /**
* Generates a number of sections and returns basic generation data to assist initialization of the canvas. * Generates a number of sections and returns basic generation data to assist initialization of the canvas.
* @param sectionCount The number of sections a 360 degree / 2pi area should be split up into. * @param sectionCount The number of sections a 360 degree / 2pi area should be split up into.
* @returns {data} Returns an array of objects containing useful pre-generated angles & data. * @returns {*[]} Returns an array of objects containing useful pre-generated angles & data.
*/ */
generateSections(sectionCount) { generateSections(sectionCount) {
let data = []; let data = [];
@@ -41,7 +44,7 @@ export default {
let startAngle = baseAngle * section; let startAngle = baseAngle * section;
let endAngle = startAngle + baseAngle; let endAngle = startAngle + baseAngle;
let centerAngle = startAngle + (baseAngle / 2.0); let centerAngle = startAngle + (baseAngle / 2.0);
let velocityPoint = new Point(Math.cos(centerAngle), Math.sin(centerAngle)); let velocityPoint = new Point(-Math.cos(centerAngle), Math.sin(centerAngle));
data.push({startAngle, centerAngle, endAngle, velocityPoint}); data.push({startAngle, centerAngle, endAngle, velocityPoint});
} }
return data; return data;