【超初心者が】Processingでプログラミング言語pythonを使って自分のロゴを作ってみた

↑↑↑自作のロゴ完成図↑↑↑

Processing pythonを使って図形が書けるようになったので、一つ作品を作ろうと思い自分のロゴ作成をしてみました

↓↓↓ロゴ作成に必要な内容は以下の記事になります↓↓↓

【超初心者向け】Processingでプログラミング言語Pythonを使った線の描き方ついて

【超初心者向け】Processingでプログラミング言語Pythonを使った図形の描き方について

【超初心者向け】Processingでプログラミング言語Pythonを使っって図形や線に色をつけてみよう

とりあえず、自分のイメージをそのまま出していきたいので自分の好きな色を背景に名前をはっきりとつくりたいです

イメージはユニクロのロゴをイメージして作っていきます。

完成コードは記事の最後に載せてあります興味があれば是非

↓↓↓Processingって何？という方はこちらの記事を↓↓↓

↓↓↓Processingのインストールや設定の変更についてはこちらの記事を↓↓↓

背景や文字のレイアウトのイメージ作成

こんな感じ

作成コード

size(230, 230)
background(0, 0, 255)

fill(255)
rect(20, 20, 140, 140)

fill(255, 255, 0)
rect(70, 70, 140, 140)

では、ここから初めてロゴづくりを始めていきます。

設計図

イメージが作成ができたので

どんな感じで文字にしていくか

設計図を方眼用紙を使って作成

ポイント

• Processing pythonでやるので数値化
• 比率で出しているのでサイズ感が変わっても見た目は変わりにくい
• 初めからコードを書くよりイメージがしやすい
• 全体像が見えてきた

Processingを使用してイメージをグラフィックにしていきます

文字入力でもできますが

楽しくないので

あえて四角を使ってやります。

カタカナの（タ）作成

まず、四角を組み合わせてみる

周りの黒枠が少し邪魔かな…

作成コード

size(230, 230)
background(0, 0, 255)

fill(255)

rect(20, 20, 40, 80)
rect(60, 30, 40, 10)
rect(60, 70, 40, 10)
rect(100, 20, 40,120)

黒枠を消す　

コードにnoStroke()入れるだけ

黒枠線が消えて文字っぽく見えました

黒枠線はない方がいい

作成コード

size(230, 230)
background(0, 0, 255)

fill(255)
noStroke()
rect(20, 20, 40, 80)
rect(60, 30, 40, 10)
rect(60, 70, 40, 10)
rect(100, 20, 40,120)

『タ』から『ダ』にしていきます。

『タ』に濁点をつけていきます。

濁点を2つ足したてみた

次は枠がなくてわかりにくい

濁点には黒い枠をつける

コードにstroke()をつける

濁点には枠がある方がはっきりするからわかりやすい

作成コード

size(230, 230)
background(0, 0, 255)

fill(255)
noStroke()
rect(20, 20, 40, 80)
rect(60, 30, 40, 10)
rect(60, 70, 40, 10)
rect(100, 20, 40,120)
stroke(0)
rect(110, 10, 20, 40)
rect(130, 10, 20, 40)

注意点

stroke()のカッコ内には数値が必要

０→黒　　255→白

noStroke()の場合は周知なしでも大丈夫

１文字目が出来たらあとはコピペと位置座標の編集

一文字目ができるまでが大変でした

あとは、文字の位置座標の調整で何とかできました。

完成

とりあえずできたことが一番うれしい

作成コード

size(230, 230)
background(0, 0, 255)

fill(255)
noStroke()
rect(20, 20, 40, 80)
rect(60, 30, 40, 10)
rect(60, 70, 40, 10)
rect(100, 20, 40,120)
stroke(0)
rect(110, 10, 20, 40)
rect(130, 10, 20, 40)

fill(255, 255, 0)
noStroke()
rect(90, 100, 40, 80)
rect(130, 110, 40, 10)
rect(130, 150, 40, 10)
rect(170, 100, 40,120)
stroke(0)
rect(180, 90, 20, 40)
rect(200, 90, 20, 40)

ただ一つ問題が

それはめっちゃちっさいこと

大体1/3のサイス間が実際のサイズ感です

パソコンで見た時はすごくわかりやすいけど、スマホで見た時は分かりにくかったので…

最後にサイズの変更

変数を使用してロゴのサイズ感を変更していきます

設計図を作成した時に比率で数値を出しているので

各数値がある部分に変数ｘを付け加える

するとｘの数値を変えるだけで倍率が変化

作成コード

x = 1 #230の倍率を入力


size(2100, 1600)

fill(0, 0, 255)
rect(0, 0, 230 * x, 230 * x)


fill(255)
noStroke()
rect(20 * x, 20 * x, 40 * x, 80 * x)
rect(60 * x, 30 * x, 40 * x, 10 * x)
rect(60 * x, 70 * x, 40 * x, 10 * x)
rect(100 * x, 20 * x, 40 * x,120 * x)
stroke(0)
rect(110 * x, 10 * x, 20 * x, 40 * x)
rect(130 * x, 10 * x, 20 * x, 40 * x)

fill(255, 255, 0)
noStroke()
rect(90 * x, 100 * x, 40 * x, 80 * x)
rect(130 * x, 110 * x, 40 * x, 10 * x)
rect(130 * x, 150 * x, 40 * x, 10 * x)
rect(170 * x, 100 * x, 40 * x,120 * x)
stroke(0)
rect(180 * x, 90 * x, 20 * x, 40 * x)
rect(200 * x, 90 * x, 20 * x, 40 * x)

倍率変更

×１倍

×２倍

×３倍

×４倍

×５倍

まとめ

初めてのロゴづくり

どうやって作るかわからない部分も多く

ただ思い付きをやってみました

これがロゴと呼べるかもよくわかりませんが

出来たのでよかった

少し足りないものがあるとすればロゴづくりのテーマかな

このロゴを通じて誰に何を伝えたいかがしっかり決まっていないので

今後は少し考えながら作ってもおもしろいかもしれない

今後は少しロゴだとDadaでのロゴづくりと

次の作品案を考えていきます。

完成コード

x = 3 #230の倍率を入力

size(690, 690)
background(0, 0, 255)

fill(255)
noStroke()
rect(20 * x, 20 * x, 40 * x, 80 * x)
rect(60 * x, 30 * x, 40 * x, 10 * x)
rect(60 * x, 70 * x, 40 * x, 10 * x)
rect(100 * x, 20 * x, 40 * x,120 * x)
stroke(0)
rect(110 * x, 10 * x, 20 * x, 40 * x)
rect(130 * x, 10 * x, 20 * x, 40 * x)

fill(255, 255, 0)
noStroke()
rect(90 * x, 100 * x, 40 * x, 80 * x)
rect(130 * x, 110 * x, 40 * x, 10 * x)
rect(130 * x, 150 * x, 40 * x, 10 * x)
rect(170 * x, 100 * x, 40 * x,120 * x)
stroke(0)
rect(180 * x, 90 * x, 20 * x, 40 * x)
rect(200 * x, 90 * x, 20 * x, 40 * x)