[Creative Coding/p5js] 1.1 - First Shapes

오늘 강의에서는 간단하게 원을 그려보았다. 시작하기 전에, 우측 탭의 LIBRARIES에서 SimpleJS를 추가했다.

 

먼저, 원하는 위치에 원하는 크기의 원 그리기!

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	// (400, 300) 위치에 크기 300의 원 그리기
	circle(400, 300, 300);
}

* circle(x, y, size) (x, y)에 'size'크기의 원 그리기

 

크기를 30으로 줄여보았다.

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	// (400, 300) 위치에 크기 30의 원 그리기
	circle(400, 300, 30);
}

원이 크기는 바뀌었지만 그대로 가운데 머물러있는 걸로 봐서, x좌표와 y좌표는 원의 중심의 위치를 가리키는 듯..?

 

크기를 800으로 늘려보았다.

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	// (400, 300) 위치에 크기 800의 원 그리기
	circle(400, 300, 800);
}

ㄴㅇㄱ? simple()을 이용해 임시 설정해둔 캔버스의 끝을 만났다.

 

이번에는 색칠을 해 봤다.

 

* fill('color') 앞으로 그리는 도형들은 'color'색으로 칠해라!

 

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	// 앞으로 그리는 도형은 빨간색으로 칠하기
	fill('red');
	// (400, 300) 위치에 크기 300의 원 그리기
	circle(400, 300, 300);
}

보라색으로 칠해보자!

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	// 앞으로 그리는 도형은 보라색으로 칠하기
	fill('purple');
	// (400, 300) 위치에 크기 300의 원 그리기
	circle(400, 300, 300);
}

그럼 색칠 가능한 색은 어떤 색들이 있을까? 아래 사이트에서 확인하면 된다.

https://www.w3schools.com/cssref/css_colors.asp

CSS Colors

 

이 중에서 마음에 드는 색으로 칠해봤다.

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	// 앞으로 그리는 도형은 lightcoral로 칠하기
	fill('lightcoral');
	// (400, 300) 위치에 크기 300의 원 그리기
	circle(400, 300, 300);
}

그럼 원을 여러 개 그리면 어떻게 될까?

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	// 앞으로 그리는 도형은 lightcoral로 칠하기
	fill('lightcoral');
	// (400, 300) 위치에 크기 300의 원 그리기
	circle(400, 300, 300);
	// (400, 300) 위치에 크기 200의 원 그리기
	circle(400, 300, 200);
}

나중에 그린 원이 위에 그려진다. 그렇다면 더 큰 원을 나중에 그리면?

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	// 앞으로 그리는 도형은 lightcoral로 칠하기
	fill('lightcoral');
	// (400, 300) 위치에 크기 300의 원 그리기
	circle(400, 300, 300);
	// (400, 300) 위치에 크기 400의 원 그리기
	circle(400, 300, 400);
}

이전에 그린 원을 덮어버린다! 

 

이제, 그리고 싶은 것들을 마음대로 그려보자!

먼저, 까만 윤곽선이 보기 싫어서 없애는 코드를 찾아보았다.

 

* nostroke() 앞으로 그리는 도형들은 외곽선 없이 그려라!

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	// 앞으로 그리는 도형은 외곽선 없이 그리기
	noStroke();
	// 앞으로 그리는 도형은 lightcoral로 칠하기
	fill('lightcoral');
	// (400, 300) 위치에 크기 300의 원 그리기
	circle(400, 300, 300);
	// (400, 300) 위치에 크기 400의 원 그리기
	circle(400, 300, 400);
}

윤곽선 색을 바꾸고 싶다면?

 

* stroke('color') 앞으로 그리는 도형들은 'color'색의 외곽선으로 그려라!

윤곽선이 너무 얇아서 잘 보이지 않는다.

 

* strokeWeight('size') 앞으로 그리는 도형들은 'size' 두께의 외곽선으로 그려라!

 

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	// 앞으로 그리는 도형은 lightseagreen으로 외곽선 그리기
	stroke('lightseagreen');
	// 앞으로 그리는 도형은 10 두께의 외곽선으로 그리기
	strokeWeight(10);
	// 앞으로 그리는 도형은 lightcoral로 칠하기
	fill('lightcoral');
	// (400, 300) 위치에 크기 300의 원 그리기
	circle(400, 300, 300);
	// (400, 300) 위치에 크기 400의 원 그리기
	circle(400, 300, 400);
}

 

[무지개 동심원 그리기]

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	simple();
}

// 실제로 그림을 그리는 곳
function draw() {
	noStroke();
	fill('red');
	circle(400, 300, 350);
	fill('orange');
	circle(400, 300, 300);
	fill('yellow');
	circle(400, 300, 250);
	fill('green');
	circle(400, 300, 200);
	fill('blue');
	circle(400, 300, 150);
	fill('navy');
	circle(400, 300, 100);
	fill('purple');
	circle(400, 300, 50);
}

 

[커서를 따라 그려지는 랜덤한 색의 원들]

// 기본 설정을 하는 곳(캔버스 사이즈, 배경 색상 등)
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

// 실제로 그림을 그리는 곳
function draw() {
	noStroke();
	fill("#"+(parseInt(Math.random()*0xffffff)).toString(16));
	ellipse(mouseX, mouseY, 20, 20);
}

 

색이 너무 구리다..

 

[커서를 따라 그려지는 랜덤한 '코랄 계열'색의 원들]

function setup() {
	createCanvas(windowWidth, windowHeight);
	background('floralwhite');
}

function draw() {
	noStroke();
	colors = ['coral', 'papayawhip', 'lightcoral', 'lightsalmon', 'moccasin', 'salmon'];
	fill(colors[Math.floor(Math.random() * colors.length)]);
	ellipse(mouseX, mouseY, 20, 20);
}

 

 

엉엉 재밌어요..