Silverback9

네~~^^* 먼저, 작은 진전을 보고 드리겠습니다~~^^*

array of array에 대한 문의에 대한 답이 왔습니다~^^*

p5.js 코딩에 대해 세계 친구들과 함께 고민해 볼 수 있는 포럼을 알려 주셨어요~^^* 뭔가…물고기를 주는 것이 아니라 물고기 잡는 방법을 알려 주시는 듯해서 감사했어요~~^^*

if ( this.paths[0].length === 0 ) {
    this.paths.shift();
}

에 대한 질문을 일단 올려 놓았습니다. 의견들이 모아지면, 정리해서 포스팅 하겠습니다~!!!

그래서 오늘은, 다른 방식으로 컴퓨터 업무를 덜어주는 코드를 공부해 보겠습니다~~!!!

강의 동영상을 12:29 부터 12:34 까지 보시면 되어요~^^* 오늘 공부시간 5초!!!

아래 동영상을 클릭하시면 오늘 공부내용을 바로 시작하실 수 있어요~

먼저 질문 한 세트 드리겠습니다!

(1) 1을 5로 나누면 나머지는 얼마인가요? 몫은 0 이고 나머지는 1 ~~~!!!

(2) 2를 5로 나누면 나머지는 얼마인가요? 몫은 0 이고 나머지는 2 ~~~!!!

(3) 3을 5로 나누면 나머지는 얼마인가요? 몫은 0 이고 나머지는 3 ~~~!!!

(4) 4를 5로 나누면 나머지는 얼마인가요? 몫은 0 이고 나머지는 4 ~~~!!!

(5) 5를 5로 나누면 나머지는 얼마인가요? 몫은 1 이고 나머지는 0 ~~~!!!

네~~^^* 5의 배수들 5, 10, 15, 20, …은 5로 나누면 나머지가~~~0~~~!!!

이 특성을 이용해서 frame이 5번째, 10번째,…, 5의 배수번째가 되면, vehicle의 위치좌표를 배열 this.currentPath[]에 모아보도록 하겠습니다~

하나. frameCount는 몇 번째 프레임인지를 나타내는 p5.js 내장변수입니다.

둘. %는 나머지값을 계산하는 연산자 입니다.

셋. frameCount % 5 == 0 : “frameCount를 5로 나누었을 때 나머지가 0이다” 라는 의미, 즉, “5번째 10번째 15번째 20번째….5의 배수 번째 frame이다” 라는 의미입니다~~^^*

 if(frameCount % 5 == 0) {
    this.currentPath.push(this.pos.copy());
    //5번째 frame마다 vehicle의 위치좌표를 수집합니다.
    //배열 공간을 덜 쓸 수 있겠지요? 

자 그럼 class Vehicle의 코드를 살펴 보고, 바로 성긴 위치좌표 데이터 배열이 표현하는 연의 실의 모습을 보러 갈까요~~^^*

class Vehicle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(1, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 4;
    this.maxForce = 0.2;
    this.r = 16;
    this.wanderTheta = PI/3;
    
    this.currentPath = [];
    this.paths = [this.currentPath];
    //캔버스 안에서 활동할 동안의 vehicle의 위치좌표를 모으는 배열this.currentPath
    //배열 this.currentPath들을 모으는 배열 this.paths
  }
  
  wander() {
    let wanderPoint = this.vel.copy();
    wanderPoint.setMag(100);
    wanderPoint.add(this.pos);
    fill(255, 0, 0);
    noStroke();
    circle(wanderPoint.x, wanderPoint.y, 16);

    let wanderRadius = 50;
    noFill();
    stroke(255);
    circle(wanderPoint.x, wanderPoint.y, wanderRadius * 2);
    line(this.pos.x, this.pos.y, wanderPoint.x, wanderPoint.y);

    let theta = this.wanderTheta + this.vel.heading();

    let x = wanderRadius * cos(theta);
    let y = wanderRadius * sin(theta);
    wanderPoint.add(x, y);
    fill(0, 0, 255);
    noStroke();
    circle(wanderPoint.x, wanderPoint.y, 16);

    stroke(255);
    line(this.pos.x, this.pos.y, wanderPoint.x, wanderPoint.y);

    let steer = wanderPoint.sub(this.pos);
    steer.setMag(this.maxForce);
    this.applyForce(steer);

    let displaceRange = 0.3;
    this.wanderTheta += random(-displaceRange, displaceRange);
  }

  applyForce(force) {
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.set(0, 0);
    
    if(frameCount % 5 == 0) {
    this.currentPath.push(this.pos.copy());
    //5번째 frame마다 vehicle의 위치좌표를 수집합니다.
    //배열 공간을 덜 쓸 수 있겠지요? 
    }  
  }

  show() {
    stroke(255);
    strokeWeight(2);
    fill(255);
    push();
    translate(this.pos.x, this.pos.y);
    rotate(this.vel.heading());
    triangle(-this.r, -this.r / 2, -this.r, this.r / 2, this.r, 0);
    pop();
    
    for (let path of this.paths) {
    beginShape();
    noFill();
    for ( let v of path) {
      vertex(v.x, v.y);
    }
    endShape(); 
    } 
    //화면 안 움직임만을 모은 path들이 점들을 연결합니다.
  }

  edges() {
    let hitEdge = false;
    if (this.pos.x > width + this.r) {
      this.pos.x = -this.r;
      hitEdge = true;
    } else if (this.pos.x < -this.r) {
      this.pos.x = width + this.r;
      hitEdge = true;
    }
    if (this.pos.y > height + this.r) {
      this.pos.y = -this.r;
      hitEdge = true;
    } else if (this.pos.y < -this.r) {
      this.pos.y = height + this.r;
      hitEdge = true;
    }
    //vehicle이 화면 밖을 나가면 좌<->우 상<->하 이동하여 화면 안에 다시 들어올 준비를 합니다. 
    //화면 밖으로 나간다는 token hitEdge를 활성화시킵니다. 
    
    if(hitEdge) {
      this.currentPath = [];
      this.paths.push(this.currentPath);
    }
    //vehicle이 화면 밖으로 나가면, 화면 안 움직임을 기록하는 currentPath를 새로 만듭니다.
    //currentPath들을 모으는 배열 path의 끝에 넣습니다. 
  }
}

이제~~ 성긴 이미지의 연의 실을 보러 갑시다~~~^^*

네~~^^* 살짝 성긴 느낌이 드는 것 같네요~~^^* 하지만 배열 데이터의 양이 80% 줄어든 것이니까…컴퓨터의 입장에서는 많이 편안한 업무일 것 같아요~~~^^*

네~~^^* 오늘은, 지속적으로 서로 도움을 주고 받을 수 있는 p5.js 포럼도 알게 된 날이고~~ 성긴 이미지로 연의 실을 표현하기 위해 나머지 연산자를 사용하는 법을 익힌 날이기도 해요~~^^*

풀리지 않는 문제는, 해결의 실마리가 보일 때 큰 기쁨을 느끼도록 만드는, 되돌아보면 감사할, 경험인 것 같아요~~^^*

다음 수준으로 나아갈 근력을 키우는 경험이기도 한 것 같구요^^*

오늘도 저와 함께 문제 해결의 기쁨을 나누어 주셔서 감사합니다~~^^*

즐거운 토요일답게 편안한 오후 보내시구요~~^^*

우리 내일 또 만나서 코딩 공부 함꼐 할까요~~~~^^*

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