완성형

다음과 같은 느낌.

h tps : // f ㎁ s 칸으로 ぇ로쿠. 어리석은 p. 코m/

사양

상단 화면에는 무작위로 생성 된 도트 그림이 표시됩니다

랜덤 생성 버튼을 누르면 무작위로 도트 그림이 표시됩니다.

도트 그림은 이미지가 아닌 문자의 "■ (사각형)"로 구성됩니다

문자를 이미지로 변환하는 기술은 구현되지 않습니다

Twitter 공유 버튼 배치

만들려고 생각한 경위

Flask를 공부 중이기 때문에 간단한 아티팩트를 만들고 싶어졌습니다

이하와 같은 도트 그림을 그리는 것이 취미이므로, 자동으로 생성할 수 있는 툴을 만들어 보고 싶어졌다

h tps://아키하나리. 기주 b. 이오 / 기 f - 아마 비에 /

사용언어나 프레임워크 등

HTML5

CSS3

Bootstrap

Python

Flask

Heroku

파일 구성

templates

layout.html

index.hrml

app.py

Procfile

requirements.txt

메커니즘(코드)

간단합니다.

# 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)

먼저 @app.route('/')에 이중 루프 함수를 만듭니다.
이번에는 8×8의 도트를 만드는데, 각 도트의 색이 흰색인지 검정인지를 결정하기 때문에,
0~3의 임의의 숫자를 생성합니다.
예를 들면 이런 느낌이 되고 있습니다

11230032
31231000
30023111
12213303
01202010
32111320
01322031
00011203

그런 다음 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 %}

코드가 매우 더럽고 죄송합니다.
만든 이중 루프의 숫자를 "■", 흰색 또는 검정으로 연결합니다.
이번에는 숫자가 0일 때만 검정으로, 그 이외의 숫자의 경우는 흰색(같은)색으로 변환합니다.

그러면 이러한 도트 그림이 표시되는 것입니다.

개선점

스마트폰 표시라면 도트 그림이 약간 무너져 버린다

생성 된 도트 그림을 이미지로 변환하고 저장할 수 있습니다.

더 도트 그림 같은 도트 그림을 생성하고 싶다

참고

paiza Flask 입문 1 : 파이썬으로 웹 애플리케이션을 만들자.