마우스 위치에 따라 해의 크기 바꾸기
원의 반원정도만 보이게끔 큰 원을 그려 산처럼 보이게 한 후, 노란색 타원의 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.
원근감 표현하기
진자운동을 하는 팽이를 원근감을 넣어 코딩하려면 어떻게 해야 할까? 여러가지 방법이 있겠지만, 이번엔 마우스의 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.
