GDSC DevFest - 실습편

So'sCode·2021년 11월 5일
0

GDSC

목록 보기
2/3

GDSC DevFest 실습

이번에 GDSC에서 진행한 DevFest에서 실습은 제가 발표하게 되었습니다..! 코드 내에 그리고자하는 객체를 입력한 후, 사용자가 하나의 선을 그리면 나머지는 컴퓨터가 알아서 스케치 해주는 ml5 예제 파일을 만들었습니다.

코드 및 주석

  1. index.html
<html>
    <head>
        <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
        <script src="./sketch.js"></script>
    </head>
</html>
  1. sketch.js
let model //로딩했을때 모델을 보관할 수 있는 오브젝트를 모델이라고 부른다.
let previousPen = "down" //펜의 상태 
//down 일 경우에만 펜을 종이에 붙여서 그림을 그릴 수 있는 것이다. 
let x, y //그림의 위치 x와 y 좌표값
//=======이 세가지가 제일 중요한것
let strokePath //이런것이 담겨있는 것이 strokePath라고 한다.
let seedStrokes =[] //우리가 그리는 데이터를 array에 추가시킨 후 우리가 그리는 그림이 끝났을 경우 stroke데이터를 머신에게 보내준 후 계속해서 자동으로 그림을 완성해봐라~ 라는 형태

let canvas 

function preload(){
    /*preload함수는 setup과 draw가 실행되기 전에 제일 먼저 실행되는것이다.
    이게 있는 이유는 보통 외부에서 파일을 부를때 setup과 draw에서 함수를 부르게 된다면 준비가 되어있지 않은 상태에서 사용하려고 하다 에러가 나는 상황이 생긴다. 이런걸 방지하기 위하여 */
    model = ml5.sketchRNN("hand",modelReady)//그리고자하는 객체를 부른다.
}

function modelReady(){
    console.log('model is ready.') 
}

function setup(){
    canvas = createCanvas(600,400)//캔버스 만들어줌.
    canvas.mousePressed(resetDrawing)
    canvas.mouseReleased(startSketchRNN) //p5에서 진행하는 mouseReleased 함수  이는 마우스를 뗄때 실행되는 함수

    //const button = createButton('reset')// reset 버튼 생성
    //button.position(620,20) 
    //button.mousePressed(resetDrawing)//버튼 눌렀을 경우

    background(234)

    model.generate(seedStrokes, gotStroke)//데이터를 기본으로 하되 이를 이어서 선을 생성해주어야한다. 
}

function gotStroke(err, result){
    strokePath = result//결과를 받으면 strokePath를 통해 임시로 저장 (이유: 전역 변수가 있어야 다른곳에서 빼서 쓸 수 있으니까.)
}
function resetDrawing(){
    //그린 그림을 유지하되 모델만 리셋시켜 다시 그리고 싶기에
    seedStrokes = [] //초기화
    model.reset()//모델도 초기화
}

function startSketchRNN(){ //그림을 그리기 시작해라
    x = mouseX
    y = mouseY //마지막 마우스 위치에서 그리기 시작하여라
   model.generate(seedStrokes,gotStroke)
}

function draw(){
    if(mouseIsPressed){  //마우스를 누르고 있으면
      //내가 마우스로 그리는 그림이 보이게 한다.
        stroke(0,225,0)
        strokeWeight(6)
        line(pmouseX,pmouseY,mouseX,mouseY)  
        const userStroke = {
            //내가 그린 선의 데이터를 object화 하여 seedStrokes에 추가
            dx : mouseX - pmouseX,//데이터의 형식은 유지(현마우스위치-이전마우스 위치)
            dy : mouseY - pmouseY, 
            pen : "down"
        }
        //준비가 끝나면
        seedStrokes.push(userStroke)

    }
 
    if(strokePath){//strokePath가 준비되어있는 경우에만 무언가를 하자.
        if(previousPen == "down")//펜의 상태가 다운인 경우에만 그림을 그리겠다.
        {
            stroke(0) //선의 색
            strokeWeight(6) //선의 굵기
            line(x, y, x + strokePath.dx, y + strokePath.dy)  //기준점x,y에서 x는 x + dx 만큼  y는 y+dy만큼 이동해주면 다음 점을 찾을 수 있는 것이다. 현재 끝점은 다음의 첫번째 시잠점이고 이를 반복하면 선이 만들어 질 것이다. 
        }
        x += strokePath.dx // 바로전에 선이 끝난 부분으로 기준점을 옮김
        y += strokePath.dy
        previousPen = strokePath.pen //pen의 상태를 옮김 

        //모델과 generate를 다시 호출해주어야함. 
        if(strokePath.pen !=="end"){ 
            strokePath = null // end인 경우지만 line이 그려질 확률이 있으므로
            model.generate(gotStroke)
        }
    }
}

소감

이렇게 크다면 큰 자리에서 비록 비대면이였지만 발표한다는게 제게는 큰 부담감으로 다가오더라구요.. 그래서 더더욱 많이 코딩도 여러번 해보고 혼자 중얼 거리며 발표 연습도 해보고 코드 하나하나에 주석 달면서 연습도 배로 많이 한것 같아요.
연습할때는 계속해서 오타도 나고...오타는 오류로 이어지니 연습할때마다 오류가 나니 연습이었음에도 불구하고 되게 막막했습니다. 그러나, GDSC관계자 분들? 도 시작전에 제 긴장을 많이 풀어주셨습니다! (덕분에 정말 긴장이 많이 풀렸습니다:) )
막상 시작하니 많은 분들이 잘 따라와 주시는 것같고 제가 우려한 오타 부분에서 오타가 나니 많은 참가자 분들이 같이 고쳐주셔서 정말 감사했고 혼자 떠든다는 느낌이 들지 않아서 그점이 무엇보다 좋았던 것 같습니다. 👍
다들 최종 결과물을 봐주시고 감탄해주시기도 하시고 신기하다고 놀라주셔서 뭔가 준비한 것에 대한 보상을 받는 느낌이 들었어요!
이번 GDSC DevFest를 통하여 많은 것을 배웠습니다. 또한, 이런 기회 자체가 사실 흔하지 않은데 경험할 수 있어서 감사했습니다.

profile
이왕하는거미루지말고하자.

0개의 댓글