Welcome to the Pixel Art Generator! This web application allows users to create pixel art easily by providing a canvas with customizable grid sizes and various features for an enhanced pixel art creation experience. Or at least, that is what one would hope. The truth is that at the moment this is just being used as a PoC and test image for CI/CD automation processes. It works, but you can find better images elsewhere as I just spun this app up from scratch in a day with no real plan on what to throw into it.
To get started with the Pixel Art Generator, follow the instructions below.
Make sure you have the following installed on your system:
Optional:
- Terraform (for deploying with Terraform if desired)
-
Clone the repository:
git clone https://github.com/your-username/pixel-art-generator.git
-
Change into the project directory:
cd pixel-art-generator
-
docker build -t pixel-art-generator .
docker build -t pixel-art-generator .
Skip 1b and move to Docker Installation for next steps
If you prefer not to build the image locally, you can pull the Docker image directly from Docker Hub:
docker pull mylesvarns/pixelartgenerator
Run the following Docker command to start the Pixel Art Generator:
docker run -p 3000:3000 3001:3001 -e SECRET_KEY_BASE=$(docker run --rm pixel-art-generator bin/rails secret) pixel-art-generator
When creating the container manually you will need to state the SECRET_KEY_BASE value before running the app or you will get an immediate termination of the container. The secret key base is the string that Rails uses to encrypt your credentials file. If the above docker run command does not work due to permissions, then it is recommended that you generate a new SECRET_KEY_BASE
value using one of the following commands:
-
Linux/Mac:
< /dev/urandom tr -dc 'a-zA-Z0-9' | head -c 64
-
Windows (PowerShell):
$randomString = -join ((48..57) + (65..90) + (97..122) | Get-Random -Count 64 | ForEach-Object {[char]$_}) $randomString
If you prefer using Terraform to manage your infrastructure, you can deploy the Pixel Art Generator with the following steps:
-
Install Terraform on your machine. You can follow the official installation guide here.
-
Create a terraform file, in this case we will call it
main.tf
, with the following content:terraform { required_providers { docker = { source = "kreuzwerker/docker" version = "~> 3.0.2" } } } resource "random_password" "rails_secret_key_base" { length = 64 special = true } provider "docker" { host = "npipe:////.//pipe//docker_engine" } resource "docker_image" "pixelartgenerator" { name = "pixelartgenerator:0.1" } resource "docker_container" "pixelartgenerator" { image = docker_image.pixelartgenerator.name name = "pixelartgenerator" logs = true ports { internal = 3000 external = 3000 } ports { internal = 3001 external = 3001 } env = [ "SECRET_KEY_BASE=${random_password.rails_secret_key_base.result}", ] }
-
Replace the docker provider above with this if you are using windows and docker instead of linux.
provider "docker" { host = "npipe:////.//pipe//docker_engine" }
-
Run the following commands in your terminal:
terraform init terraform apply
-
Terraform will prompt you to confirm the changes. Type yes to proceed.
-
Voila. The image is now running as a container.
The application will be accessible at http://localhost on ports 3000 (http) and 3001 (https) by default. If you have this behind a reverse proxy then you will need to follow the configuration requirements for your proxy setup.
Main webpage allows you to select a pixel grid size and upload an image that will be pixalated.
To modify this page, open the index.html.erb
file located in app/views/pixel_art_generator/
within the container to view the main webpage. This HTML file contains the structure for the Pixel Art Generator interface. Note that any change you make to the running container will not persist and is recommended. If you plan on modifying, it is recommened to build from source so you can modify the container and rebuild it when required.
Customize the appearance of the Pixel Art Generator by modifying the CSS file located at app/assets/stylesheets/pixel_art_generator.css
. Adjust pixel sizes, container styles, and button appearances as needed.
For additional functionality, explore the JavaScript file at app/assets/javascripts/pixel_art_generator.js
. The main logic for pixel manipulation and canvas creation resides here.
Note that any functions you add to the .js file where you expect user interaction to work with will require a corresponding element in the html.erb file, a depending on what it is likely a small change to the .css file to make it look correct.
Contributions are welcome! Feel free to open issues or submit pull requests to enhance the Pixel Art Generator.
This project is licensed under the MIT License.