LoginSignup
1
2

More than 3 years have passed since last update.

Processingでインスタグラム風グラデーションを描く

Last updated at Posted at 2019-11-11

学校のProcessingの自由課題でインスタグラム風のグラデーションを描いてみました。

インスタのロゴってどんなのだっけ

インスタグラムのロゴは2016年4月に、リアルなポラロイドカメラ風のロゴから、青・黄色・赤・ピンクのグラデーションロゴになりました。今回は変更後の新ロゴのグラデーションを描いてみます。
shutterstock_419396584-800x640.jpg

Processingで x方向や y方向の単方向グラデーションを描くのは forline() で比較的簡単に描くことができます(色を変えながらlineを1本ずつ引いていく)が、こういった色がまだらに分布したグラデーションはむずかしそうです。

描いてみた

size(255, 255);

for (int y = 0; y < height; y++) {
  for (int x = 0; x < width; x++) {
    float R = y * 2.0 + x * 0.9;
    float G = (y - 50) * 1.5 - x * 1.2;
    float B = 255 - y * 0.9;
    stroke(R, G, B);
    point(x, y);
  }
}

save("instagram.png");

instagram.png
point() で65,000個ドットを打ちまくる力技ですが、きれいに描けたと思います。
(もっとスマートな書き方があったら教えてください)
(・・・ちょっと青とピンクの境界が直線的かな)

もっと描いてみた

size(255, 255);
noFill();

// gradation
for (int y = 0; y < height; y++) {
  for (int x = 0; x < width; x++) {
    float R = y * 2.0 + x * 0.9;
    float G = (y - 50) * 1.5 - x * 1.2;
    float B = 255 - y * 0.9;
    stroke(R, G, B);
    point(x, y);
  }
}

// init
int centerX = width / 2;
int centerY = height / 2;
stroke(255);
rectMode(CENTER);

// outer frame
strokeWeight(25);
int outerFrameSize = 276;
rect(centerX, centerY, outerFrameSize, outerFrameSize, 80);

// inner frame
strokeWeight(17);
int innerFrameSize = 180;
rect(centerX, centerY, innerFrameSize, innerFrameSize, 55);

// circles
int ellipseSize1 = 88;
int ellipseSize2 = 10;
ellipse(centerX, centerY, ellipseSize1, ellipseSize1);
fill(255);
ellipse(centerX + 53, centerY - 53, ellipseSize2, ellipseSize2);

save("instagram2.png");

instagram2.png
完全にInstagram™です。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2