원근감 표현하기

원근감 표현하기

진자운동을 하는 팽이를 원근감을 넣어 코딩하려면 어떻게 해야 할까?

여러가지 방법이 있겠지만,

이번엔 마우스의 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, mouseY, newValue2+mouseY/5, newValue2+mouseY/5);
  
  fill(200,100,100);
  ellipse(mouseX,mouseY, newValue2, newValue2);
  fill(100,200,100);
  ellipse(mouseX,mouseY, newValue2/2, newValue2/2);
  
  fill(255);
  ellipse(mouseX,mouseY, newValue2/5, newValue2/5);
  
  fill(200,180,180);
  strokeWeight(mouseY/50);
  line(mouseX,mouseY, newValue2/5, newValue2/5);
  
}

 

https://editor.p5js.org/emilyroh/sketches/OWdJZLqrG

p5.js Web Editor