튜토리얼/p5js6 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. 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. 디지털 아트의 세계로 첫발을 내딛다: p5.js로 시작하는 창의적 여정 이번 포스트에서는 웹 기반의 크리에이티브 코딩 라이브러리인 p5.js에 대해 소개하고, 이를 시작하게 된 계기와 기본 개념에 대해 이야기할 것입니다. p5.js가 어떻게 예술가, 디자이너, 교육자, 그리고 초보자들이 시각적인 예술과 인터랙티브한 프로젝트를 쉽게 만들 수 있게 도와주는지 알아보겠습니다. 디지털 아트의 세계로 첫발을 내딛다: p5.js로 시작하는 창의적 여정 디지털 아트의 세계로 첫발을 내딛다: p5.js로 시작하는 창의적 여정 1. p5.js 소개 2. 기본 개념과 예시 3. 참고 자료 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. p5.js 소개p5.js는 프로세싱(Processing)의 웹 버전으로, 자바스크립트를 사용하여 웹에서 시각적 예술과 인터랙티브한 작업을 손쉽게 만.. 2024. 4. 27. 이전 1 다음 반응형
