학교의 Processing의 자유 과제로 인스타그램풍의 그라데이션을 그려 보았습니다.

인스타 로고는 무엇입니까?

인스타그램의 로고는 2016년 4월에, 리얼한 폴라로이드 카메라풍의 로고로부터, 블루・옐로우・레드・핑크의 그라데이션 로고가 되었습니다. 이번에는 변경 후 새로운 로고의 그라데이션을 그려 보겠습니다.


Processing에서 x방향이나 y방향의 단방향 그라데이션을 그리는 것은 for 와 line() 로 비교적 간단하게 그릴 수 있습니다(색을 바꾸면서 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");

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 ™입니다.