Make a simple pixel art generator with Flask

Completed form

It looks like the following. スクリーンショット 2020-11-21 7.03.51.png https://flaskandheroku.herokuapp.com/

specification

--Randomly generated pixel art is displayed on the top screen --When you press the "Random generation" button, a dot picture is displayed at random. -Pixel art is not an image but is composed of the characters "■ (square)" --The technology to convert characters to images is not implemented --Place Twitter share button

How I decided to make it

――I'm studying Flask, so I wanted to make a simple deliverable. ――My hobby is to draw the following pixel art, so I wanted to make a tool that can be generated automatically. スクリーンショット 2020-11-21 7.14.34.png https://akihanari.github.io/gif-amabie/

Language, framework, etc.

file organization

Mechanism (code)

It's simple.

# app.py

@app.route('/')
def dot_gene():
    numbers = [[random.randrange(4) for i in range(8)] for j in range(8)]
    return render_template("index.html", numbers = numbers)

First, create a double loop function in @ app.route ('/'). This time I will make 8x8 dots, but to decide whether the color of each dot is white or black, Generates a random number from 0 to 3. For example, it looks like this

11230032
31231000
30023111
12213303
01202010
32111320
01322031
00011203

Next, process it in index.html.

# index.html
{% extends "layout.html" %}
      {% block content %}
        <h1>Pixel art generator</h1>
        <div class="spaces">
          {% for number in numbers %}
            {% for num in number %}
                {% if num == 0 %}
                  <font color="#000000">■</font>
                {% elif num == 1%}
                  <font color="#ededed">■</font>
                {% elif num == 2%}
                  <font color="#ededed">■</font>
                {% else %}
                  <font color="#ededed">■</font>
                {% endif %}
              {% endfor %}
              <br>
          {% endfor %}
       </div>
        .
        .
        .
{% endblock %}

~~ I'm very sorry that the code is very dirty ~~ Associate the created double loop number with "■", white or black. This time, only when the number is 0, it is converted to black, and when the number is not, it is converted to white (like) color. スクリーンショット 2020-11-21 8.22.10.png Then, such a dot picture will be displayed.

Improvement points

--The pixel art is slightly broken when displayed on a smartphone. --I want to be able to convert the generated pixel art into an image and save it. ――I want to generate more pixel art like pixel art smartphone.png

reference

Introduction to paiza Flask 1: Let's make a web application with Python

Recommended Posts

Make a simple pixel art generator with Flask
Creating a simple app with flask
Make a rare gacha simulator with Flask
Let's make a simple language with PLY 1
Create a simple web app with flask
[Python] Make a simple maze game with Pyxel
Make a morphological analysis bot loosely with LINE + Flask
Make a simple Slackbot with interactive button in python
Let's make a simple game with Python 3 and iPhone
What is God? Make a simple chatbot with python
Make a fortune with Python
Make a fire with kdeplot
How to make a Cisco Webex Teams BOT with Flask
Make a LINE bot with GoogleAppEngine / py. Simple naked version
I made a simple book application with python + Flask ~ Introduction ~
How to make a simple Flappy Bird game with pygame
[Python] Make a simple maze game with Pyxel-Make enemies appear-
Create a pixel art of Levi Captain with Python programming!
Make ASCII art with deep learning
Let's make a GUI with python.
Make a sound with Jupyter notebook
Creating a Flask server with Docker
Let's make a breakout with wxPython
Make a recommender system with python
Make Flask a Cloud Native application
Make a filter with a django template
Let's make a graph with python! !!
Let's make a supercomputer with xCAT
Make a model iterator with PySide
Make a nice graph with plotly
Make a curtain generator in Blender
Let's make a WEB application for phone book with flask Part 1
Rubyist tried to make a simple API with Python + bottle + MySQL
Let's make a WEB application for phone book with flask Part 2
Make a simple OMR (mark sheet reader) with Python and OpenCV
Let's make a WEB application for phone book with flask Part 3
Let's make a WEB application for phone book with flask Part 4
Creating a simple PowerPoint file with Python
Python: I tried to make a flat / flat_map just right with a generator
A simple RSS reader made with Django
Let's make a shiritori game with Python
Make a video player with PySimpleGUI + OpenCV
Python beginners decided to make a LINE bot with Flask (Flask rough commentary)
Make a Notebook Pipeline with Kedro + Papermill
Make a wireless LAN Ethernet converter and simple router with Raspberry Pi
Make a partially zoomed figure with matplotlib
Make a drawing quiz with kivy + PyTorch
Let's make a voice slowly with Python
Make a cascade classifier with google colaboratory
Make a logic circuit with a perceptron (multilayer perceptron)
Make a Yes No Popup with Kivy
Make a wash-drying timer with a Raspberry Pi
Make a GIF animation with folder monitoring
I made a stamp generator with GAN
Let's make a web framework with Python! (1)
Create a web service with Docker + Flask
Let's make a tic-tac-toe AI with Pylearn 2
Make a desktop app with Python with Electron
Let's make a Twitter Bot with Python!
Let's make a web framework with Python! (2)
I made a simple blackjack with Python