마우스 위치에 따라 해의 크기 바꾸기

마우스 위치에 따라 해의 크기

원의 반원정도만 보이게끔 큰 원을 그려 산처럼 보이게 한 후,

노란색 타원의

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(mouseX/100.0); 
   ellipse(-15,-15,30,25); 
  
}

 

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

p5.js Web Editor