Silverback9

오늘은 3월2일이예요. 어제는…음… 뚜벅이가 깜짝 놀랄 일이 생겨서 공부를 못했어요. 오늘 어제 공부와 오늘 공부를 해내어 보겠습니다.

어제는 햇살이 쨍해서 머플러로 얼굴을 두르고 다니면 좋은 포근한 겨울 날씨였어요. 때로는 기차를 타고 달리는 듯이 때로는 뚜벅뚜벅 즐겁게 걷듯이 때로는 서고 가고를 반복하는 버스를 타고 내릴 곳 안내에 귀기울이 듯이 때로는 새롭게 개통된 도시철도를 타고 신기해 하듯이, 이동과 멈춤과 이동과 휴식이 잘 배분되어 있는 베토벤 교향곡 9번을 네 번째로 들을 날이었어요~^^* 지금 들어 볼까요~^^* 네^^* 저는 코딩공부 정리해서 돌아올게요~^^* 쓩우웅~^^*

네~^^* 오늘은 훈련 과정을 단계별로 보여주는 프로그램을 만들어 보겠습니다~^^*

어제(2025.02.28.(금)) 클래스 Perceptron의 함수 train()에 담아보았던 추측결과값 표현 기능을 메인함수 draw()안에 담아보겠습니다. 훈련과 상관없이, 현시점 Perceptron의 판별력량에 따른 추측값을 보여주겠습니다~^^*

클래스 Perceptron의 함수 train()은 mousePressed()가 호출하도록 하겠습니다. 마우스를 누를 때마다 perceptron.train()이 호출되어, 훈련이 단계적으로 진행되겠습니다~^^*

class Perceptron {
  constructor(totalInputs, learningRate) {
   
    this.weights = [];
    this.learningConstant = learningRate;
    
    for (let i = 0; i < totalInputs; i++) {
      this.weights[i] = random(-1, 1);
    }
    //1. 모든 입력값에 대하여, 그 입력값을 자신의 가중치로 곱한다.
    //1. For every input, multiply that input by its weight.
  }
  
  feedforward(inputs) {
    let sum = 0;
    for (let i = 0; i < this.weights.length; i++) {
      sum += inputs[i] * this.weights[i];
    }
    //2. Sum all of the weighted input
    //2. 가중치값이 반영된 입력값을 모두 더한다.
    return this.activate(sum);
    //총합에 대해 부호를 부여하는 함수 activate()을 호출합니다. 
  }
  
  activate(sum) {
    if (sum > 0) {
      return 1;
    } else {
      return -1;
    }
    //3. Compute the output of the perceptron based on that sum passed through an activiation function (the sign of the sum)
    //3. 총합에 +_부호를 부여하는 활성화 함수를 통과한 총합에 기반하여 perceptron 결과를 계산한다. 
  }
  
   train(inputs, desired) {
    let guess = this.feedforward(inputs);
    let error = desired - guess;
    for (let i = 0; i < this.weights.length; i++) {
      this.weights[i] += error * inputs[i] * this.learningConstant;
    }
  }
  //Supervised Learning 이 이루어 지는 함수입니다. 
  //1. known answer 알려진 답인 desired를 parameter로 받습니다. 
  //2. feedforward 함수를 호출하여 input 값을 arguement로 넘겨주며 답을 추측해 보라고 요구합니다. 
  //3.알려진 답 desired에서 feedforward 함수가 return해 준 추측값 guess를 뺄셈하여 변수 error에 저장합니다.
  //4. error값과 input 값과 learningConstatnt 회당 학습률을 곱하여 새로운 가중치값으로 조정합니다. 
  //5. 이 전체 과정을 반복하면 좋겠지요~^^* mouse를 누를 때마다 train 함수가 작동되어, 단계적 훈련 과정을 보여줄 수 있도록 해 볼게요~^^*
}

class Point{

  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.label;
  
    if(this.x > this.y) {
      this.label = 1;
    } else 
     {this.label = -1;
    }
    //x = y를 threshold 기준선으로 하여, 
    //x > y 의 경우 1
    //x =< y 의 경우 -1
    //판별값 label을 정하겠습니다. 
  }  
  
  show() {
  
    stroke(0);
    if (this.label == 1) {
      fill(255);
    } else{
      fill(0);
    }
    //판별값이 1인 경우 흰색으로 칠합니다.
    //판별값이 -1인 경우 검은색으로 칠합니다.
    ellipse(this.x, this.y, 16, 16);
  }  
}

let perceptron;
let points = [];

function setup() {
  createCanvas(400, 400);
  
  perceptron = new Perceptron(2, 0.0001);
  
  for (i = 0; i < 100; i++) {
    points[i] = new Point();
  }
   
 
}

function draw() {
  background(150);
  stroke(0);
  line(0,0, width, height);
   
  for(i = 0; i < points.length; i++) {
    points[i].show();
  }
  
  for(i = 0; i < points.length; i++) {
    let inputs = [points[i].x, points[i].y];
    let target = points[i].label;
    let guess = perceptron.feedforward(inputs);
  
    if (guess == target) {
      fill(0, 255, 0);
    } else {
      fill(255, 0, 0);
    }  
    noStroke();
    ellipse(inputs[0], inputs[1], 8, 8); 
  }
  //perceptron이 추측한 값이 known answer인 points.label과 같으면 초록색 다르면 빨간색 동그라미를 point 위에 그리겠습니다.  
}  

function mousePressed() {
  
  for(i = 0; i < points.length; i++) {
    let inputs = [points[i].x, points[i].y];
    let target = points[i].label;
    perceptron.train(inputs,target);
    //mouse를 누를 때마다
    //point의 위치좌표와 x= y theshold 기준선에 따른 known answer 알려진 값 label을 argument로 넘겨주며, perceptron의 train 함수를 호출합니다.
    //mouse를 누르면서 단계적 훈련을 할 수 있습니다~^^*.   
  } 
}

그럼 우리 마우스를 눌러보며 훈련이 한 단계 한 단계 진행됨에 따라 초록색이 점점 많아지는 것을 관찰해 볼까요~^^*

네~^^* perceptron의 훈련 단계 별로 전체 point들을 한꺼번에 보여주었는데요.

이번에는perceptron의 훈련 단계를 각 point마다 개별적으로 보여주도록 하겠습니다~^^*

let perceptron;
let points = [];

let trainingIndex = 0;

function setup() {
  createCanvas(400, 400);
  
  perceptron = new Perceptron(2, 0.0001);
  
  for (i = 0; i < 100; i++) {
    points[i] = new Point();
  }
}

function draw() {
  background(150);
  stroke(0);
  line(0,0, width, height);
   
  for(i = 0; i < points.length; i++) {
    points[i].show();
  }
  
  for(i = 0; i < points.length; i++) {
    let inputs = [points[i].x, points[i].y];
    let target = points[i].label;
    let guess = perceptron.feedforward(inputs);
  
    if (guess == target) {
      fill(0, 255, 0);
    } else {
      fill(255, 0, 0);
    }  
    noStroke();
    ellipse(inputs[0], inputs[1], 8, 8); 
  }
  //perceptron이 추측한 값이 known answer인 points.label과 같으면 초록색 다르면 빨간색 동그라미를 point 위에 그리겠습니다.  
   
   let training = new Point();
   training  = points[trainingIndex];
   
   let inputs = [training.x, training.y];
   let target = training.label;
   
   perceptron.train(inputs,target);
   
   trainingIndex++;
   
   if(trainingIndex == points.length){
     trainingIndex = 0;
   }
  //배열 points의 모든 구성원을
  //0번째 구성원 points[0]부터 마지막 번째 구성원 points[points.length -1]까지에 대해 
  //차례로 개별적으로
  //perceptron을 훈련시키겠습니다.
  //모든 구성원에 대한 순차적 개별적 훈련이 다 되면(trainingIndex == points.length)
  //처음부터 다시 개별적 순차적 훈련을 하겠습니다. 
}  

이제는 동그라미들 개별로 훈련이 이루어지고 어느 순간이 되면 모든 동그라미들의 훈련이 완료되어 모두 초록색 불이 켜지는 것이 보이시나요~^^*

네~^^* 오늘 훈련 과정을 전체 동그라미들에 대해 단계별로~^^* 보여주는 프로그램과 개별 동그라미들에 대해 순차적으로 훈련하는 과정을 보여주는 프로그램을 저와 함께 만들어 주셔서 감사합니다~^^*

어머! 우리가 어느새 동영상 강의 하나를 또! 완성해 내었네요~~^^*

우리 내일은 이 프로그램을 좀더 개선해 보기로 할까요? 무언가…개선할 점을 발견하게 되는 순간도, 플레이를 하다 보면 발견되는 것 같기도 해서요~^^*

네~^^* 어제 토요일의 공부를 오늘 일요일 저와 함께 보충해 주셔서 감사합니다~^^*

우리 오후는 잠시 쉬고요~^^* 저녁이 되면 오늘의 공부를 시작해 볼까요~^^*

멋진 낮의 대양을 자유롭게 헤엄치다 우리 저녁에 다시 만날까요~^^*

네~^^* 좋아요~^^* 고마워요~^^*

그럼 우리 즐거운 낮 시간을 보내고 저녁에 다시 만나요~~^^*

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