KMOOC] 예술가와 디자이너를 위한 아트 코딩 1주차 실습 예제

KMOOC] 예술가와 디자이너를 위한 아트 코딩 1주 차 실습 예제

KMOOC] 예술가와 디자이너를 위한 아트 코딩 1주차 실습예제들

 

KMOOC 예술가와 디자이너를 위한 아트 코딩 강의 1주 차 실습 예제들을 따라 해 보았다.
비교적 간단한 도형들을 조합한거라 크게 어렵진 않았지만,
도형 그리기의 기본 문법이나 좌표에 아직 익숙하지 않아서 생각보다 시간이 좀 걸렸다. 
그렇지만 이렇게 연습하다 보면 조금씩 손에 익을 거라고 믿는다.

실습 예제 1 cd

function setup(){
  createCanvas(400,400);
  background('#f0f0f0');
}
function draw(){
  strokeWeight(5);
  ellipse(200,200,320,320);
  ellipse(200,200,150,150);
  strokeWeight(2);
  ellipse(200,200,50,50);
}

 

실습 예제 1 실행 화면

실습 예제 2 핸드폰

function setup(){
  createCanvas(400,400);
  background('#f0f0f0');
}
function draw(){
  strokeWeight(5);
  rect(110,50,180,300,30);
  fill('black');
  rect(177,73,46,3,100);
  fill('white');
  line(110,100,290,100);
  line(110,300,290,300);
  strokeWeight(12);
  ellipse(200,325,5,5);
}

실습 예제 2 실행 화면

 

실습 예제 3 칵테일

function setup(){
  createCanvas(400,400);
  background('#f0f0f0');
}
function draw(){
  strokeWeight(5);
  fill('white');
  ellipse(300,100,70);
  triangle(100,100,300,100,200,200);

  fill('black');
  rect(196,200,8,80);
  rect(145,280,110,8,30);
}

실습 예제 3 실행 화면

 

 

 

실습 예제 4 모래시계

function setup(){
  createCanvas(400,400);
  background('#f0f0f0');
}
function draw(){
  fill('black');
  rect(100,60,200,35);

  fill('white');
  strokeWeight(5);
  triangle(130,95,270,95,200,195);
  triangle(200,195,270,300,130,300);

  fill('black');
  rect(100,300,200,35);
}

실습 예제 4 실행 화면

 

실습 예제 5 아이스크림

function setup(){
  createCanvas(400,400);
  background('#f0f0f0');
}
function draw(){
  triangle(150,185,250,185,200,340);
  ellipse(200,155,120);
  ellipse(200,125,100);
  ellipse(200,90,70);
}

실습 예제 5 실행 화면

 

실습 예제 6 체리

function setup(){
  createCanvas(400,400);
  background('#f0f0f0');
}
function draw(){
  fill('#00ccad');
  noStroke();
  rect(125,90,150,12,30);

  stroke('#00ccad');
  strokeWeight(7);
  line(200,100,130,220);
  line(200,100,280,220);

  fill('#ff798f');
  noStroke();
  ellipse(120,263,110);
  ellipse(290,263,110);
}

실습 예제 6 실행 화면

 

실습 예제 7 유모차

function setup(){
  createCanvas(400,400);
  background('#f0f0f0');
}
function draw(){
  noStroke();
  fill('#fff');
  arc(180,200,200,200,0,PI);
  arc(180,185,200,200,PI,PI+QUARTER_PI);
  rect(253,160,27,40);
  arc(280,160,54,54,PI,PI+HALF_PI);
  rect(280,133,30,27);

  fill('black');
  stroke('#fff');
  strokeWeight(10);
  ellipse(120,300,50);
  ellipse(240,300,50);
  }

실습 예제 7 실행 화면

실습 예제 8 컵

function setup(){
  createCanvas(400,400);
  background('#f0f0f0');
}
function draw(){
  strokeWeight(2);
  ellipse(270,140,110);
  ellipse(270,140,60);
  rect(80,70,180,200,20,10,40,40);
  rect(80,300,200,35,50);
}

실습 예제 8 실행 화면