본문 바로가기

아트코딩5

마우스 위치에 따라 해의 크기 바꾸기 원의 반원정도만 보이게끔 큰 원을 그려 산처럼 보이게 한 후, 노란색 타원의 scale 값을 마우스의 y좌표 나누기 100한 만큼을 한 값으로 지정하고 rotate(회전) 값을 마우스 x좌표 나누기 100한 값으로 지정해 해를 표현했다. 마우스의 위치에 따라 해의 기울어진 각도와 크기가 달라짐을 확인 할 수 있다. 코드) function setup() { createCanvas(400, 400); } function draw() { background(150,190,220); fill(30,225,110); ellipse(200,400,500); //mountain translate(mouseX, mouseY); //sun fill(250,200,10); scale(mouseY/100.0); rotate.. 2021. 7. 7.
UI(User Interface) 별로 그려지는 붓 바꾸기 User Interface) 일반적으로, 작은 도구들의 사용에 대한 것 부터 큰 기계시스템의 제어와 처리를 하는 것까지 다양한 개념들을 포괄한다. 이 용어는 주로 사람(사용자)과 컴퓨터시스템 사이의 의사소통 매개를 의미한다. 주변의 터치스크린, 마우스 등으로 UI를 물리적으로 볼 수 있다. 개요) 이번에는 키보드, 마우스 등의 UI로 입력받은 신호를 바탕으로 그려지는 붓의 모양 및 재질을 바꿔게끔 그려지도록 코딩해보았다. 추가적으로 마우스의 x축, y축에 따라 그려지는 크기나 속성을 바꾸어 보기도 했다. 구상) 위 화살표 키 -> 빛을 표현한 흰색 큰원에 작은 노란 원을 겹친 모양의 붓 마우스 클릭 -> 투명도가 조금 있는 파란색 원 모양의 붓, y축에 따라 반지름이 커짐 아무것도 없을 때 -> 불투명한.. 2021. 7. 2.
원근감 표현하기 진자운동을 하는 팽이를 원근감을 넣어 코딩하려면 어떻게 해야 할까? 여러가지 방법이 있겠지만, 이번엔 마우스의 y축에 따라 그려지는 팽이의 반지름을 줄이는 방식으로 코딩해 보았다. 팽이를 잇는 줄의 두께 또한 마우스 y축 위치에 따라 얇아지기도 두꺼워지기도 한다. 음.... 아직 어설프긴 하지만, 그래도 어느정도 원근감이 느껴지는 것 같다 ㅎㅎ... 코드) function setup() { createCanvas(400, 300); background(220,150,150); } function draw() { var newValue2 = map(mouseY, 0, height, 10, 100); fill(180-mouseY,180-mouseY,mouseY+180); ellipse(mouseX, mous.. 2021. 6. 28.
격자구조로 집 코딩하기 이번엔 캔버스의 선 10X10사이즈의 격자 구조를 코딩한 뒤, 그 안에 흰색 사각형 도형을 채워 집을 코딩했다. 이때 격자 구조는 for문을 사용해 선을 그어 완성했다. 전체 코드) https://editor.p5js.org/emilyroh/sketches/hOJcGuoi5 p5.js Web Editor editor.p5js.org 2021. 6. 26.
나의 집 코딩하기 내가 너무 익숙한 장소 우리 집,,, 그 집을 벗어나 미지의 세계로 떠나고자하는 모습을 코딩으로 구현해 보았다. 코딩 툴은 p5.js를 사용했고 기본 도형인 사각형, 원, 선을 사용해 코딩했다. 코딩하는 내내 도형의 위치를 일일이 때려맞추듯이 코딩하는 바람에 힘들었다..... 그래서!! p5.js에 마우스의 위치의 좌푯값이 콘솔창에 뜨도록 하는 기능을 추가하고자 if(mouseIsPressed){ console.log(mouseX + ','+ mouseY); } 이 코드를 통해 마우스를 클릭하면 마우스의 좌푯값이 콘솔창에 출력되도록 했다. 전체코드) function setup() { createCanvas(800, 800); } function draw() { background(0,0,0); noStr.. 2021. 6. 26.

티스토리툴바