튜토리얼19 p5.js로 실시간 사용자 입력 렌더링하기 안녕하세요! 이번에는 p5.js 라이브러리를 사용하여 사용자 입력을 받고, 그 입력 값을 캔버스에 실시간으로 렌더링하는 방법에 대해 알아보겠습니다. p5.js로 실시간 사용자 입력 렌더링하기 p5.js로 실시간 사용자 입력 렌더링하기 1. 사용자 입력 받기 2. 입력 값 업데이트 3. 입력 값 렌더링 4. 전체코드추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 사용자 입력 받기먼저 setup() 함수 내에서 createInput() 함수를 사용하여 입력 상자를 생성합니다. 그리고 position() 함수를 사용하여 입력 상자의 위치를 설정합니다.저는 처음에 createInput() 이런게 있는 지 모르고 html로 직접 input을 해서 하려고 했습니다... 계속 에러가 나고 안되더라구요.. 2024. 5. 9. 클릭하면 변하는 버튼: p5.js로 색상 변경하기 버튼을 클릭하면 색이 변경되는 p5.js 코드를 사용하여 동적인 버튼을 만들어보겠습니다. . 클릭할 때마다 버튼의 색상이 변하며, 이를 통해 사용자의 상호작용을 활성화할 수 있습니다. 클릭하면 변하는 버튼: p5.js로 색상 변경하기 클릭하면 변하는 버튼: p5.js로 색상 변경하기 1. 버튼 생성하기 2. 색상 변경 함수 구현하기 3. 버튼에 색상 적용하기 4. 동적 상호작용추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 버튼 생성하기p5.js 라이브러리의 createButton() 함수를 사용하여 "Click me"라는 텍스트가 있는 버튼을 생성합니다. position() 함수를 사용하여 버튼의 위치를 설정하고, size() 함수를 사용하여 버튼의 크기를 설정합니다. setup()함수에 .. 2024. 5. 8. p5.js로 구현하는 모자이크 효과 만들기 이번 포스트에서는 p5.js를 사용하여 모자이크 효과를 만드는 방법에 대해 알아보겠습니다. 모자이크 효과는 이미지를 작은 타일로 분할하여 독특한 시각적 효과를 만들어내는 기술입니다. p5.js의 강력한 이미지 처리 기능을 활용하여 쉽게 모자이크 효과를 구현할 수 있습니다. p5.js로 구현하는 모자이크 효과 만들기 p5.js로 구현하는 모자이크 효과 만들기 1. 이미지 로드 및 표시 2. 모자이크 효과 구현 3. 입력하기 4. 입력하기 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 이미지 로드 및 표시p5.js에서 이미지를 로드하기 위해선 서버를 사용해야합니다. 인터넷 url주소를 사용하셔도 되지만 자신이 가지고 있는 사진을 이용하기 위해선 서버를 열어 놓아야 합니다. 그래서 간단히 파이썬.. 2024. 5. 2. 언리얼 화면에 맞게 크기 조절 이번엔 언리얼에서 화면크기에 맞게 조절하는 방법을 알아보겠습니다. 이 종횡비(ratio)를 맞추는 방법으로 Widget, 즉 UI를 화면에 맞게 작성하는 방법입니다. 언리얼 화면에 맞게 크기 조절 언리얼 화면에 맞게 크기 조절 1. Widget 구조 2. 문제점 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. Widget 구조위젯 구조는 아래처럼 하시면 됩니다. 스케일박스 -> 크기박스 이렇게 설정하시면 됩니다. 이어서 크기박스를 아래처럼 설정하시면 크기에 맞게 stretch하게 됩니다. 문제점이렇게만 하면 문제점이 있습니다. 사이즈박스안에 있는 위젯을 옮길때 위치에따라 값이 달라지게 됩니다.이를 해결하기 위한 방법으로 사이즈박스에서 크기를 오버라이드 해주면 됩니다. 설정한 화면비율의 크기로 .. 2024. 5. 1. 디지털 아트의 세계로 첫발을 내딛다: p5.js로 시작하는 창의적 여정 이번 포스트에서는 웹 기반의 크리에이티브 코딩 라이브러리인 p5.js에 대해 소개하고, 이를 시작하게 된 계기와 기본 개념에 대해 이야기할 것입니다. p5.js가 어떻게 예술가, 디자이너, 교육자, 그리고 초보자들이 시각적인 예술과 인터랙티브한 프로젝트를 쉽게 만들 수 있게 도와주는지 알아보겠습니다. 디지털 아트의 세계로 첫발을 내딛다: p5.js로 시작하는 창의적 여정 디지털 아트의 세계로 첫발을 내딛다: p5.js로 시작하는 창의적 여정 1. p5.js 소개 2. 기본 개념과 예시 3. 참고 자료 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. p5.js 소개p5.js는 프로세싱(Processing)의 웹 버전으로, 자바스크립트를 사용하여 웹에서 시각적 예술과 인터랙티브한 작업을 손쉽게 만.. 2024. 4. 27. 아두이노 조도 센서 활용하기: 기초 아두이노는 다양한 센서를 사용하여 외부 환경을 측정하고, 이를 통해 여러 가지 인터랙티브 프로젝트를 구현할 수 있는 강력한 도구입니다. 오늘은 그 중에서도 조도 센서를 사용하여 주변 빛의 강도를 측정하는 방법에 대해 알아보겠습니다. 이를 통해 빛의 강도에 따라 다양한 작업을 자동으로 실행할 수 있는 프로젝트를 만들 수 있습니다. 아두이노 조도 센서 활용하기: 기초 아두이노 조도 센서 활용하기: 기초 1. 필요한 재료 2. 조도 센서란? 3. 회로 구성하기 4. 관련 작품 예 추천글 위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 필요한 재료 아두이노 보드 (Uno, Mega 등 어떤 모델이든 상관없습니다) 조도 센서 (예: LDR 또는 광센서) 10kΩ 저항 점퍼 와이어 브레드보드 조도 센서란? 조도.. 2024. 4. 15. 이전 1 2 3 4 다음
