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

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

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

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

描いてみた

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");

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");

完全にInstagram™です。