분류 전체보기42 p5.js로 마우스 클릭 시 랜덤한 모양 생성하기 p5.js를 사용하여 마우스를 클릭할 때마다 랜덤한 모양을 생성해보겠습니다. 이 튜토리얼을 통해 p5.js의 기본 사용법과 인터랙티브한 그래픽 생성 방법을 배울 수 있습니다. p5.js로 마우스 클릭 시 랜덤한 모양 생성하기 p5.js로 마우스 클릭 시 랜덤한 모양 생성하기 1. 랜덤 색상 및 모양 생성 2. 마우스 클릭 이벤트 구현 3. 입력하기 4. 입력하기 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 랜덤 색상 및 모양 생성랜덤 함수를 사용하여 각기 다른 색상과 크기의 원, 사각형, 삼각형을 생성하는 코드를 살펴봅니다. // 랜덤한 색상 let r = random(255); let g = random(255); let b = random(255); fill(r, g, b);.. 2024. 5. 25. p5.js로 인터랙티브 도형 만들기 - 마우스 위치에 따라 움직이는 도형 이번에는 p5.js 라이브러리를 사용하여 마우스 위치에 따라 움직이는 인터랙티브 도형을 만드는 방법을 소개하겠습니다. p5.js는 자바스크립트 기반의 창의적인 코딩 라이브러리로, 웹 상에서 애니메이션과 시각적 효과를 쉽게 구현할 수 있습니다.p5.js로 인터랙티브 도형 만들기 - 마우스 위치에 따라 움직이는 도형p5.js로 인터랙티브 도형 만들기 - 마우스 위치에 따라 움직이는 도형 1. 도형 그리기 2. 도형 변형하기 3. 애니메이션 효과 추가하기 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 도형 그리기현재 p5js사이트의 에디터를 사용하고 있습니다. 도형을 그리는 방법은 setup() 함수와 draw() 함수를 사용합니다. setup() 함수는 한 번만 실행되며, draw() 함수는 애.. 2024. 5. 12. 아두이노로 서보모터 제어하기 이번에는 아두이노를 사용해서 서보모터를 제어하는 방법에 대해 소개하겠습니다. 서보모터는 회전각을 정밀하게 제어할 수 있어 로봇 팔, 그리퍼, 드론 등 다양한 분야에서 활용됩니다. 아두이노로 서보모터 제어하기 아두이노로 서보모터 제어하기 1. 서보모터란? 2. 회로 연결하기 3. 코드 작성하기 4. 관련 작품추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 서보모터란?서보모터는 회전각을 정밀하게 제어할 수 있는 모터입니다. 일반 DC 모터와 달리 서보모터에는 제어 회로가 내장되어 있어 목표 위치까지 정확하게 회전할 수 있습니다. 서보모터는 주로 0°에서 180° 사이의 각도로 회전하며, 펄스 폭 변조(PWM) 신호로 제어합니다. 회로 연결하기서보 모터의 선색을 잘 보셔서 연결하시면 됩니다. 빨간색.. 2024. 5. 10. 아두이노 초음파 센서 프로젝트 - 물체 거리 측정하기 이번에는 아두이노와 초음파 센서를 사용하여 물체까지의 거리를 측정하는 프로젝트를 소개하겠습니다. 초음파 센서는 매우 다양한 분야에서 활용되며, 이번 프로젝트를 통해 센서 데이터를 읽고 처리하는 방법을 배울 수 있습니다. 아두이노 초음파 센서 프로젝트 - 물체 거리 측정하기 아두이노 초음파 센서 프로젝트 - 물체 거리 측정하기 1. 필요한 부품 2. 회로 연결하기 3. 코드 4. 관련 작품추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 필요한 부품 HC-SR04는 아두이노 및 다른 마이크로컨트롤러와 함께 자주 사용되는 저렴한 초음파 센서입니다. 이 센서는 초음파 펄스를 발사하고 반사된 펄스를 수신하여 물체까지의 거리를 측정할 수 있습니다. 하지만 측정 거리가 최대 4m로 제한적이며, 작은 물체나.. 2024. 5. 9. 아두이노와 PIR 모션 센서로 움직임 감지 프로젝트 만들기 이번에는 아두이노와 PIR(Passive Infrared) 모션 센서를 사용하여 움직임을 감지하는 프로젝트를 만들어보겠습니다. 이 프로젝트를 통해 센서 데이터를 읽고 LED나 부저 등의 actuator를 제어하는 방법을 배울 수 있습니다. 아두이노와 PIR 모션 센서로 움직임 감지 프로젝트 만들기 글제목 입력??? 목차 1. 사용센서 2. 회로 연결하기 3. 코드 작성하기 4. 관련작품추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 사용센서 PIR 센서는 적외선 복사 에너지를 감지하여 움직임을 탐지하는 센서입니다. 모든 물체는 온도에 따라 적외선을 방출하는데, PIR 센서는 이 적외선 복사 에너지의 변화를 감지합니다. 따라서 PIR 센서는 움직이는 물체와 정지된 물체 사이의 적외선 복사 .. 2024. 5. 9. p5.js로 실시간 사용자 입력 렌더링하기 안녕하세요! 이번에는 p5.js 라이브러리를 사용하여 사용자 입력을 받고, 그 입력 값을 캔버스에 실시간으로 렌더링하는 방법에 대해 알아보겠습니다. p5.js로 실시간 사용자 입력 렌더링하기 p5.js로 실시간 사용자 입력 렌더링하기 1. 사용자 입력 받기 2. 입력 값 업데이트 3. 입력 값 렌더링 4. 전체코드추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 사용자 입력 받기먼저 setup() 함수 내에서 createInput() 함수를 사용하여 입력 상자를 생성합니다. 그리고 position() 함수를 사용하여 입력 상자의 위치를 설정합니다.저는 처음에 createInput() 이런게 있는 지 모르고 html로 직접 input을 해서 하려고 했습니다... 계속 에러가 나고 안되더라구요.. 2024. 5. 9. 이전 1 2 3 4 5 6 7 다음 반응형
