見出し画像

Prossesingでカッコイイスマホ背景を作ろう！

とりすてぃっく

こんにちは、とりすてぃっくです。

最近、私のスマホの背景が
消失したんですよね。
恐らくスマホのアップデートが
関係している思われますが…

まあそれはそれとして、
なんかいい感じの背景がないと
ちょっと寂しく感じるので、

今回はProcessingで
スマホの背景を作っていこうと思います。


そもそも"Processing"ってなんだ？

Processingとは、
プログラミング言語の1つです。
図形、イラストを描画することに
長けている言語で、
背景を生成するにはうってつけなんですよ。

↓Processingのダウンロードはこちらから…

個人的に、プログラミング初心者でも
扱いやすい言語だと思うので、
オヌヌメです。

どんな背景を作ろうか…？

今回はrandom関数を使って、
いい感じの背景を作ろうと思います。
ランダムならば、唯一無二の背景が
作れるはずです。

あと、ホーム画面用とロック画面用に
2つ分背景を作ります。

サイズはスマホのサイズに合うように、
1080 x 2220 で作成します。

random関数は、
random(x); 0以上x未満のランダムな数
または、
random(x, y); x以上y未満のランダムな数
こんな感じで扱えます。

注意点としては、
random関数から出てくる数値は
int型(整数)ではなく
float型(小数を含む数)なので、

float num1 = random(6); //0以上6未満のランダムな有理数
int num2 = int(random(3,15)); //3以上15未満(14以下)のランダムな整数

このように書くことになります。
出てくる値は上限値未満なので、
intに直した場合、その値は切り捨てられ、
上限値より1つ小さい数が最大値となります。

さっそく背景を作ってみよう！

背景1. ロック画面用

モノクロで、シックな背景にしたいので、
下地は黒で、arc(円弧)をランダム生成
していこうと思います。

arc()関数は、

arc(x, y, width, height, start, stop, mode);

こんな感じで使えます。
最初の2つは座標で、
次の2つは縦横のサイズ、
その次の2つは角度(弧度法)で、
最後のやつはどんな形にするかのやつです。

以下、コードです。

void setup(){
  int arc_color;
  float x, y;
  float arc_start, arc_end, arc_size;

  size(108 * 2, 222 * 2);
  background(0);

  for(int i = 0; i < 1000; i++){
    arc_color = int(random(256));
    x = random(width);
    y = random(height);
    arc_start = random(360);
    arc_end = random(360);
    arc_size = random(50, 100);

    fill(arc_color);
    arc(x, y, arc_size, arc_size, radians(arc_start), radians(arc_end), PIE);
  }
}

そして、生成したものがこちら。

かなりいい感じのやつができた。

背景2. ホーム画面用

Processingでは、3Dを扱うことも
できるそうなので、せっかくだから、
3Dの背景にしていこうと思います。

3Dにしたいときは、size()を書くときに、
一番最後に"P3D"ってつけるだけです。

こちらもモノクロでいきます。
色の調整が面倒だから

そして、ここで使うのはbox()です。
これは、指定したサイズの箱を
生み出すやつです。

以下、コードです。

int i;
float x, y, z, box_size;
int box_color;

void setup(){
  size(108 * 2, 222 * 2, P3D);
  background(#202020);
  lights();
}

void draw(){
  if(i == 0){
    for(i = 0; i < 36; i++){
      x = random(15, width - 15);
      y = random(15, height - 15);
      z = random(50);
      box_size = random(10, 100);
      box_color = int(random(256));
      
      pushMatrix();
      translate(x, y, z);
      rotateX(TWO_PI / i);
      rotateY(TWO_PI / (12 - i));
      rotateZ(TWO_PI / (6 - i));
      fill(box_color);
      box(box_size);
      popMatrix();
    }
  }
}

そして、生成されたものがこちら。

結構いい感じ。

あっ、これ色を

background(#9999ff);

box_color = int(random(50, 256));
fill(box_color/3, box_color/3, box_color);

こうして、青っぽくしたら…

数学の教科書の表紙っぽくなった！

これいいね。背景にしよう。

皆さんもこんな感じで背景を作ってみては
いかがでしょうか？

以上、とりすてぃっくのちょっとした
記事でした。

いいなと思ったら応援しよう！