top of page
執筆者の写真NUM

ProcessingでTシャツ制作


今回はTシャツのデザインに挑戦してジェネラティブアート × ファッションの

可能性を探っていきたいと思います。


デザイン制作で使用するのはいつも通りプログラミング言語:Processingとなります。

それでは制作過程を紹介していこうと思います。


コンセプト

今回のTシャツ制作におけるコンセプトは以下の3点です。(と言いつつ自分が着たいTシャツのデザインです笑)

  1. 夏らしい配色

  2. クラシックな雰囲気

  3. シンプルな幾何学模様


プリント位置

今回Tシャツをデザインは裏面にプリントするイメージにしました。


僕はシンプルなデザインが好きなので前面はポケット、裏面は縦長の長方形に収まるようなデザインが自分的にオシャレかなと思いました。




裏面



調査

ある程度型が決まったら次はオシャレなTシャツがどんなものか調査しました。

僕はオシャレな方ではないので、僕の感覚でオシャレな物です(笑)

Pinterestという写真掲載サイトで「ワンポイント Tシャツ」と入力します。



Tシャツの色とデザインがマッチしている方がオシャレですね。

プリントするデザインは背景を透明にした方が自然な気がしました。



アイデアスケッチ

最初に考えたコンセプトを元にアイデアスケッチを描いていきます。

沢山スケッチを描きましたが、最初の方は納得いくスケッチが描けなかったですが、

少しづつ出来上がっていきました。

最初のスケッチ:

二つ目のスケッチ:

三つ目のスケッチ:



コーディング

アイデアスケッチが決まったらソースコードに落とし込んでいきます。


メイン:


//色配列
color[] palette = {  
  color(229, 145, 11), 
  color(29, 123, 181), 
  color(115, 4, 22), 
  color(255, 255, 3)
};

void setup() {
  
  size(650, 850);
  pixelDensity(2);
  background(0);
  
  //三角形
  pushMatrix();
  translate(250, 100);
  int maxh = 500;
  for (int h = 0; h<maxh; h+=3) {
    float mapx = map(h, 0, maxh, 0, 300);
    float mapy = map(h, 0, maxh, 0, 500);
    for (int i = 0; i<maxh-(h); i+=3) {
      float mapi = map(i, 0, maxh, 0, 1);
      color l_c = lerpColor(palette[0], palette[2], mapi);
      color[] colShadowArr = createColorShadow(l_c, 0, 1.5);
      float mapx2 = map(i, 0, maxh, 0, 180);
      float mapy2 = map(i, 0, maxh, 0, 600);
      pushMatrix();
      translate(-mapx2+mapx, mapy2+mapy);
      oilPoint(colShadowArr, random(1, 3), random(2, 5), 1);
      popMatrix();
    }
  }
  popMatrix();
  
  //曲線
  pushMatrix();
  translate(100, 180);
  rotate(radians(-30));
  int maxh2 = 35;
  int maxi2 = 650;
  for (float h = 0; h<maxh2; h+=2) {
    float maph = map(h, 0, maxh2, 0, 1);
    color l_c = lerpColor(palette[2], palette[0], maph);
    for (float i = 0; i<maxi2; i+=1) {
      color l_c2 = lerpColor(l_c, palette[1], i/maxi2);
      color[] colShadowArr = createColorShadow(l_c2, 0, 1.5);
      float cosx = (i/3)*cos(radians(i));
      pushMatrix();
      translate(cosx+(h*2.1), i+h);
      oilPoint(colShadowArr, random(1, 3), random(2, 5), 1);
      popMatrix();
    }
  }
  popMatrix();
  
  //円の連続
  pushMatrix();
  translate(450, 180);
  int maxi3 = 650;
  for (int i = 0; i<maxi3; i+=130) {
    float mapi = map(i, 0, maxi3, 0, 1);
    color l_c = lerpColor(palette[0], palette[3], mapi);
    float mapX = map(i, 0, maxi3, 1, 1.9);
    float mapY = map(i, 0, maxi3, 1.1, 1);
    pushMatrix();
    translate(-(i/mapX), i*mapY);
    oilEllipse(63-(i/10),palette[2],l_c);
    popMatrix();
  }
  popMatrix();
  
}
  

oilUtil:


//色作成(cArr[0]:元の色 cArr[1]:影の色 cArr[2]:光の色)
color[] createColorShadow(color c, float shadeRate, float lightRate) {
  color[] cArr = new color[3];
  float r = red(c);//赤
  float g = green(c);//緑
  float b = blue(c);//青
  float shade = shadeRate;//描いた後にできる影の濃さ(0に近いと濃い)
  float light = lightRate;
  color cb = color(r*shade, g*shade, b*shade);//影の色
  color cw = color(r*light, g*light, b*light);//影の色
  cArr[0] = c;
  cArr[1] = cb;
  cArr[2] = cw;
  return cArr;
}

//点
void oilPoint(color[] colorArray, float sw, float maxi, float r_n) {
  for (float i = 0; i<=int(maxi); i+=0.1) {
    float mapi = map(i, 0, maxi, 0, 2.5);
    float rn = random(-(r_n), r_n);
    color lerpCW = lerpColor(colorArray[2], colorArray[0], mapi);
    color lerpCB = lerpColor(colorArray[1], colorArray[0], mapi);
    strokeWeight(random(sw));
    stroke(lerpCW);
    point(i, (2*rn));
    point((2*rn), i);
    strokeWeight(random(sw));
    stroke(lerpCB);
    point(-i, (2*rn));
    point((2*rn), -i);
  }
}

//円
void oilEllipse(float r, color c1,color c2) {
  for (float i = 90; i<270; i+=1) {
    float mapi = map(i, 90, 270, -1, 1);
    color l_c = lerpColor(c1, c2, mapi);
    color[] colShadowArr = createColorShadow(l_c, 0, 1.5);
    float cosx = r*cos(radians(i));
    float siny = r*sin(radians(i));
    float dist = abs(-cosx);
    for (float j = (dist*2); j>0; j-=2) {
      pushMatrix();
      translate(cosx+random(-2, 2)+j, siny+random(-2, 2));
      oilPoint(colShadowArr, random(1, 3), random(2, 4), 1);
      popMatrix();
    }
  }
}

最終的に出来上がった作品はこちらです。

コンセプト通りの夏らしい配色でシンプルな幾何学模様ができたと思います!


oilPoint関数という点を描画する関数で図形を作成するので、どのように点で図形を作るかで頭を悩ませました。

図形の配置や色も違和感の無い構図にするのにかなり時間がかかりました、、、



Tシャツ制作

今回はUTmeというユニクロで販売されているTシャツにプリントするサービスを使って

制作しました。


ユニクロのTシャツはいつも着ているので、クオリティは問題ないかと考えました。

なのであとはプリントした際の発色の良さが気がかりでした。



こちらが出来上がったTシャツです!


自分の思い描いていたものができて満足しました!

貼り付けている感がなく自然な雰囲気にデザインできていますね!


発色も良く、作品の手書き感もしっかり表現できていますね!



それっぽいサインをつけてみました(笑)


前面はポケットが付いています。これなら街に来ていくのもありかな?



感想

今回初めてTシャツをデザインしてみた感想としては、シンプルに楽しかったです。

自分が着たいものを納得できるまで作り上げることができたのはとても達成感もありました。ファッションも着るアートとして考えてみると、もっと楽しみ方があるのかもしれないですね!


実際に着てみた感想はオーバーサイズのTシャツなのでゆったり着れて、着心地は良かったです。

もし反響がありましたらUTmeでの販売もしてみようかと考えています!


閲覧数:43回0件のコメント

最新記事

すべて表示

Comments


bottom of page