Silverback9

네~^^* 어제는 다양한 기울기와 절편 값을 설정하여 threshold 기준선을 변화시켜 perceptron을 훈련해 보았습니다~^^*

근데요….perceptron훈련과정을 point마다 초록색 빨간색 변화과정을 통해 보여주었지만, perceptron이 추측하는 기준선이 어떻게 변화하며, 정답으로 제시된 threshold와 일치되어 가는지는 시각적으로 이해하기는 아직 어려운 것 같아요.

네~^^* 그래서, 오늘은, perceptron이 추측하는 threshold를 시각적으로 표현해 보겠습니다! YEAH!!

이제 우리 관현악 공부도 다시 시작해 볼까요~^^* 다시 시작하는 코딩공부 마음을 결연히 모아서 새로운 코딩공부 운명을 개척해 보는 거예요!!!

멋진 울림이 가득한 아침! 누리시고 계셔요~^^* 공부해서 돌아올게요~^^* 쓩우웅~^^*

이제는 익숙해져 삶의 배경 음악으로 삼을 수 있는 베토벤 교향곡 9번도 매일 복습할게요~^^*

네~^^* 기울기값과 절편값을 자유롭게 조절하여 다양한 threshold 기준선을 만들어 보았는데요.

perceptron을 이에 맞게 개선할 필요가 있을 것 같아요~^^*

기존의 가중치 값은 두 가지 x의 가중치 Wx y의 가중치 Wy가 있는데요…

SUM = Wx * X + Wy * Y = 0;

기준선 threshold 가 절편 intercept 값이 0이 아닌 경우를 반영할 수 없는 상태에요…

그래서 또하나의 항목이 필요하게 되었습니다.

x가 0일 때 y가 0이 되지 않고 어떤 값을 가지도록 만드는 어떤 편향성이 존재한다는 의미가 될 수 있어서, bias 편향이라는 항을 하나 더 만들어 보겠습니다.

이 bias 편향은 다른 미지수 값(x 또는 y)에 영향을 받지 않기 때문에 정수 1로 설정해 보겠습니다.

그리고 bias의 가중치 Wb를 설정해 보겠습니다.

그러면, Wb * bias(=1)는 항상 Wb의 값을 온전히 반영하게 되겠네요.

이제 intercept 절편 값이 존재하는 threshold 기준선에 맞게 SUM 공식을 개선해 보겠습니다.

SUM = Wx * X + Wy * Y + Wb*1 = 0;

이제 Y값을 계산하는 공식으로 다시 정리해 보겠습니다.

Wx * X + Wy * Y + Wb = 0; 

y 항을 제외한 나머지 항을 반대편으로 보내고 

Wy * Y = -Wx * X - Wb;  

Wy로 모든 항을 나누어, y항에 Y만 남도록 정리하면

Y = -Wx / Wy * X - Wb / Wy ;

기울기 slope [ -Wx / Wy ] 
절편 intercept [ -Wb / Wy ]
을 가진 threshold 기준선에 대한 공식이 나옵니다. 

네~^^* perceptron이 인식하는 threshold 기준선에 대한 가중치 반영 공식이 정리되었네요.

훈련을 해나가며, perceptron은 자신이 인식하는 threshold 기준선을 정답으로 제시한 threshold에 조금씩 맞추어 나가게 될 것 같아요.

그럼~^^* 우리~^^*

가중치가 하나 더 늘어난 상황을 반영하여 프로그램을 개선하고요~^^*

perceptron이 인식하는 threshold 기준선도 시각적으로 보여주도록 해 볼까요~^^*

먼저, Class Point에 bias 값을 받는 변수를 설정하여 1을 저장하겠습니다.

class Point{

  constructor(x, y) {
    this.x = x; 
    this.y = y;
    this.bias = 1;
    //Point에 bias를 표현하는 변수를 설정하여 1를 저장하겠습니다. 
    this.label;
 
    if(this.y > f(this.x)) {
      this.label = 1;
    } else 
     {this.label = -1;
    }
    //f(x) = slope * x + intercept
    //현재 정의된 f(x)는 0.3*X+0.2입니다. 
    //f(x)를 threshold 기준선으로 하여, 
    //this.y > f(x) (기준선 위의 경우): 1
    //this.y =< f(x) (기준선 아래의 경우): -1
    //판별값 label을 정하겠습니다. 
  }
    .
    .
    .
}  

메인함수 setup()도 bias 관련 내용을 반영하도록 개선하겠습니다~

function setup() {
  createCanvas(400, 400);
  
  perceptron = new Perceptron(3, 0.0001);
  //클래스 Point에 bias 변수가 추가되었기에
  //3개의 가중치항을 가진 Perceptron을 생성하겠습니다.
  //Wx, Wy, Wb
  
  for (i = 0; i < 100; i++) {
    let x = random(-1,1);
    let y = random(-1,1);
    points[i] = new Point(x, y);
  }
  //클래스 Point를 생성하기 전에, 
  //x축 위치좌표값과 y축 위치좌표값을
  //-1과 1 사이의 무작위 수로 생성한 후  
  //클래스 Point를 생성할 때 parameter로 전달하겠습니다.
}

메인함수 draw()도 bias 관련 내용을 반영하도록 개선하겠습니다~

function draw() {
     .
     .
     .
  
  for(i = 0; i < points.length; i++) {
    
    let inputs = [points[i].x, points[i].y, points[i].bias];
    //point에 관련된 변수 3개를 한 세트로 하여 배열 inputs의 구성요소로 저장합니다. 
    //클래스 Point에 변수 bias가 추가된 것을 반영한 작업입니다~
     .
     .
     .
  }
  
   let training = new Point();
   training  = points[trainingIndex];
   
   let inputs = [training.x, training.y, training.bias];
   //클래스 Point에 변수 bias가 추가된 것을 반영하였습니다~
      .
      .
      .
}  

Class Perceptron 안에 y값을 추측하는 함수를 만들어 넣어 보겠습니다.

class Perceptron {
   .
   .
   . 
  guessY(x) {
    //weights[0]는 Wx, weight[1]은 Wy, weight[2]는 Wb를 담고 있지요~^^*?
    
    let m = - this.weights[0] / this.weights[1];
    //기울기 [-Wx/Wy] 를 계산하여 변수 m에 저장합니다.
    
    let b = - this.weights[2] / this.weights[1];
    //절편 [-Wb/Wy]를 계산하여 변수 b에 저장합니다. 
    
    return m * x + b;
    //기울기 m 절편 b를 가진 기준선 위 x좌표일 때의 y값을 추측하여 반환합니다~^^*
  }
}

perceptron이 추측한 기준선이 정답 기준선에 점차 일치되어 가는 모습을 시각화해보겠습니다~^^*

function draw() {
  background(150);
  stroke(0);
  
  let x1 = -1;
  let y1 = f(x1);
  let x2 = 1;
  let y2 = f(x2);
  //함수 f()를 호출하며 x1, x2값을 parameter로 전달하겠습니다. 
  //함수 f()가 return하는 값을 y1, y2에 저장하겠습니다. 
  //y1 = slope * x1 + intercept
  //y2 = slppe * x2 + intercept
  //값을 가지고 있을 것입니다.
  //정답입니다.
  
  let guessY1 = perceptron.guessY(x1);
  let guessY2 = perceptron.guessY(x2);
  //perceptron의 추측입니다.
  
  let p1 = new Point(x1, y1);
  let p2 = new Point(x2, y2);
  let p3 = new Point(x1, guessY1);
  let p4 = new Point(x2, guessY2);
   
  line(p1.pixelX(), p1.pixelY(), p2.pixelX(), p2.pixelY());
  //정답인 threshold 기준선을 그립니다. 
  
  line(p3.pixelX(), p3.pixelY(), p4.pixelX(), p4.pixelY());
  //perceptron이 추측한 기준선을 그립니다.
  //훈련이 진행되면서 점차 정답 기준선에 일치되어 갈 것입니다~^^*
     .
     .
     .
}

자 그럼 우리, perceptron이 추측한 기준선이 정답 기준선에 점차 일치되어 가는 모습을 보러 함께 가 볼까요~^^* 정답 기준선은 y = 0.5 * x -0.2 로 해 두었습니다~*

perceptron이 훈련을 받으면서 점차 똑똑해 지는 모습을 볼 수 있어서 신기하기도 하고 perceptron이 기특하기도 하고, 프로그램을 완성한 우리가 뿌듯하기도 하고, 참…감개무량하시다고요~^^*?

네~^^* 저도 그래요~~^^*

어머 그러고 보니 우리가 또하나의 동영상 강의를 마무리하였네요~^^*

네~^^* 일요일은 한 주의 마무리이자 한 주의 시작인데요~^^* 멋진 마무리를 해내어 멋진 시작을 할 멋진 기분이 드는 것 같아요~^^*

오늘 하루도 보람찬 시간 누리시고요~^^*

깊은 밤 편안한 잠 코~^^* 하셔요~^^*

네~^^* 꿈은 이루어 집니다~^^*