Creative Coding 독학 제045일 2024년05월11일(토)

2024년 5월 11일

오늘은~^^*

초기 조건과 초기 값 설정에 따라 다양한 대형을 만들 수 있다는 것을 공부해 볼게요~^^*

하나. 다이아몬드 대형을 만들어 볼게요~^^*

둘. 다섯 개의 동그라미들이 무작위 x, y 좌표값과 무작위 방향의 속도와 무작위 크기의 질량을 가질 때 나타나는 대형도 실험해 볼게요~^^*

넵, 오늘도 실험정신 충만하게 하루를 시작해 볼까요~^^* Yeah~!!!

다이아몬드 대형은 우리가 직접 x,y 좌표값을 부여하려고 해요. 그러면, 중심 좌표가 (200, 200)이고 꼭지점과 중심 사이의 거리가 100이 되는 다이아몬드 대형은 꼭지점들의 좌표를 어떻게 부여하면 좋을까요? 잠시 사고 실험을 하시고, 아래 동영상 강의를 보셔도 재미있겠지요~^^*

클릭하시면 오늘 공부 내용을 시작(10:48)하실 수 있어요~ 11:48까지 보시면 오늘 공부 끝~^^*

네~ 그래요~ 꼭지점 좌표는 중심(200,200)에서 x축 +-100 y축 +-100 이동한 곳이면 되겠지요~^^*? (100, 200) (200, 100) (300, 200) (200, 300) 으로 좌표값을 부여해 볼게요~^^* 노트를 참고해 보셔도 좋겠지요~^^*?

class Mover{
  constructor(x,y,vx,vy,m){
    this.pos = createVector(x,y);
    this.vel = createVector(vx, vy);
    this.acc = createVector(0,0);
    this.mass = m;
    this.r = sqrt(this.mass)*2; 
  }
  
  applyForce(force){  
    let f = p5.Vector.div(force, this.mass);
    this.acc.add(f); 
  }
  
  attract(mover){ 
    let force = p5.Vector.sub(this.pos, mover.pos);
    let distanceSq = constrain(force.magSq(),100, 1000);
    let G =25;
    let strength = G*(this.mass*mover.mass)/distanceSq;
    force.setMag(strength);
    mover.applyForce(force);
  }
  
  update(){
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.set(0,0);
  }
  
  show(){
    stroke(255);
    strokeWeight(2);
    fill(255, 100);
    ellipse(this.pos.x, this.pos.y, this.r*2);
  }
}

let movers = [];

function setup() {
  createCanvas(400, 400); 

  movers[0] = new Mover(300, 200, 0, -5, 10);
  movers[1] = new Mover(100, 200, 0, 5, 10);
  //좌우로 마주보고, 위아래 방향으로 움직이려고 합니다. 
  
  movers[2] = new Mover(200, 100, -5, 0, 10);  
  movers[3] = new Mover(200, 300, 5, 0, 10);
  //위아래 마주보고, 좌우 방향으로 움직이려고 합니다. 
}

function draw() {
  background(0, 10);
  
  for(let mover of movers){
    for(let other of movers){
      if (mover !== other){
        mover.attract(other);
        
        line(mover.pos.x, mover.pos.y, other.pos.x, other.pos.y);
        //mover와 other 사이의 거리를 선으로 표현해 보겠습니다.
      }
    }
  }
 
  // movers[] 배열 안에 있는 모든 구성원소 각각이 movers[] 배열 안에 있는 다른 구성원소 각각에 대해 (자기자신도 포함하게 됨), 만약 그 상대방이 자기 자신이 아니라면, 그 상대방을 끌어당깁니다. 
  
  // 이 과정을 자세히 살펴보면,
//(01) movers[0]는 movers[0]에 대해, 자기자신이므로, 끌어당기지 않고
//(02) movers[0]는 movers[1]에 대해, 자기자신이 아니므로, 끌어당기고
//(03) movers[0]는 movers[2]에 대해, 자기자신이 아니므로, 끌어당기고
//(04) movers[0]는 movers[3]에 대해, 자기자신이 아니므로, 끌어당기고  
//(05) movers[1]은 movers[0]에 대해, 자기자신이 아니므로, 끌어당기고
//(06) movers[1]은 movers[1]에 대해, 자기자신이므로, 끌어당기지 않고
//(07) movers[1]은 movers[2]에 대해, 자기자신이 아니므로, 끌어당기고
//(08) movers[1]은 movers[3]에 대해, 자기자신이 아니므로, 끌어당기고  
//(09) movers[2]는 movers[0]에 대해, 자기자신이 아니므로, 끌어당기고
//(10) movers[2]는 movers[1]에 대해, 자기자신이 아니므로, 끌어당기고
//(11) movers[2]는 movers[2]에 대해, 자기자신이므로, 끌어당기지 않고
//(12) movers[2]는 movers[3]에 대해, 자기자신이 아니므로, 끌어당기고
//(13) movers[3]는 movers[0]에 대해, 자기자신이 아니므로, 끌어당기고
//(14) movers[3]는 movers[1]에 대해, 자기자신이 아니므로, 끌어당기고
//(15) movers[3]는 movers[2]에 대해, 자기자신이 아니므로, 끌어당기고
//(16) movers[3]는 movers[3]에 대해, 자기자신이므로, 끌어당기지 않습니다.   
  //for의 이중구문은 구성요소 갯수(4)의 제곱의 횟수(16)로 반복됩니다. 
  
  for(let mover of movers){
  mover.update();  
  
  mover.show();
  //mover 동그라미의 모습과 이동경로도 표현해 보겠습니다.   
  }
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행해 보시구요~ 네 개의 동그라미의 모습도 보이고, 이 동그라미들의 이동경로도 보이고, 동그라미들 사이의 거리도 보이나요? 뭔가 예쁜 모습이 나타나는 것 같지 않나요~^^* 어머 우리 벌써 시각예술을 하고 있는 것 같아요~^^*!! 넵, 사각형을 눌러 프로그램 종료~^^*

이번에는 무작위 좌표값, 무작위 방향의 속도, 무작위 크기의 질량을 가진 동그라미 5개의 움직임을 표현해 보겠습니다~

let movers = [];

function setup() {
  createCanvas(400,400); 
  
 for( i = 0; i < 5; i++){
   //0,1,2,3,4 총 다섯 개의 동그라미를 만들겠습니다. 
   
   let x = random(width);
   //x 좌표는 0에서 400 사이의 무작위 값을 갖습니다. 
   
   let y = random(height);
   //y 좌표는 0에서 400 사이의 무작위 값을 갖습니다. 
   
   let v = p5.Vector.random2D();
   //무작위 방향의 단위 벡터(길이값은 1)를 생성하여 v에 저장합니다. 
   
   let m = random(25, 100);
   //질량은 25에서 100 사이의 값을 갖습니다.  
   
   movers[i] = new Mover(x, y, v.x, v.y, m);
   //동그라미를 생성합니다. 
 }
}

function draw() {
  background(0, 10);
  
  for(let mover of movers){
    for(let other of movers){
      if (mover !== other){
        mover.attract(other);
        line(mover.pos.x, mover.pos.y, other.pos.x, other.pos.y);
      }
    }
  }
 
  // movers[] 배열 안에 있는 모든 구성원소 각각이 movers[] 배열 안에 있는 다른 구성원소 각각에 대해 (자기자신도 포함하게 됨), 만약 그 상대방이 자기 자신이 아니라면, 그 상대방을 끌어당깁니다. 
  
  // 이 과정을 자세히 살펴보면,
//(01) movers[0]는 movers[0]에 대해, 자기자신이므로, 끌어당기지 않고
//(02) movers[0]는 movers[1]에 대해, 자기자신이 아니므로, 끌어당기고
//(03) movers[0]는 movers[2]에 대해, 자기자신이 아니므로, 끌어당기고
//(04) movers[0]는 movers[3]에 대해, 자기자신이 아니므로, 끌어당기고 
//(05) movers[0]는 movers[4]에 대해, 자기자신이 아니므로, 끌어당기고   
//(06) movers[1]은 movers[0]에 대해, 자기자신이 아니므로, 끌어당기고
//(07) movers[1]은 movers[1]에 대해, 자기자신이므로, 끌어당기지 않고
//(08) movers[1]은 movers[2]에 대해, 자기자신이 아니므로, 끌어당기고
//(09) movers[1]은 movers[3]에 대해, 자기자신이 아니므로, 끌어당기고
//(10) movers[1]은 movers[3]에 대해, 자기자신이 아니므로, 끌어당기고
//(11) movers[2]는 movers[0]에 대해, 자기자신이 아니므로, 끌어당기고
//(12) movers[2]는 movers[1]에 대해, 자기자신이 아니므로, 끌어당기고
//(13) movers[2]는 movers[2]에 대해, 자기자신이므로, 끌어당기지 않고
//(14) movers[2]는 movers[3]에 대해, 자기자신이 아니므로, 끌어당기고
//(15) movers[2]는 movers[4]에 대해, 자기자신이 아니므로, 끌어당기고
//(16) movers[3]는 movers[0]에 대해, 자기자신이 아니므로, 끌어당기고
//(17) movers[3]는 movers[1]에 대해, 자기자신이 아니므로, 끌어당기고
//(18) movers[3]는 movers[2]에 대해, 자기자신이 아니므로, 끌어당기고
//(19) movers[3]는 movers[3]에 대해, 자기자신이므로, 끌어당기지 않고
//(20) movers[3]는 movers[4]에 대해, 자기자신이 아니므로, 끌어당기고
//(21) movers[4]는 movers[0]에 대해, 자기자신이 아니므로, 끌어당기고
//(22) movers[4]는 movers[1]에 대해, 자기자신이 아니므로, 끌어당기고
//(23) movers[4]는 movers[2]에 대해, 자기자신이 아니므로, 끌어당기고
//(24) movers[4]는 movers[3]에 대해, 자기자신이 아니므로, 끌어당기고
//(25) movers[4]는 movers[4]에 대해, 자기자신이므로, 끌어당기지 않습니다.  
  //for의 이중구문은 구성요소 갯수(5)의 제곱의 횟수(25)로 반복됩니다. 
  
  for(let mover of movers){
  mover.update();  
  mover.show(); 
  }
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 동그라미들의 움직임을 관찰해 볼까요~^^* 와우, 어질어질~^^* 동그라미들의 현란한 움직임을 충분히 보셨다면 이제 사각형을 눌러 프로그램을 종료하셔도 좋겠죠~^^*?

우리가 사는 지구는 둥글구요~ 우리 동그라미도 둥근데요~ 동그라미가 만드는 대형은 네모네요~^^*