inglow Blog

Tech Blog
エンジニアブログ

python3.8でランダム配色ツール作成

2020.06.30

このエントリーをはてなブックマークに追加

こんにちは。inglowの開発担当です。
今回は、近年超キテる「python」を使って、簡単なランダム配色ツールを作成してみようと思います。

開発環境は下記です。

  • バージョン:python3.8.3
  • エディタ:notepad++

今回作るもの

配色理論に基づいて色コードを計算するものを作ってみても面白いかなと思っているのですが、pythonが超初心者ということもあり、今回は4色の組み合わせをランダムで表示するというシンプルなものを作成してみようと思います。
ウィンドウが開いた時にランダムで4色を表示する
ボタンによって違うランダム4色に変更する
ボタンで配色画像を画像として保存する
という機能を実装していきます。

GUIの作成

まずはGUIを生成していきます。GUIで必要なのは、「ランダム生成された4色の表示部分」、「色変更」ボタン、「画像保存」ボタンの3つです。
GUIを表現するためのライブラリはいくつかあるみたいですが、今回は一番よく目にした「tkinter」を使用しました。

まずはウィンドウを表示するところまで書いてみます。

何もないウィンドウが表示されるかと思います。ウィンドウの表示はこんな感じでできました。次にボタンを生成してみます

ここまで書いて実行すると、ボタンが2つ縦並びで表示されます。
「btn_sv.grid(row=n, column=m)」の部分は、横列のn番目、楯列のm番目に配置するという指定です。HTMLでいうと、tableタグのようなイメージが近いと思います。

次は表示部分です。表示部分は、画像出力をしたかったため、「canvas」を利用することにしました。canvasでは、描画した要素にタグをつけてあとからプロパティの変更(色変更とか)もできるようです。今回描画したい内容は、正方形を横に4つなので、動的に生成されるように記述しました。

ここまでで表示部分は出来上がってきました。ここまでのソース全文は下記のような感じです

ここまでで実行すると、白い四角が4つとボタンが表示された状態になります。まだ押しても何もならないです。

ランダムに色を生成する処理を作成する

色を変える処理を作る前に、ランダムな色生成をするための関数を作成します。
パソコンでの色表現の基本は、「R(Red)」「G(Green)」「B(Blue)」のそれぞれに「0~255」の数値を当てはめて色を構成します。最大値が255なのは、16進数の2桁の数字の最大値(0xFF)の10進数が255のためです。(このあたりの詳しい説明は省きます…!)
そのためまずは、「0~255のランダムな数値を生成して16進数に変換」する処理を3回行い、それを文字列として結合する処理を書いていきます。

これで、ランダムに色を生成して、HTMLでもおなじみの16進数6桁の形式でカラーコードを返す処理ができました。

表示色を変える処理を作成する

canvs内の四角の色を変更する処理を書いていきます。タグ名を指定して色を指定していけばいいのですが、一回ボタンをおされた時に4回うごく必要があります。何回も同じ処理がうごくことになるのでこれも関数を分けて書いていきます

関数が作れたら、次はボタンが押された時に処理が動くようにします

このままだと、ウィンドウを開いた時は白い四角が4つ表示された状態になってしまうため、ウィンドウが表示された時も色がつくようにするため、ボタンの記述の後に色変更の関数を呼び出すようにしますここまで書くと、ファイル全体の記述は下記のような感じになります

画像保存処理の作成

最後に画像を保存する処理を書いていきます。画像はフォルダを選択して保存されるようにし、ファイル名に日時が入るようにしました。

ここまで書けたら、あとは色変更関数をボタンに組み込んだのと同じように、「画像を保存する」ボタンに画像保存の関数を組み込んだら完成です!
最終的なコード全体の内容は下記です

実物

webアプリケーションのように埋め込みができないので、今回は操作した感じの動画を準備しました。
このコードにさらに、色を固定する機能をつけてみました。

さいごに

普段使用しているPHPと構文は少し違いたまにシンタックスエラーが出てしまいますが…(笑)
意外と難なく処理はかけているので、もっと進んで、機械学習や画像の解析・加工等もやってみたいです。

Related Blog
関連記事

2020.07.03
Pythonの各フレームワーク
2020.07.02
openCVで画像解析をしてみよう!
2020.07.01
Pythonでスクレイピングして遊んでみる
2020.06.26
PHPでのエスケープ処理
2020.06.25
初心者のための人工知能(AI)の基礎知識