Git Product home page Git Product logo

amachiromaker's Introduction

amachiromaker

Update: As of May 2022, Wayback Machine also excluded all the artworks. So, the download script provided in the repo will fail. Unfortunately, I cannot provide the artworks due to copyright reasons. You have to somehow find all the artworks yourself, otherwise it won't work (you will see blank images everywhere). You can check what files are needed and where they are located in Makefile after running node scripts/generateMakefile.js. There are over 1,000 items (it is not a easy task)...

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:

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.

Screenshot

Fig.1 - Screenshot

Animated GIF

Fig.2 - Animated GIF

PSD Layers

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.

amachiromaker's People

Contributors

charlie0129 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.