1
0
This commit is contained in:
syui 2024-04-27 18:21:41 +09:00
parent a2ce54ba83
commit 55a62f319e
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
21 changed files with 524 additions and 1 deletions

6
.gitignore vendored Normal file
View File

@ -0,0 +1,6 @@
**node_modules
**.git
**dist
**dist
**.firebase
**lock*

View File

@ -0,0 +1,88 @@
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, '../src/script.js'),
output:
{
filename: 'bundle.[contenthash].js',
path: path.resolve(__dirname, '../dist')
},
devtool: 'source-map',
plugins:
[
new CopyWebpackPlugin({
patterns: [
{ from: path.resolve(__dirname, '../static') }
]
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.html'),
minify: true
}),
new MiniCSSExtractPlugin()
],
module:
{
rules:
[
// HTML
{
test: /\.(html)$/,
use: ['html-loader']
},
// JS
{
test: /\.js$/,
exclude: /node_modules/,
use:
[
'babel-loader'
]
},
// CSS
{
test: /\.css$/,
use:
[
MiniCSSExtractPlugin.loader,
'css-loader'
]
},
// Images
{
test: /\.(jpg|png|gif|svg)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/images/'
}
}
]
},
// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/fonts/'
}
}
]
}
]
}
}

View File

@ -0,0 +1,39 @@
const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
const ip = require('internal-ip')
const portFinderSync = require('portfinder-sync')
const infoColor = (_message) =>
{
return `\u001b[1m\u001b[34m${_message}\u001b[39m\u001b[22m`
}
module.exports = merge(
commonConfiguration,
{
mode: 'development',
devServer:
{
host: '0.0.0.0',
port: portFinderSync.getPort(8080),
contentBase: './dist',
watchContentBase: true,
open: true,
https: false,
useLocalIp: true,
disableHostCheck: true,
overlay: true,
noInfo: true,
after: function(app, server, compiler)
{
const port = server.options.port
const https = server.options.https ? 's' : ''
const localIp = ip.v4.sync()
const domain1 = `http${https}://${localIp}:${port}`
const domain2 = `http${https}://localhost:${port}`
console.log(`Project running at:\n - ${infoColor(domain1)}\n - ${infoColor(domain2)}`)
}
}
}
)

View File

@ -0,0 +1,14 @@
const { merge } = require('webpack-merge')
const commonConfiguration = require('./webpack.common.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = merge(
commonConfiguration,
{
mode: 'production',
plugins:
[
new CleanWebpackPlugin()
]
}
)

28
galaxy/package.json Normal file
View File

@ -0,0 +1,28 @@
{
"scripts": {
"build": "webpack --config ./bundler/webpack.prod.js",
"dev": "webpack serve --config ./bundler/webpack.dev.js"
},
"dependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^7.0.0",
"css-loader": "^5.0.1",
"dat.gui": "^0.7.7",
"file-loader": "^6.2.0",
"firebase-tools": "^9.10.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.0.0-alpha.7",
"mini-css-extract-plugin": "^1.3.4",
"portfinder-sync": "0.0.2",
"raw-loader": "^4.0.2",
"style-loader": "^2.0.0",
"three": "^0.124.0",
"webpack": "^5.14.0",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
}
}

11
galaxy/src/index.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ai/galaxy</title>
</head>
<body>
<canvas class="webgl"></canvas>
</body>
</html>

244
galaxy/src/script.js Normal file
View File

@ -0,0 +1,244 @@
import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
//import * as dat from 'dat.gui'
import { AdditiveBlending, Float32BufferAttribute } from 'three'
/**
* Base
*/
// Debug
//const gui = new dat.GUI({
// width: 400,
// closed: true
//})
const textureLoader = new THREE.TextureLoader()
const shape = textureLoader.load('/pkg/galaxy/particleShape/1.png')
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
//Galaxy Generator
const parameters = {}
parameters.count = 70000
parameters.size = 0.01
parameters.radius = 5
parameters.branches = 8
parameters.spin = 1
parameters.randomness = 0.3
parameters.randomnessPower = 5
parameters.stars = 9000
parameters.starColor = '#fff700'
parameters.insideColor = '#fff700'
parameters.outsideColor = '#fff700'
//parameters.starColor = '#1b3984'
//parameters.insideColor = '#ff6030'
//parameters.outsideColor = '#1b3984'
//gui.add(parameters, 'count').min(100).max(100000).step(100).onChange(generateGalaxy).name('stars in galaxy')
//gui.add(parameters, 'stars').min(0).max(100000).step(100).onChange(generateBgStars).name('background stars')
//gui.addColor(parameters, 'starColor').onChange(generateBgStars).name('color of stars')
//gui.add(parameters, 'size').min(0.001).max(0.1).step(0.001).onChange(generateGalaxy).name('size of stars in galaxy')
//gui.add(parameters, 'radius').min(1).max(10).step(1).onChange(generateGalaxy).name('radius of galaxy')
//gui.add(parameters, 'branches').min(1).max(10).step(1).onChange(generateGalaxy).name('branches in galaxy')
//gui.add(parameters, 'spin').min(-5).max(5).step(0.001).onChange(generateGalaxy).name('spin of the galaxy')
//gui.add(parameters, 'randomness').min(0).max(2).step(0.01).onChange(generateGalaxy)
//gui.add(parameters, 'randomnessPower').min(1).max(10).step(1).onChange(generateGalaxy)
//gui.addColor(parameters, 'insideColor').onChange(generateGalaxy).name('color of core')
//gui.addColor(parameters, 'outsideColor').onChange(generateGalaxy).name('color of branches')
let bgStarsGeometry = null
let bgStarsMaterial = null
let bgStars = null
//Background stars
function generateBgStars(){
if(bgStars!==null){
bgStarsGeometry.dispose()
bgStarsMaterial.dispose()
scene.remove(bgStars)
}
bgStarsGeometry = new THREE.BufferGeometry()
const bgStarsPositions = new Float32Array(parameters.stars * 3)
for(let j = 0; j<parameters.stars; j++){
bgStarsPositions[j*3 + 0] = (Math.random() - 0.5) * 20
bgStarsPositions[j*3 + 1] = (Math.random() - 0.5) * 20
bgStarsPositions[j*3 + 2] = (Math.random() - 0.5) * 20
}
bgStarsGeometry.setAttribute('position', new THREE.BufferAttribute(bgStarsPositions, 3))
bgStarsMaterial = new THREE.PointsMaterial({
color: 'white',
size: parameters.size,
depthWrite: false,
sizeAttenuation: true,
blending: AdditiveBlending,
color: parameters.starColor,
transparent: true,
alphaMap: shape
})
bgStars = new THREE.Points(bgStarsGeometry, bgStarsMaterial)
scene.add(bgStars)
scene.background = new THREE.Color( 0x313131 );
}
generateBgStars()
//gALAXY GENerator
let geometry = null
let material = null
let points = null
function generateGalaxy(){
if(points !== null){
geometry.dispose()
material.dispose()
scene.remove(points)
}
geometry = new THREE.BufferGeometry()
const positions = new Float32Array(parameters.count *3)
const colors = new Float32Array(parameters.count *3)
const colorInside = new THREE.Color(parameters.insideColor)
const colorOutside = new THREE.Color(parameters.outsideColor)
for(let i=0; i<parameters.count; i++){
//Position
const x = Math.random() * parameters.radius
const branchAngle = (i % parameters.branches) / parameters.branches * 2 * Math.PI
const spinAngle = x * parameters.spin
const randomX = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random()<0.5 ? 1: -1)
const randomY = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random()<0.5 ? 1: -1)
const randomZ = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random()<0.5 ? 1: -1)
positions[i*3] = Math.sin(branchAngle + spinAngle) * x + randomX
positions[i*3 + 1] = randomY
positions[i*3 + 2] = Math.cos(branchAngle + spinAngle) * x + randomZ
//Color
const mixedColor = colorInside.clone()
mixedColor.lerp(colorOutside, x / parameters.radius)
colors[i*3 + 0] = mixedColor.r
colors[i*3 + 1] = mixedColor.g
colors[i*3 + 2] = mixedColor.b
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
material = new THREE.PointsMaterial({
color: 'white',
size: parameters.size,
depthWrite: false,
sizeAttenuation: true,
blending: AdditiveBlending,
vertexColors: true,
transparent: true,
alphaMap: shape
})
points = new THREE.Points(geometry, material)
scene.add(points)
}
generateGalaxy()
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 4
camera.position.y = 0.4
camera.position.z = 4
scene.add(camera)
// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
//Update the camera
points.rotation.y = elapsedTime*0.005
bgStars.rotation.y = - elapsedTime*0.05
// Update controls
controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()

39
galaxy/src/style.css Normal file
View File

@ -0,0 +1,39 @@
*
{
margin: 0;
padding: 0;
}
html,
body
{
overflow: hidden;
}
.webgl
{
position: fixed;
top: 0;
left: 0;
outline: none;
}
.heading{
font-family: 'Space Mono', monospace;
z-index: 3;
position: absolute;
top: 30px;
left: 20px;
color: white;
}
.heading h1{
font-size: 3rem;
margin: 10px;
}
.heading h4{
font-size: 1rem;
font-weight: 400;
margin: 10px;
}

BIN
galaxy/static/.DS_Store vendored Normal file

Binary file not shown.

0
galaxy/static/.gitkeep Normal file
View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 B

BIN
galaxy/static/pkg/galaxy/.DS_Store vendored Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 259 B

BIN
icon/star.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

10
particles/css/style.css Normal file
View File

@ -0,0 +1,10 @@
body {
background:#313131;
color: #f1f1f1;
}
footer#footer {
text-align: center;
}
footer#footer a {
color: #f1f1f1;
}

15
particles/index.html Executable file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>ai/star</title>
</head>
<body>
<link rel="stylesheet" href="./pkg/particles/particles.css">
<link rel="stylesheet" href="./css/style.css">
<div id="particles-js"></div>
<script src="./pkg/particles/particles.min.js"></script>
<script src="./pkg/particles/config.js"></script>
</body>
<footer id="footer">© <a href="https://syui.ai">syui</a></footer>
</html>

View File

@ -0,0 +1 @@
particlesJS("particles-js", {"particles":{"number":{"value":91,"density":{"enable":true,"value_area":881.8766334760375}},"color":{"value":"#fff700"},"shape":{"type":"circle","stroke":{"width":2,"color":"#fff700"},"polygon":{"nb_sides":6},"image":{"src":"","width":100,"height":100}},"opacity":{"value":0.48102361825965684,"random":true,"anim":{"enable":true,"speed":1.0556403676876611,"opacity_min":0.11368434728944043,"sync":true}},"size":{"value":3,"random":true,"anim":{"enable":true,"speed":2,"size_min":0,"sync":true}},"line_linked":{"enable":false,"distance":849.808392258727,"color":"#fff700","opacity":0.44093831673801875,"width":6.894671861721749},"move":{"enable":true,"speed":0.1,"direction":"none","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":true,"rotateX":1000,"rotateY":5000}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"repulse"},"onclick":{"enable":true,"mode":"remove"},"resize":true},"modes":{"grab":{"distance":523.7600285834934,"line_linked":{"opacity":0.46067027525048987}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, update; count_particles = document.querySelector('.js-count-particles'); update = function() { if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { } requestAnimationFrame(update); }; requestAnimationFrame(update);;

View File

@ -0,0 +1,17 @@
canvas{
display: block;
vertical-align: bottom;
}
#particles-js{
/* position:absolute; */
position:static;
width: 100%;
height: 100%;
background-color: #313131;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.count-particles{
border-radius: 0 0 3px 3px;
}

View File

@ -0,0 +1 @@
{"particles":{"number":{"value":380,"density":{"enable":true,"value_area":2084.43567912518}},"color":{"value":"#fff700"},"shape":{"type":"circle","stroke":{"width":3,"color":"#fff700"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.32068241217310456,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":4.008530152163807,"random":true,"anim":{"enable":true,"speed":4.87218631240459,"size_min":2.4360931562022947,"sync":false}},"line_linked":{"enable":false,"distance":641.3648243462092,"color":"#fff700","opacity":0.09620472365193136,"width":0.16034120608655228},"move":{"enable":true,"speed":1,"direction":"none","random":true,"straight":true,"out_mode":"out","bounce":false,"attract":{"enable":true,"rotateX":1000,"rotateY":5000}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"grab"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true}

File diff suppressed because one or more lines are too long

View File

@ -1,3 +1,4 @@
# ai `star`
# <img src="./icon/star.png" width="30"> ai `star`
- [particles.js](https://github.com/VincentGarreau/particles.js)
- [galaxy](https://github.com/the-halfbloodprince/GalaxyM1199)