├── .gitignore ├── LICENSE ├── README.md ├── banner.png ├── build ├── 1.png.png ├── 2.png.png ├── 3.png.png ├── 4.png.png └── 5.png.png ├── index.js ├── input ├── 1.png ├── 2.png ├── 3.png ├── 4.png └── 5.png ├── logo.png ├── package.json └── src ├── config.js └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 HashLips 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ​​# Welcome to HashLips 👄 2 | 3 | ![](https://github.com/HashLips/hashlips_art_pixelator/blob/main/logo.png) 4 | 5 | All the code in these repos was created and explained by HashLips on the main YouTube channel. 6 | 7 | To find out more please visit: 8 | 9 | [📺 YouTube](https://www.youtube.com/channel/UC1LV4_VQGBJHTJjEWUmy8nA) 10 | 11 | [👄 Discord](https://discord.com/invite/qh6MWhMJDN) 12 | 13 | [💬 Telegram](https://t.me/hashlipsnft) 14 | 15 | [🐦 Twitter](https://twitter.com/hashlipsnft) 16 | 17 | [ℹ️ Website](https://hashlips.online/HashLips) 18 | 19 | # HashLips Art Pixelator 🔥 20 | 21 | ![](https://github.com/HashLips/hashlips_art_pixelator/blob/main/banner.png) 22 | 23 | HashLips Art Pixelator is a tool used to convert multiple images to pixelated images. 24 | 25 | ## Installation 🛠️ 26 | 27 | If you are cloning the project then run this first, otherwise you can download the source code on the release page and skip this step. 28 | 29 | ```sh 30 | git clone https://github.com/HashLips/hashlips_art_engine.git 31 | ``` 32 | 33 | Go to the root of your folder and run this command if you have yarn installed. 34 | 35 | ```sh 36 | yarn install 37 | ``` 38 | 39 | Alternatively you can run this command if you have node installed. 40 | 41 | ```sh 42 | npm install 43 | ``` 44 | 45 | ## Usage ℹ️ 46 | 47 | In order to convert images into pixelated images you would need a list of images that you want to convert. Place all these images that will be converted in the `/input` directory. 48 | 49 | Then simply run this command: 50 | 51 | ```sh 52 | node index.js 53 | ``` 54 | 55 | All your images will be outputted in the `/build` directory. 56 | If you want to change the ratio of the pixelation then you can update the ratio property on the `pixelFormat` object in the `src/config.js` file. The lower the number on the left, the more pixelated the image will be. 57 | 58 | ```js 59 | const pixelFormat = { 60 | ratio: 5 / 128, 61 | }; 62 | ``` 63 | 64 | That's it, now you have pixelated images. 65 | 66 | Hope you create some awesome artworks with this code 👄 67 | -------------------------------------------------------------------------------- /banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/banner.png -------------------------------------------------------------------------------- /build/1.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/build/1.png.png -------------------------------------------------------------------------------- /build/2.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/build/2.png.png -------------------------------------------------------------------------------- /build/3.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/build/3.png.png -------------------------------------------------------------------------------- /build/4.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/build/4.png.png -------------------------------------------------------------------------------- /build/5.png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/build/5.png.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const { startCreating, buildSetup } = require("./src/main.js"); 2 | 3 | (() => { 4 | buildSetup(); 5 | startCreating(); 6 | })(); 7 | -------------------------------------------------------------------------------- /input/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/input/1.png -------------------------------------------------------------------------------- /input/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/input/2.png -------------------------------------------------------------------------------- /input/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/input/3.png -------------------------------------------------------------------------------- /input/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/input/4.png -------------------------------------------------------------------------------- /input/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/input/5.png -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashLips/hashlips_art_pixelator/68e736ec143e6c5eb67be180a47e5ef9c15cfe77/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hashlips_art_pixelator", 3 | "version": "1.0.0", 4 | "description": "HashLips Art Pixelator is a tool used to convert multiple images to pixelated images.", 5 | "main": "index.js", 6 | "bin": "index.js", 7 | "pkg": { 8 | "assets": [ 9 | "layers/**/*" 10 | ], 11 | "scripts": [ 12 | "src/main.js", 13 | "src/config.js" 14 | ], 15 | "outputPath": "dist" 16 | }, 17 | "scripts": { 18 | "build": "node index.js", 19 | "test": "echo \"Error: no test specified\" && exit 1" 20 | }, 21 | "author": "Daniel Eugene Botha (HashLips)", 22 | "license": "MIT", 23 | "dependencies": { 24 | "canvas": "^2.8.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | const pixelFormat = { 2 | ratio: 5 / 128, 3 | }; 4 | 5 | const format = { 6 | width: 512, 7 | height: 512, 8 | }; 9 | 10 | module.exports = { 11 | format, 12 | pixelFormat, 13 | }; 14 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | const { createCanvas, loadImage } = require("canvas"); 4 | const isLocal = typeof process.pkg === "undefined"; 5 | const basePath = isLocal ? process.cwd() : path.dirname(process.execPath); 6 | const buildDir = `${basePath}/build`; 7 | const inputDir = `${basePath}/input`; 8 | const { format, pixelFormat } = require(path.join(basePath, "/src/config.js")); 9 | const console = require("console"); 10 | const canvas = createCanvas(format.width, format.height); 11 | const ctx = canvas.getContext("2d"); 12 | 13 | const buildSetup = () => { 14 | if (fs.existsSync(buildDir)) { 15 | fs.rmdirSync(buildDir, { recursive: true }); 16 | } 17 | fs.mkdirSync(buildDir); 18 | }; 19 | 20 | const getImages = (_dir) => { 21 | return fs 22 | .readdirSync(_dir) 23 | .filter((item) => { 24 | let extension = path.extname(`${_dir}${item}`); 25 | if (extension == ".png" || extension == ".jpg") { 26 | return item; 27 | } 28 | }) 29 | .map((i) => { 30 | return { 31 | filename: i, 32 | path: `${_dir}/${i}`, 33 | }; 34 | }); 35 | }; 36 | 37 | const loadImgData = async (_imgObject) => { 38 | return new Promise(async (resolve) => { 39 | const image = await loadImage(`${_imgObject.path}`); 40 | resolve({ imgObject: _imgObject, loadedImage: image }); 41 | }); 42 | }; 43 | 44 | const draw = (_imgObject) => { 45 | let size = pixelFormat.ratio; 46 | let w = canvas.width * size; 47 | let h = canvas.height * size; 48 | ctx.imageSmoothingEnabled = false; 49 | ctx.drawImage(_imgObject.loadedImage, 0, 0, w, h); 50 | ctx.drawImage(canvas, 0, 0, w, h, 0, 0, canvas.width, canvas.height); 51 | }; 52 | 53 | const saveImage = (_loadedImageObject) => { 54 | fs.writeFileSync( 55 | `${buildDir}/${_loadedImageObject.imgObject.filename}.png`, 56 | canvas.toBuffer("image/png") 57 | ); 58 | }; 59 | 60 | const startCreating = async () => { 61 | const images = getImages(inputDir); 62 | let loadedImageObjects = []; 63 | images.forEach((imgObject) => { 64 | loadedImageObjects.push(loadImgData(imgObject)); 65 | }); 66 | await Promise.all(loadedImageObjects).then((loadedImageObjectArray) => { 67 | loadedImageObjectArray.forEach((loadedImageObject) => { 68 | draw(loadedImageObject); 69 | saveImage(loadedImageObject); 70 | console.log(`Pixelated image: ${loadedImageObject.imgObject.filename}`); 71 | }); 72 | }); 73 | }; 74 | 75 | module.exports = { startCreating, buildSetup }; 76 | --------------------------------------------------------------------------------