Silverback9

#야생으로

Creative Coding 독학 제059일 2024년05월25일(토) 보충

네, 제가 돌아왔습니다. 근데…일요일 새벽이예요…어제 저녁에 잠들어 버렸네요… 어제 꼭두새벽부터 일어나 움직여서 그런가봐요… 음..근데..지금…새벽 새소리 참 좋은데요? 여름이 다가오니, 새들의 기상시간도 점점 앞당겨지고 있어요~ 새소리 종류도 엄청 다양해졌구요~^^*

일단 토요일 포스팅을 서둘러 마무리하기 위해서 스스로 회전하며 등속운동을 하는 불사조 피닉스 비행기를 간단하게 만들어 보았어요. 마우스로 조종하는 비행기는 오늘 일요일 미션으로 수행해 보고 저녁에 다시 돌아올게요~^^*.

class Mover{
  constructor(x,y,m, r, g, b){
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.mass = m;
    this.r = sqrt(this.mass)*2; 
    this.Red = r;
    this.Green = g;
    this.Blue = b;
    
    this.angle = PI/4;
    //초기 회전각크기는 파이/4 라디안 즉 45도로 잡아봅시다~^^*
  }
  
 update(){
 
    this.vel = p5.Vector.fromAngle(this.angle);
    //회전각 크기로부터 속도 벡터의 x,y 축 길이를 구하여 속도 벡터를 생성합니다.   
    this.pos.add(this.vel);
   // 속도 벡터를 위치 벡터에 더하여, 삼각형을 위치 이동시킵니다.  
    
  }
  
  show(){
    stroke(this.Red,this.Green,this.Blue);
    strokeWeight(2);
    fill(this.Red,this.Green,this.Blue,100);
    
    translate(this.pos.x, this.pos.y);
    //이 물체의 중점을 원점으로 하는 상대좌표체계로 바뀝니다.   
    rotate(this.angle);
    //이 물체의 회전각 값만큼 좌표체계가 회전합니다. 
    triangle(-this.r,-this.r/2,-this.r,this.r/2,this.r,0);
    //날씬한 삼각형을 그립니다.  
     
    this.angle += 0.01;
    // 회전각 크기를 0.01라디안 만큼 증가시킵니다. 
    // 시계방향으로 회전하겠지요?^^* 
          
  }
}
let Avion;

function setup() {
  
  createCanvas(400,400);
  //좌표체계의 원점(0,0)은 캔버스 왼편 위쪽 모서리에 있습니다. 
  
  Avion = new Mover(250,150,500, 255, 0,0);
  //불사조 피닉스 비행기를 만들어 봅시다~^^*. 
}

function draw() {
  background(0);
 
  Avion.update();
  Avion.show();
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 우리의 용감한 불사조 피닉스 비행기가 위풍당당한 큰 원을 그리며 우주를 지키고 있는 모습을 관찰해 보셔요~^^* 네, 종료는 사각형~^^*

가끔씩 아주 작은 발걸음만 뒤늦게 내딛는 하루가 있다고 해도, 하루하루 계속 걸어걸어 가다가 보면~

걸어가다 보면~ 걸어가다 보면~ 걸어가다 보면~

네, 꿈은 이루어 집니다!!

댓글 남기기