임이지의 블로그

1. 초기 변수 설정 e: 입자의 궤적을 저장하는 배열입니다. h: 하트 모양의 경로를 정의하는 노드들의 배열입니다. O, Q: 캔버스의 너비와 높이입니다. v: 궤적의 수, 각 궤적에 있는 입자의 수, 하트 경로에 있는 노드의 수를 정의합니다. M: Math 객체의 단축형입니다. R, C, Y: 각각 Math.random, Math.cos 함수와 하트 경로 계산에 사용되는 상수입니다. 2. 하트 경로 계산 하트 모양의 경로를 계산하기 위해 for 루프를 사용하여 h 배열에 노드를 추가합니다. 이 노드는 하트의 수학적 공식을 기반으로 계산됩니다. 3. 입자 초기화 while 루프를 사용하여 각 궤적에 대한 입자 배열을 생성합니다. 각 입자는 위치, 속도, 반경, 가속도, 타겟 노드, 방향, 마찰, 색상 ..

Web/HTML JS 2024. 2. 21. 15:19

브라우저 크기에 따라 Canvas의 크기를 Fit 하려면 아래와 같이 두 가지 방법으로 처리할 수 있다. JAVA SCRIPT // important! for alignment, you should make things // relative to the canvas' current width/height. function draw() { var ctx = (a canvas context); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; //...drawing code... } CSS html, body { width: 100%; height: 100%; margin: 0; }

Web/HTML JS 2021. 6. 18. 14:26

TensorFlow.js 를 사용하다가 Canvas 객체의 이미지 데이터를 접근하려 하다가 아래 오류가 발생하였다. drawCanvas는 HTML에서 선언한 이미지를 그리는 용도로 사용하였다. // HTML 선언부 // shape img 객체를 canvas 에 그리는 코드 function imageDraw() { var img = document.getElementById("shape"); ctx.drawImage(img, 0, 0); } // canvas 의 데이터를 접근하여 추론 하는 코드 async function predict() { // predict can take in an image, video or canvas html element var canvas = document.getEleme..

Web/HTML JS 2021. 5. 11. 11:13

Teacable Machine 을 이용하여 모델을 javascript 에서 사용하는 형태로 export 하면 아래와 같은 example 코드를 확인 할 수 있다. 상기 코드는 webcam 의 canvas 의 영상을 전송 받아서 tensorflow 로 추론 하는 코드이다. Teachable Machine Image Model Start 모델을 로드 하는 코드 모델을 로드하는 코드는 아래와 같다. Teachable Machine 으로 만든 모델을 로드하는 코드이다. const URL = "https://teachablemachine.withgoogle.com/models/VS7xWXrlQ/"; let model, webcam, labelContainer, maxPredictions; // Load the i..

Web/HTML JS 2021. 5. 10. 20:55

HTML 상에 Canvas에서 그려진 객체를 이미지로 업로드하는 방법에 대해서 조사하였다. toDataURL toDataURL란? HTML5 Canvas의 제공 함수 중에 하나이며 Canvas의 내용을 data URL 문자열로 변환한다. 원하는 인코딩 타입으로 변환 가능 변환된 데이터 - data : 마임 타입; base64, 이미지를 변환한 문자열 toDataURL 메서드를 사용하여서 canvas를 이미지로 변환하는 코드이다. toDataURL의 경우 모질라 파이어 폭스에서는 image/jpeg, image/webp 두 가지만 허용함으로 주의해야 한다. 브라우저마다 API의 지원범위가 조금씩 다르다. var dataUrl = canvas.toDataURL("image/jpeg"); var blobDat..

Web/HTML JS 2021. 5. 10. 15:25

티스토리 상에 이미지를 첨부하고 테스트를 해보겠다. 상기 이미지는 아래의 경로를 갖는다. https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fblx41k%2Fbtq31asAHuU%2FnkcKYglcscK8pd60WNysNk%2Fimg.jpg IMG Tag로 이미지 출력 IMG Tag 로 아래와 같이 티스토리에 업로드된 이미지 주소를 출력하였다. Canvas 객체를 생성하여 이미지를 그리는 코드 Your browser does not support the HTML5 canvas tag. 상기 코드는 canvas를 생성하고 이전의 생성한 img 객체를 canvas 에 드로잉 하는 ..

Web/HTML JS 2021. 5. 4. 10:09