Creative Coding 독학 제340일 2025년03월02일(일)

2025년 3월 2일

넵! 오늘의 공부를 시작해 보겠습니다~^^*

저녁과 밤이 서로 대화를 나누는 이 시각. 베토벤 교향곡 9번의 악보를 손가락으로 따라가며 들어보는 다섯 번째 날~^^* 코딩 공부 정리해서 돌아올게요~^^* 쓩우웅~^^*

네~^^* 오늘은 p5.js의 캔버스 그래픽 좌표계를 평소 우리가 수학시간에 접해보았던 전통적인 좌표계로 바꾸어 보겠습니다~^^*

네~^^* 왼쪽 끝 x = 0 오른쪽 끝 x = width 위쪽 끝 y = 0 아래쪽 끝 y = height인 p5.js 그래픽 좌표계를~^^*

한가운데 (x = 0, y = 0), 왼쪽 끝 x = – width/2 오른쪽 끝 y = width/2 위쪽 끝 y = height/2 아래쪽 끝 y = – height/2인 데카르트 좌표계로 바꾸어 보겠습니다~^^*

class Point 안에 x축과 y축 좌표계 변환을 위한 함수를 만들어 넣어 보겠습니다~^^*

class Point{

  constructor() {
    this.x = random(-1,1);
    this.y = random(-1,1);
    //x와 y값은 -1에서 1사이 무작위 수를 부여하겠습니다~^^*
    
    this.label;
  
    if(this.x > this.y) {
      this.label = 1;
    } else 
     {this.label = -1;
    }
    //x = y를 threshold 기준선으로 하여, 
    //x > y 의 경우 1
    //x =< y 의 경우 -1
    //판별값 label을 정하겠습니다. 
  }  
  
  pixelX() {
    return map(this.x, -1, 1, 0, width);
  }
  //왼쪽 끝 -1 오른쪽 끝 1 값을 가지도록 하겠습니다. 
  
  pixelY() {
    return map(this.y, -1, 1, height, 0);
  }
  //위쪽 끝 1 아래쪽 끝 -1 값을 가지도록 하겠습니다. 
  
  show() {
  
    stroke(0);
    if (this.label == 1) {
      fill(255);
    } else{
      fill(0);
    }
    //판별값이 1인 경우 흰색으로 칠합니다.
    //판별값이 -1인 경우 검은색으로 칠합니다.
    
    let px = this.pixelX();
    let py = this.pixelY();
    
    ellipse(px, py, 16, 16);
    //데카르트 위치좌표(px, py)에 동그라미를 그리겠습니다~^^*
  }  
}

데카르트 좌표위치값을 가지게 된 Class 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,height, width, 0);
  //우상좌하 기준선을 표현해 보겠습니다~^^*
   
  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(points[i].pixelX(), points[i].pixelY(), 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)
  //처음부터 다시 개별적 순차적 훈련을 하겠습니다. 
}

데카르트 좌표계에 맞게 mapping 작업이 point들마다 검은색 흰색 그리기 초록색 빨간색 그리기 단계에서 매번 이루어지기 때문에 훈련은 좀 천천히 진행될 것 같아요~^^* point들 개별적으로 그리고 순차적으로 훈련이 이루어집니다~^^* 시간이 좀 흐르고 나면 전체 point들이 초록색으로 다 칠해져 있으면 좋겠네요~~^^* 그럼 우리 함께 초록별 구경하러 가 볼까요~~^^*

오늘 저와 함께~^^* 수학시간에 접해 본 데카르트 좌표계 위에 동그라미를 표현하고 개별적 순차적으로 진행되는 perceptron 훈련과정을 표현해 주셔서 감사합니다~^^*