KMOOC] 예술가와 디자이너를 위한 아트 코딩 2주 차 실습 예제
KMOOC] 예술가와 디자이너를 위한 아트 코딩 2주 차 실습 예제 KMOOC 예술가와 디자이너를 위한 아트 코딩 강의 2주 차 실습 예제들을 따라 해 보았다. 400,400 캔버스에 10*10 격자를 그린 후 rect() 함수를 이용해 그림을 그리는 것인데, 격자를 그린 후에 그림을 그리니 좌표 위치를 더 쉽게 파악할 수 있었다. 다만, 근본적으로 그림을 그리려면 형태를 격자 구조로 단순화하는 연습이 많이 필요할 것 같다. function setup(){ createCanvas(400,400); background(128); } function draw(){ // 가로축 line(0,40,400,40); line(0,80,400,80); line(0,120,400,120); line(0,160,400,..
p5.js 기본 도형 그리기 - 호(arc) 그리기
p5.js 기본 도형 그리기 - 호(arc) 그리기 호(arc) 그리기 호(arc) 그리기의 기본이 되는 문법은 arc(x, y, w, h, start, stop, [mode], [detail])이다. ellipse() 함수와 마찬가지로 arc() 함수도 x, y 좌표가 원호 중앙의 기준점이 된다. 위의 실행 화면을 보면 기본적으로 호는 닫혀있지 않고 열려 있는 상태임을 알 수 있다. 모드를 변경하면 닫힌 호를 그릴 수 있으니 아래 선택사항을 확인해 보기 바란다. arc() 함수의 선택사항 [mode], [detail]은 생략 가능한 항목으로 각각 아래와 같은 값을 의미한다. mode : 호를 그리는 방식들로, CHORD(닫힌 반원), PIE(닫힌 파이 조각), OPEN(반원) 중 선택 가능 모드를 선택..
p5.js 기본 도형 그리기 - 타원 그리기
p5p5.js 기본 도형 그리기 - 타원 그리기 타원 그리기 타원 그리기의 기본이 되는 문법은 ellipse(x, y, w, [h])이다. rect() 함수는 x, y 좌표가 좌측 상단의 기준점이 되지만, ellipse() 함수는 x, y 좌표가 타원 중앙의 기준점이 된다는 차이가 있다. 타원의 가로 세로 높이를 다르게 그리고 싶을 경우 높이 값을 추가로 지정해 주면 된다. * p5.js를 공부하면서 그 내용을 기록하는 글입니다. 잘못된 내용이 있다면 댓글로 알려주세요! p5.js 기본 도형 그리기 - 직사각형 그리기 p5.js 기본 도형 그리기 - 직사각형 그리기 직사각형 그리기 직사각형 그리기의 기본이 되는 문법은 rect(x, y, w, [h], [tl], [tr], [br], [bl])이다. fu..
p5.js 기본 도형 그리기 - 직사각형 그리기
p5.js 기본 도형 그리기 - 직사각형 그리기 직사각형 그리기 직사각형 그리기의 기본이 되는 문법은 rect(x, y, w, [h], [tl], [tr], [br], [bl])이다. function setup(){ createCanvas(400,400); background('#f0f0f0'); } function draw(){ rect(50,50,300); // 좌측 상단 기준 좌표(50,50)를 기준으로 가로 세로 300px인 직사각형 생성 } p5.js 기본 도형 그리기 - 직사각형 그리기 [h], [tl], [tr], [br], [bl] 은 생략 가능한 항목으로 각각 아래와 같은 값을 의미한다. h : 직사각형 높이값으로 w(너비)만 지정하였을 경우 h=w와 동일한 값으로 자동 지정됨 tl : ..
p5.js 기본 도형 그리기 - 직선 그리기
p5.js 기본 도형 그리기 직선 그리기 직선 그리기의 기본이 되는 문법은 line(x1, y1, x2, y2)이다. function setup(){ createCanvas(400,400); background('#f0f0f0'); } function draw(){ line(20, 20, 380, 380); // 좌표1(20, 20)에서 좌표2(380, 380)까지 이어진 선 } 위와 같이 가로, 세로 400 크기의 캔버스를 만들고 line(20, 20, 380, 380) 함수를 실행하면, 아래 그림처럼 좌표 1(20, 20)에서 좌표 2(380, 380)까지 이어진 사선이 그려진다. 직선의 두께와 색상 설정 직선의 두께 : 기본값은 1px이며 strokeWeight() 함수를 사용하여 두께 변경 가능 ..
