xevion/lovely
1
0
Fork 0
mirror of https://github.com/Xevion/lovely.git synced 2025-12-06 01:15:30 -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>
import * as PIXI from 'pixi.js'
import {Point, TextStyle} from "pixi.js";
import easing from "@/easing";
import {MotionBlurFilter} from "@pixi/filter-motion-blur";
import Manager from "@/manage";
export default {
name: 'App',
components: {},
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 () {
var canvas = document.getElementById('pixi')
const canvas = document.getElementById('pixi')
const app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
@@ -78,49 +20,11 @@ export default {
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.y = app.screen.height / 2;
let setupByPoint = (point) => {
/**
let setupByPoint = (point) => {
// Select a random texture for a new sprite
let sprite = new PIXI.Sprite(this.randomChoice(textures));
@@ -144,69 +48,20 @@ export default {
sprite.totalTime = 0;
// console.log(`${sprite.velocityX} ${sprite.velocityY}`)
// Motion Blur
// sprite.filters = [new MotionBlurFilter([1, 2], 3)]
// Setup the sprite for rendering
return sprite;
}
*/
// Generate emoji objects
points.forEach((point) => {
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});
// Buffer the removal of items to 50px outside the canvas.
let specialStyle = new PIXI.TextStyle({fill: "pink", stroke: "white", strokeThickness: 1});
let centerText = new PIXI.Text("Love you forever, Cris.", specialStyle);
centerText.anchor.set(0.5, 0.5);
// app.stage.addChild(centerText);
centerText.x = 0;
// console.log(`${objects.length} sprites generated.`)
app.ticker.add((delta) => {
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)
}
}
});
const manager = new Manager(app, 8);
app.ticker.add(manager.tick);
},
},
mounted() {

124
src/manage.js
View File

@@ -1,22 +1,41 @@
import * as PIXI 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 {
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_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.sectionCount = sectionCount;
// A list of containers with separate sections of items relegated by their angle.
this.sections = Array(sections).map(() => {
new PIXI.Container()
});
this.sectionSprites = Array(sections).map(() => {
Array()
this.sections = util.generateSections(sectionCount).map((sectionData) => {
const container = new PIXI.Container();
let blurX = sectionData.velocityPoint.x * this.MOTION_BLUR_SCALE,
blurY = sectionData.velocityPoint.y * this.MOTION_BLUR_SCALE;
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
this.WIDTH = app.screen.width;
this.HEIGHT = app.screen.height;
@@ -25,6 +44,15 @@ class Manager {
this.TOP = -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.
this.emojiList = ["heart_with_arrow",
"heart_with_ribbon",
@@ -38,26 +66,54 @@ class Manager {
(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_RIGHT = this.RIGHT + this.REMOVAL_BUFFER;
this.BUFFER_TOP = this.TOP - 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.
*/
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));
/**
* Removes a sprite from the app.
* @param sprite
* @param section
*/
removeSprite(sprite, section = null) {
// Place the sprite at the point
sprite.anchor.set(0.5, 0.5);
sprite.x = point.x;
sprite.y = point.y;
// 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;
}
tick(delta) {
let index = 0;
/**
* Ticking function for Manager object.
* @param delta The time (in seconds) that passed between now and the last tick() call.
*/
tick = (delta) => {
// Iterate through each section
for (const [sectionIndex, section] of this.sections.entries()) {
// Iterate through all sprites moving in that section
for (const [spriteIndex, sprite] of this.sectionSprites[sectionIndex].entries()) {
let distanceScale = this.getDistance(commonPositions.center, new Point(sprite.x, sprite.y)) / maxDistance;
// distanceScale = Math.max(1, distanceScale + 0.3);
let easeValue = easingFunction(distanceScale);
let distanceScale = util.getDistanceSimple(0, 0, sprite.x, sprite.y) / this.MAX_DISTANCE;
// 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)
sprite.scale.set(scale, scale);
@@ -92,24 +151,17 @@ class Manager {
// Remove sprites outside view
if (this.outside(sprite)) {
this.sectionSprites[sectionIndex].splice(index, 1);
this.sectionSprites[sectionIndex].splice(spriteIndex, 1);
section.removeChild(sprite);
this.total_sprites--;
sprite.destroy();
}
}
}
while (index < objects.length) {
let sprite = objects[index];
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)
}
// Generate one sprite on each tick if needed.
if (this.total_sprites < this.MAX_SPRITE_COUNT) {
this.generatePoint();
}
}
}

7
src/util.js
View File

@@ -1,6 +1,9 @@
import {Point} from "pixi.js";
export default {
getDistanceSimple(aX, aY, bX, bY) {
return Math.sqrt(Math.pow(aX - bX, 2) + Math.pow(aY - bY, 2))
},
getDistance(a, b) {
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.
* @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) {
let data = [];
@@ -41,7 +44,7 @@ export default {
let startAngle = baseAngle * section;
let endAngle = startAngle + baseAngle;
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});
}
return data;