유명한 나이키 로고 스우시(Swoosh)를 그려보겠습니다. 인터넷을 뒤져봤지만 Swoosh를 만드는 식은 없는 듯 하여 제가 임의로 만들었습니다. 우측 치수선 2,090 / 2,120 부분은 직선으로 되어 있고 좌측은 직선에 접하는 원으로 시작해 상단 뾰족한 곳까지도 원이 서로 접하도록 되어 있습니다. 왼쪽 맨 하단을 원점(0,0)으로 하고, 오른쪽 하단의 직선을 시작으로 시계방향으로 각각의 식을 보겠습니다. 오토캐드 쓰시는 분이 계시면 아래 스크립트를 긁어서 command line에 붙여보시기 바랍니다. 로고가 그려지게 됩니다. (command "osmode" 0)(command "line" "2765,995" "645,57" "")(command "arc" "400,995" "e" "55,530" "..
자바스크립트로 행렬을 계산할 수 있는 라이브러리가 있습니다. math.js입니다. https://mathjs.org/docs/index.html 선언은 다음과 같이 넣어주면됩니다. 예를 통해 확인해 보겠습니다. 아래와 같은 연립방정식이 있습니다. 미지수 x,y를 구하기 위해 행렬식으로 나타내면 다음과 같습니다. math.js에서 math.inv로 역행렬을 구하고 math.multiply로 역행렬과 우변행렬을 곱하면 x,y의 값을 구할 수 있습니다. var inverted = math.inv([[3,6],[6,9]]); var xy=[[15],[24]]; var ans=math.multiply(inverted,xy); 값을 실행하여 x, y의 값을 나타내면 x=1, y=2가 나왔습니다. 검증을 해 보면 3..
아래 'graph' 버튼을 누르면 Canvas Line이 그려집니다. Canvas의 크기는 width, height이며 좌표계는 원점에서 오른쪽 방향, 아래방향이 각각 x, y 양의 방향입니다. 그려진 예의 Canvas 크기는 300x300로 잡았습니다. Line색은 검정, 채우는 색은 회색(rgb 222,221,219), Line 두께는 7로 설정했습니다. var ctx = document.getElementById("canvas").getContext("2d"); ctx.strokeStyle="black"; ctx.fillStyle = "rgb(222,221,219)"; ctx.lineWidth=7; beginPath()로 Line의 시작을 명시 한 후 시작점, 연결될 점을 적어줍니다. moveTo(..
차트 라이브러리 중 Chart.js가 있습니다. https://www.chartjs.org/ 라인, 막대, 원형 등 다양한 형태를 지원하고 심지어 이들이 합쳐진 그래프도 구현할 수 있도록 만든 자바스크립트 라이브러리입니다. 블로그에서 포스트를 보여줄 때 이해가 쉽도록 그림도 보여주고 싶은 욕구가 있어 Canvas로 직접 그래프를 만드는 작업을 했습니다. 데이터를 뽑고 Canvas 칸을 만들어 줄 긋고 범위에 맞도록 데이터 다시 가공... 많은 작업을 거쳐야 했습니다. 그런데 Chart 라이브러리를 적용해 봤더니 자동으로 다 알아서 해주더라고요.(허탈감과 함께 '이거다'하는 생각이 동시에 들었음). 바로 전 포스트에서 Chart.js를 적용했었습니다. 라인(Line)타입의 그래프를 만들었는데 문제가 있었습..
자바스크립트 canvas를 이용하여 x,y 좌표 그래프를 그려보겠습니다. 예를 들어 볼 그래프는 캔틸레버 보 끝단에 집중하중이 작용할 때 처짐형상으로 하겠습니다. 아래 그림에서 빨간색 박스가 처짐 식입니다. 식을 구성하기 위한 입력값이 필요합니다. P(하중), L(길이), E(탄성계수), I(단면이차모멘트)이고 기본 값을 입력해 두었습니다. P : (kN) L : (m) E : (kN·m) I : (m⁴) Max(mm) : 코드는 다음과 같습니다. P : (kN) L : (m) E : (kN·m) I : (m⁴) Max(mm) : canvas {border:1px solid black;} function draw(form) { graphbtn = document.getElementById('graph')..
로또 번호를 생성해 보겠습니다. 클릭하면 번호가 나옵니다. 소스도 함께 첨부합니다. 고정수를 넣을 수 있습니다. 공백없이 콤마(,)로 구분하여 수를 넣어주세요.(1,2,3,...) 제외수를 넣을 수 있습니다. 공백없이 콤마(,)로 구분하여 수를 넣어주세요.(1,2,3,...) 로또 관련 글 🏆로또 현재까지 가장 많이 나온 당첨 숫자 알아보기 🏆로또 회차 당 적정 당첨자 수는 얼마나 될까? 🏆거액을 타는 로또 당첨 비법이 있다고? 🏆로또 회차별 당첨결과 받기 function lotto() { var ctx = document.getElementById("canvas").getContext("2d"); ctx.clearRect(0,0, canvas.width, canvas.height); lottoNum =..
vscode로 html 파일을 chrome(크롬)으로 실행하는 방법을 알아보겠습니다. 먼저 vscode를 실행시킵니다. 파일-작업영역에 폴더추가 를 클릭하고 원하는 곳의 폴더를 지정하고 추가(A)합니다. 저는 C:\Javascript\Test 폴더를 지정했습니다. 그 후 만드셨거나 만드실 html 파일을 작업영역 폴더(저는 C:\Javascript\Test) 내에서 불러 옵니다. 없으시면 링크시켰으니 다운 받아서 작업영역 폴더에 넣고 vscode에서 파일-파일열기로 여시면 됩니다. aa.html 그 다음 ctrl+shift+P 를 누르고 configure task 를 치면 아래처럼 나옵니다. 바로 선택 하시면 됩니다. 그 다음 템플릿에서 tasks.json 파일 만들기를 선택하고 MSBuild 빌드 대상..