diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a192fc0 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +**node_modules +**.git +**dist +**dist +**.firebase +**lock* diff --git a/galaxy/bundler/webpack.common.js b/galaxy/bundler/webpack.common.js new file mode 100644 index 0000000..7662edc --- /dev/null +++ b/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/' + } + } + ] + } + ] + } +} diff --git a/galaxy/bundler/webpack.dev.js b/galaxy/bundler/webpack.dev.js new file mode 100644 index 0000000..919fd34 --- /dev/null +++ b/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)}`) + } + } + } +) diff --git a/galaxy/bundler/webpack.prod.js b/galaxy/bundler/webpack.prod.js new file mode 100644 index 0000000..295140e --- /dev/null +++ b/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() + ] + } +) diff --git a/galaxy/package.json b/galaxy/package.json new file mode 100644 index 0000000..f198f52 --- /dev/null +++ b/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" + } +} diff --git a/galaxy/src/index.html b/galaxy/src/index.html new file mode 100644 index 0000000..a25028c --- /dev/null +++ b/galaxy/src/index.html @@ -0,0 +1,11 @@ + + + + + + ai/galaxy + + + + + diff --git a/galaxy/src/script.js b/galaxy/src/script.js new file mode 100644 index 0000000..e2da409 --- /dev/null +++ b/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 +{ + // 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() diff --git a/galaxy/src/style.css b/galaxy/src/style.css new file mode 100644 index 0000000..17374f6 --- /dev/null +++ b/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; +} diff --git a/galaxy/static/.DS_Store b/galaxy/static/.DS_Store new file mode 100644 index 0000000..1b18240 Binary files /dev/null and b/galaxy/static/.DS_Store differ diff --git a/galaxy/static/.gitkeep b/galaxy/static/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/galaxy/static/particleShape/1.png b/galaxy/static/particleShape/1.png new file mode 100644 index 0000000..b744f88 Binary files /dev/null and b/galaxy/static/particleShape/1.png differ diff --git a/galaxy/static/pkg/galaxy/.DS_Store b/galaxy/static/pkg/galaxy/.DS_Store new file mode 100644 index 0000000..1b18240 Binary files /dev/null and b/galaxy/static/pkg/galaxy/.DS_Store differ diff --git a/galaxy/static/pkg/galaxy/particleShape/1.png b/galaxy/static/pkg/galaxy/particleShape/1.png new file mode 100644 index 0000000..b744f88 Binary files /dev/null and b/galaxy/static/pkg/galaxy/particleShape/1.png differ diff --git a/css/style.css b/particles/css/style.css similarity index 100% rename from css/style.css rename to particles/css/style.css diff --git a/icon/star.png b/particles/icon/star.png similarity index 100% rename from icon/star.png rename to particles/icon/star.png diff --git a/index.html b/particles/index.html similarity index 100% rename from index.html rename to particles/index.html diff --git a/pkg/particles/config.js b/particles/pkg/particles/config.js similarity index 100% rename from pkg/particles/config.js rename to particles/pkg/particles/config.js diff --git a/pkg/particles/particles.css b/particles/pkg/particles/particles.css similarity index 100% rename from pkg/particles/particles.css rename to particles/pkg/particles/particles.css diff --git a/pkg/particles/particles.json b/particles/pkg/particles/particles.json similarity index 100% rename from pkg/particles/particles.json rename to particles/pkg/particles/particles.json diff --git a/pkg/particles/particles.min.js b/particles/pkg/particles/particles.min.js similarity index 100% rename from pkg/particles/particles.min.js rename to particles/pkg/particles/particles.min.js diff --git a/readme.md b/particles/readme.md similarity index 65% rename from readme.md rename to particles/readme.md index a3769c5..22e2733 100644 --- a/readme.md +++ b/particles/readme.md @@ -1,3 +1,4 @@ # ai `star` - [particles.js](https://github.com/VincentGarreau/particles.js) +- [galaxy](https://github.com/the-halfbloodprince/GalaxyM1199)