Make a simple pixel art generator with Flask

Completed form

It looks like the following. 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. https://akihanari.github.io/gif-amabie/

Language, framework, etc.

• HTML5
• CSS3
• Bootstrap
• Python
• Flask
• Heroku

file organization

• templates
• layout.html
• index.hrml
• app.py
• Procfile
• requirements.txt

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. 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

reference

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