fix

.gitignore

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

galaxy/bundler/webpack.common.js

@@ -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/'
+                        }
+                    }
+                ]
+            }
+        ]
+    }
+}

galaxy/bundler/webpack.dev.js

@@ -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)}`)
+            }
+        }
+    }
+)

galaxy/bundler/webpack.prod.js

@@ -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()
+        ]
+    }
+)

galaxy/package.json

@@ -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"
+  }
+}

galaxy/src/index.html

@@ -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>

galaxy/src/script.js

@@ -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()

galaxy/src/style.css

@@ -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;
+}

particles/css/style.css

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

particles/index.html

@@ -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>

particles/pkg/particles/config.js

@@ -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);;

particles/pkg/particles/particles.css

@@ -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;
+}

particles/pkg/particles/particles.json

@@ -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}

readme.md

@@ -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)