(how this is my most popular repo?)

amachiromaker

Update: All the files of amachiromaker are in the actual picrew server, we have been fooled for years, this is a fork for changing all the files that reference the wayback machine server to the actual picrew server.

I created this website since the original one was not accessible (as of November 2021; was taken down by its author 甘城なつき). Original website: amachiromaker｜Picrew.

This website is not a one-to-one clone of the original one, rather it is rewritten from scratch using basic React (very lightweight, no UI library used).

Note: The original artwork (layers in the image) is not (and will not be) provided due to copyright reasons. You have to download them yourself (by running yarn build-static). I am not responsible if you violate the license.

How to Build

Build or Develop Locally

Before you begin, make sure node (>= 14), yarn, GNU Make, and curl are installed. Also, it is recommended to use a bash-compatible shell (try WSL/MinGW/Cygwin if you run into problems in Windows).

If you do not want to install all the dependencies, use Docker to build the image (next section). You can extract build artifacts from build/.

• Run yarn install to install dependencies.
• Run yarn build-static to download original artworks from Wayback Machine
  • By doing this, you agree that you will follow the license on the original webpage (Wayback Machine copy) and are responsible for any consequences if you violate the license.
  • Optionally, you may use yarn build-static -jx to enable parallel downloads, where x = number of threads.
  • If you are throttled by Wayback Machine, just retry later.
• Run yarn start to start development server. Your browser should open shortly.
• Or, run yarn build to build the website. Static files will be located under build/.

Build Docker Image

Just run docker build . -t charlie0129/amachiromaker to build the image.

How to Deploy

You have two options to deploy this application. Choose the one you like.

Containerized

1. Make sure docker and docker-compose are installed and updated.
2. Copy .env as .env.local. This is your configuration file.
3. Depending on whether you want to have traefik as a reverse proxy, you have two options:
   1. No traefik: ./runner.sh start prod -v -d (listens on PORT in .env.local, defaults to 8081)
   2. With traefik: ./runner.sh start prod-traefik -v -d (you need to configure traefik yourself. remember to check the traefik configurations in docker-compose.traefik.yml and WEBSITE_URL in .env.local)

If you wonder what the heck is ./runner.sh, you can find it here (charlie0129/server-app-runner) .

Other

If you do not have Docker, try using a static file server to serve the build/ directory (after you successfully built the project).

Quick examples:

• python3 -m http.server -d build 3000 (python3 should be installed)
• serve build (serve should be installed by yarn global add serve)

Preferably:

• nginx (example configuration is in nginx.conf)

Features

• Choose any combinations you want, with live preview.
• Auto save. Your changes will be preserved between page reloads.
• Download output image as PNG or PSD (with all the separate layers you can fiddle with).
• Download raw layer combination presets. You can load the preset and make changes to it later.

Fig.1 - Screenshot

Fig.2 - Animated GIF

Fig.3 - PSD Layers

Any of the artwork above will not be provided in this repository.

Copyright of the artwork belongs to the original author.

Description of the Scripts

Generally, you will not need to use these scripts. They will be executed automatically when generating static files.

• scripts/data/ JSONs from the original website, containing layer info. Scripts below will use them.
• scripts/findDefaultCombination.js find out the layer combination to compose the default picture.
• scripts/findDepth.js order the layers by depth.
• scripts/generateMakefile.js generate Makefile to download all the layers from Wayback Machine.
• scripts/organizeData.js reconstruct the original data to make it easier to use (mainly by combining image srcs of different colors into layer objects).

If you find this project interesting, stars⭐️ are appreciated.