2018년 9월 디자인과 코딩을 함께 다루는 유튜브 채널을 열었습니다. "타입과 미디어" 사이트는 당분간 유지할 계획이지만, 새로운 정보는 유튜브 비디오를 통해서 소개하겠습니다. 많은 관심 부탁드립니다! — 정대인

패턴 만들기

세부 목차

일차원 패턴

아래의 예제를 실행하고, 아무 키나 눌러봅시다.

PFont font;

void setup() {
  size(600, 200);
  font = createFont("SansSerif", 160);
  textFont(font);
  textAlign(CENTER, BASELINE);

  background(255);
}

void draw() {
}

void keyPressed() {
  background(255);
  for (int i = 0; i < 40; i++) {
    fill(random(150, 255), 50, 200);
    text(key, -30 + i*30, height/4*3);
  }
}
Your browser does not support canvas.

이차원 패턴

이차원 패턴은 for 반복문을 2개 중첩해서 사용하면 됩니다.

PShape hieut;

size(600, 200);
hieut = loadShape("hieut.svg");
hieut.disableStyle();
noStroke();

background(255);

for (int i = 0; i <= width; i += 20) {
  for (int j = 0; j <= height; j += 20) {
    fill(0);
    shape(hieut, i, j);
  }
}

Your browser does not support canvas.

벽돌 쌓기 패턴

아래 예제는 벽돌을 쌓듯이 타일을 엇갈려서 배치한 패턴입니다. translate(x - xspacing/2, y);는 한 줄씩 건너뛰며 x 좌표를 설정된 간격의 반만큼 조정하여 타일을 배치하고 있습니다.

PShape oh;

float scaleFactor;

void setup() {
  size(600, 200);
  oh = loadShape("oh.svg");
  oh.disableStyle();
  noStroke();
  fill(0);
}

void draw() {
  background(255);

  int xspacing = 30;
  int yspacing = 20;
  scaleFactor = map(mouseX, 0, width, 0.2, 4);
  int xcount = 0;
  int ycount = 0;
  
  for (int y = 0; y <= height; y += yspacing) {
    for (int x = 0; x <= width; x += xspacing) {
      pushMatrix();
      // every other row
      if (ycount % 2 == 0) {
        translate(x, y);
        rotate(frameCount/200.0);
      } else {
        translate(x - xspacing/2, y);
        rotate(-frameCount/200.0);
      }
      if (xcount % 2 == 0) fill(100, 200, 255);
      else fill(250, 100, 250);
      shape(oh, 0, 0, 40 * scaleFactor, 20 * scaleFactor);
      popMatrix();

      xcount++;
    }
    ycount++;
  }
}
Your browser does not support canvas.

원형 패턴

PFont font;

String s1 = "꽃";
String s2 = "잎";

void setup() {
  size(600, 200);
  colorMode(HSB, 360, 100, 100, 100);

  font = createFont("SansSerif", 80);
  textFont(font);
  textAlign(LEFT, BOTTOM);
}

void draw() {
  background(0, 0, 100);
  fill(0);
  
  float offset1 = map(mouseX, 0, width, -100, 100);
  float offset2 = map(mouseY, 0, height, -100, 100);

  for (int i = 0; i < 360; i += 30) {
    pushMatrix();
    translate(width/2, height/2);
    rotate( radians(i) );
    fill(300, 60, 100);
    text(s1, offset1, offset2);
    fill(140, 100, 100);
    text(s2, offset2, offset1);
    popMatrix();
  }
}
Your browser does not support canvas.