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

Initial project commit

Browse Source
This commit is contained in:
Xevion
2022-04-02 13:51:41 -05:00
commit eb3fa6bede
20 changed files with 21506 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
.gitignore vendored Normal file
View File

@@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

24
README.md Normal file
View File

@@ -0,0 +1,24 @@
# lovely
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
babel.config.js Normal file
View File

@@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

48
collect.py Normal file
View File

@@ -0,0 +1,48 @@
import os
import shutil
import unicodedata
from traceback import print_exc
emojis = ["💖", "💘", "💝", "💞", "❣", "✨"]
in_path: str = r"C:\Users\Ryan\Downloads\apple-emoji-linux\png\160"
out_path: str = "./src/assets/emojis/"
verified: int = 0
moved: int = 0
if not os.path.exists(in_path):
raise FileNotFoundError("In Directory does not exist.")
# Ensure out directory has been created
if not os.path.exists(out_path):
os.makedirs(out_path)
print(f'In Directory: {in_path}')
print(f'Out Directory: {out_path}')
print('Emojis: ' + ' '.join(emojis))
for emoji in emojis:
emoji_codepoint: str = hex(ord(emoji))
source_filename = 'emoji_u{0}.png'.format(emoji_codepoint[2:])
emoji_name = unicodedata.name(emoji)
dump_filename = '_'.join(emoji_name.lower().split()) + '.png'
source_path = os.path.join(in_path, source_filename)
dump_path = os.path.join(out_path, dump_filename)
valid = os.path.exists(source_path)
print('{emoji} ({codepoint}) => {filename} ({valid}) => {dump_filename}'.format(
emoji=emoji, codepoint=emoji_codepoint, filename=source_filename, dump_filename=dump_filename,
valid='Found' if valid else 'Not Found'
))
# Copy the emoji image
if valid:
verified += 1
if not os.path.exists(dump_path):
try:
shutil.copy(source_path, dump_path)
moved += 1
except Exception:
print_exc()
print(f'{verified} emojis successfully found. {moved} moved into out directory.')

19
jsconfig.json Normal file
View File

@@ -0,0 +1,19 @@
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}

20822
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

47
package.json Normal file
View File

@@ -0,0 +1,47 @@
{
"name": "lovely",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@pixi/filter-motion-blur": "^4.1.5",
"core-js": "^3.8.3",
"pixi.js": "^6.3.0",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {
"no-unused-vars": 1
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

17
public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

238
src/App.vue Normal file
View File

@@ -0,0 +1,238 @@
<template>
<canvas id="pixi"></canvas>
</template>
<script>
import * as PIXI from 'pixi.js'
import {Point, TextStyle} from "pixi.js";
import easing from "@/easing";
import {MotionBlurFilter} from "@pixi/filter-motion-blur";
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 app = new PIXI.Application({
width: window.innerWidth,
height: window.innerHeight,
antialias: true,
backgroundColor: 0x171717,
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) => {
// Select a random texture for a new sprite
let sprite = new PIXI.Sprite(this.randomChoice(textures));
// 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 = this.uniform(0.03, 0.07)
// Get angle to center
// let angleToCenter = this.getAngle(point.x, point.y, 0, 0);
let angleToCenter = this.getAngle(0, 0, point.x, point.y);
angleToCenter *= Math.PI / 180;
const velocityScale = 5;
sprite.velocityX = Math.cos(angleToCenter) * velocityScale;
sprite.velocityY = Math.sin(angleToCenter) * velocityScale * -1;
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});
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)
}
}
});
},
},
mounted() {
this.drawPixi()
}
}
</script>
<style>
body {
margin: 0;
padding: 0;
background-color: #171717;
}
#pixi, #app {
width: 100%;
height: 100%;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/*margin-top: 60px;*/
}
</style>

BIN
src/assets/emojis/heart_with_arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/emojis/heart_with_ribbon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
src/assets/emojis/heavy_heart_exclamation_mark_ornament.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/emojis/revolving_hearts.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/emojis/sparkles.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/emojis/sparkling_heart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

255
src/easing.js Normal file
View File

@@ -0,0 +1,255 @@
const Easing = {
linear: function () {
return function (t) {
return t;
};
},
inQuad: function () {
return function (t) {
return t * t;
};
},
outQuad: function () {
return function (t) {
return t * (2 - t);
};
},
inOutQuad: function () {
return function (t) {
t *= 2;
if (t < 1) return 0.5 * t * t;
return -0.5 * (--t * (t - 2) - 1);
};
},
inCubic: function () {
return function (t) {
return t * t * t;
};
},
outCubic: function () {
return function (t) {
return --t * t * t + 1;
};
},
inOutCubic: function () {
return function (t) {
t *= 2;
if (t < 1) return 0.5 * t * t * t;
t -= 2
return 0.5 * (t * t * t + 2);
};
},
inQuart: function () {
return function (t) {
return t * t * t * t;
};
},
outQuart: function () {
return function (t) {
return 1 - (--t * t * t * t);
};
},
inOutQuart: function () {
return function (t) {
t *= 2;
if (t < 1) return 0.5 * t * t * t * t;
t -= 2;
return -0.5 * (t * t * t * t - 2);
};
},
inQuint: function () {
return function (t) {
return t * t * t * t * t;
};
},
outQuint: function () {
return function (t) {
return --t * t * t * t * t + 1;
};
},
inOutQuint: function () {
return function (t) {
t *= 2;
if (t < 1) return 0.5 * t * t * t * t * t;
t -= 2;
return 0.5 * (t * t * t * t * t + 2);
};
},
inSine: function () {
return function (t) {
return 1 - Math.cos(t * Math.PI / 2);
};
},
outSine: function () {
return function (t) {
return Math.sin(t * Math.PI / 2);
};
},
inOutSine: function () {
return function (t) {
return 0.5 * (1 - Math.cos(Math.PI * t));
};
},
inExpo: function () {
return function (t) {
return t === 0 ? 0 : Math.pow(1024, t - 1);
};
},
outExpo: function () {
return function (t) {
return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
};
},
inOutExpo: function () {
return function (t) {
if (t === 0) return 0;
if (t === 1) return 1;
t *= 2;
if (t < 1) return 0.5 * Math.pow(1024, t - 1);
return 0.5 * (-Math.pow(2, -10 * (t - 1)) + 2);
};
},
inCirc: function () {
return function (t) {
return 1 - Math.sqrt(1 - t * t);
};
},
outCirc: function () {
return function (t) {
return Math.sqrt(1 - (--t * t));
};
},
inOutCirc: function () {
return function (t) {
t *= 2
if (t < 1) return -0.5 * (Math.sqrt(1 - t * t) - 1);
return 0.5 * (Math.sqrt(1 - (t - 2) * (t - 2)) + 1);
};
},
inElastic: function (a = 0.1, p = 0.4) {
return function (t) {
let s;
if (t === 0) return 0;
if (t === 1) return 1;
if (!a || a < 1) {
a = 1;
s = p / 4;
} else s = p * Math.asin(1 / a) / (2 * Math.PI);
return -(a * Math.pow(2, 10 * (t - 1)) * Math.sin(((t - 1) - s) * (2 * Math.PI) / p));
};
},
outElastic: function (a = 0.1, p = 0.4) {
return function (t) {
let s;
if (t === 0) return 0;
if (t === 1) return 1;
if (!a || a < 1) {
a = 1;
s = p / 4;
} else s = p * Math.asin(1 / a) / (2 * Math.PI);
return (a * Math.pow(2, -10 * t) * Math.sin((t - s) * (2 * Math.PI) / p) + 1);
};
},
inOutElastic: function (a = 0.1, p = 0.4) {
return function (t) {
let s;
if (t === 0) return 0;
if (t === 1) return 1;
if (!a || a < 1) {
a = 1;
s = p / 4;
} else s = p * Math.asin(1 / a) / (2 * Math.PI);
t *= 2;
if (t < 1) return -0.5 * (a * Math.pow(2, 10 * (t - 1)) * Math.sin(((t - 1) - s) * (2 * Math.PI) / p));
return a * Math.pow(2, -10 * (t - 1)) * Math.sin(((t - 1) - s) * (2 * Math.PI) / p) * 0.5 + 1;
};
},
inBack: function (v) {
return function (t) {
let s = v || 1.70158;
return t * t * ((s + 1) * t - s);
};
},
outBack: function (v) {
return function (t) {
let s = v || 1.70158;
return --t * t * ((s + 1) * t + s) + 1;
};
},
inOutBack: function (v) {
return function (t) {
let s = (v || 1.70158) * 1.525;
t *= 2;
if (t < 1) return 0.5 * (t * t * ((s + 1) * t - s));
return 0.5 * ((t - 2) * (t - 2) * ((s + 1) * (t - 2) + s) + 2);
};
},
inBounce: function () {
return function (t) {
return 1 - Easing.outBounce()(1 - t);
};
},
outBounce: function () {
return function (t) {
if (t < (1 / 2.75)) {
return 7.5625 * t * t;
} else if (t < (2 / 2.75)) {
t = (t - (1.5 / 2.75));
return 7.5625 * t * t + 0.75;
} else if (t < (2.5 / 2.75)) {
t = (t - (2.25 / 2.75));
return 7.5625 * t * t + 0.9375;
} else {
t -= (2.625 / 2.75);
return 7.5625 * t * t + 0.984375;
}
};
},
inOutBounce: function () {
return function (t) {
if (t < 0.5) return Easing.inBounce()(t * 2) * 0.5;
return Easing.outBounce()(t * 2 - 1) * 0.5 + 0.5;
};
},
customArray: function (arr) {
if (!arr) return Easing.linear();
return function (t) {
//todo: convert array => ease
return t;
}
}
};
export default Easing;

4
src/main.js Normal file
View File

@@ -0,0 +1,4 @@
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

4
vue.config.js Normal file
View File

@@ -0,0 +1,4 @@
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})