Coding/JavsScript 삽질기2021. 2. 13. 15:38

Youtube에서 3D 프로그래밍 관련 괜찮은 자료가 있어서 정리를 해 둡니다.

"高校数学とJavaScriptだけ。FPSの作り方 #1【ゲームプログラミング】【ゲーム開発】"

라는 제목의 강의 입니다. 강의 내용을 압축해 두어서, 생략이 많네요;;;

youtu.be/Mtf4rz9UEQo

 

youtu.be/aj1oBvY_LWw

 

youtu.be/34uAtYSirWk

 

Posted by chobocho

댓글을 달아 주세요

Coding/JavsScript 삽질기2019. 12. 17. 00:22

소개 (https://chobocho.tistory.com/2461396)
실행하기 http://www.chobocho.com/javascript/painter.html
전체 소스코드 https://github.com/chobocho/painter

 

chobocho/painter

Painter written html5. Contribute to chobocho/painter development by creating an account on GitHub.

github.com

6.1 원 그리기

원을 그리는 함수를 추가합니다.

circle = new Shape("Circle");
circle.mouseAction = new MouseAction(circleMouseUp, circleMouseDown, circleMouseMove);
function circleMouseDown(event) {
  console.log("circleMouseDown");
  if (painter.isDraw()) {
    return;
  }
  bufCtx.drawImage(canvas, 0, 0);
  var startPos = getMousePosition(event);
  painter.shape.point.x = startPos.X;
  painter.shape.point.y = startPos.Y;
  painter.setDrawMode(true);
}

function circleMouseMove(event) {
  if (!painter.isDraw()) {
    return;
  }
  var currentPos = getMousePosition(event);
  cvs.beginPath();
  // Need a delay
  cvs.clearRect(0, 0, canvas.width, canvas.height);
  cvs.drawImage(bufCanvas, 0, 0);

  cvs.strokeStyle = painter.getColor();

  var circle = {
    X: Math.round((painter.shape.point.x + currentPos.X) / 2),
    Y: Math.round((painter.shape.point.y + currentPos.Y) / 2),
    R: Math.round(Math.abs(currentPos.Y - painter.shape.point.y) / 2)
  };
  cvs.arc(circle.X, circle.Y, circle.R, 0, Math.PI * 2);
  cvs.closePath();
  cvs.stroke();
}

function circleMouseUp(event) {
  if (!painter.isDraw()) {
    return;
  }

  var currentPos = getMousePosition(event);
  bufCtx.beginPath();
  bufCtx.strokeStyle = painter.getColor();

  var circle = {
    X: Math.round((painter.shape.point.x + currentPos.X) / 2),
    Y: Math.round((painter.shape.point.y + currentPos.Y) / 2),
    R: Math.round(Math.abs(currentPos.Y - painter.shape.point.y) / 2)
  };
  bufCtx.arc(circle.X, circle.Y, circle.R, 0, Math.PI * 2);
  bufCtx.closePath();
  bufCtx.stroke();

  cvs.clearRect(0, 0, canvas.width, canvas.height);
  cvs.drawImage(bufCanvas, 0, 0);

  painter.setDrawMode(false);
}

 

6.2 도형의 선택

원과 선을 선택 할 수 있도록 html 파일에 함수를 연결 합니다.

[paint.js]

function selectShape(choosedShape) {
  console.log("selectShape:" + choosedShape);
  painter.setShape(choosedShape);
}

Painter 객체에 선, 원을 tools라는 자료형에 추가를 합니다.

Painter.prototype.init = function () {
  line = new Shape("Line");
  line.mouseAction = new MouseAction(lineMouseUp, lineMouseDown, lineMouseMove);
  this.tools[line.name] = line;

  circle = new Shape("Circle");
  circle.mouseAction = new MouseAction(circleMouseUp, circleMouseDown, circleMouseMove);
  this.tools[circle.name] = circle;

  this.shape = this.tools["Line"];
  this.color = "black";
}
function onLoadPage() {
  
  // ...

  painter = new Painter();
  painter.init();
}

6.3 기타 수정 사항

color 값은 모든 도형이 공통적으로 사용하므로,
shape 에서 painter 객체로 이동을 합니다.

Painter.prototype.init = function () {
  // ...
  this.color = "black";
}

 

여기까지 소스코드:

https://github.com/chobocho/painter/tree/master/doc/tutorial/006/src

 

chobocho/painter

Painter written html5. Contribute to chobocho/painter development by creating an account on GitHub.

github.com

 

공감과 댓글은 큰 도움이 됩니다.

Posted by chobocho

댓글을 달아 주세요

  1. 비밀댓글입니다

    2019.12.24 11:49 [ ADDR : EDIT/ DEL : REPLY ]
    • 안녕하세요. painter.html 파일에서 saveImage()로 검색하시면 됩니다.

      2019.12.24 11:53 신고 [ ADDR : EDIT/ DEL ]

Coding/JavsScript 삽질기2019. 11. 12. 09:20

https://github.com/chobocho/painter/blob/master/doc/tutorial/001/001.md


Javascript로 그림판 만들기 001
 
모든 프로그래밍의 시작은 요구사항 분석 입니다.
UML 툴을 이용하여 머릿속에 존재하는 그림판의 요구사항을 정리해 봅니다
 
 
요구사항이 정리 되었으면, 만들고자 하는 그림판의 모습을 먼저 그려 봅니다.
 
 
 

 

Posted by chobocho

댓글을 달아 주세요

Coding/JavsScript 삽질기2011. 11. 15. 00:35
ChoboMemo!

[ 글자수 세기 ]

Count

0 / 0

Text

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Chobocho Calc 1  (1) 2016.04.23
글자수 세는 자바 스크립트  (2) 2011.11.15
Google chart API를 이용한 QR CODE 생성기  (3) 2010.11.30
Hex2Ascii Javascript code  (0) 2010.06.15
Posted by chobocho

댓글을 달아 주세요

  1. 유용한 글 되게 잘 배우고 갑니다

    2020.11.20 20:13 [ ADDR : EDIT/ DEL : REPLY ]