마이크 소리에 따라 생동감 있게 변하는 그래픽, 비전공자도 쉽게 만든 비밀 코드 공개

---

이 영상은 마이크로폰을 통해 실시간으로 사운드를 수집하고, 그 소리에 반응하는 시각적 콘텐츠를 만드는 과정을 소개합니다. 특히 비전문가도 쉽게 접근할 수 있는 코딩 도구인 p5.js와 프로세싱을 활용해, 오디오 입력을 시각화하는 방법을 설명하는데요. p5.js는 자바스크립트 기반으로 간단한 그래픽과 사운드 처리를 지원하며, 프로세싱은 자바 기반으로 생성 아트와 인터랙티브 작업에 강점이 있습니다. 이 두 가지 툴은 디자이너나 비전공자도 직관적으로 사용할 수 있어, 사운드 반응형 콘텐츠 제작에 적합합니다. 영상에서는 GPT-4를 활용해 구체적인 코딩 예시를 보여주며, 사운드 레벨을 측정하는 앰플리튜드 객체 사용법까지 친절히 안내합니다. 코딩 초보자도 따라 하기 좋은 실용적인 가이드로, 사운드와 그래픽을 결합한 창의적 프로젝트에 관심 있는 분들께 추천드립니다.

 

 

[영상 정보]

 

• 영상 제목: 최신 라이브러리 Bing 모델로 코딩하세요! 챗GPT-4 소리에 반응하는 콘텐츠! AI Coding OpenAI ChatGPT 오후다섯씨
• 채널명: Mr.5pm
• 업로드 날짜: 2023-06-17
• 영상 길이: 10:48

 

[영상에서 사용한 서비스]

 

• - 프로세싱 (Processing) : https://processing.org/ — 비주얼 아트와 코딩 교육을 위한 오픈소스 프로그래밍 언어 및 개발 환경
• - 구글 드라이브 (Google Drive) : https://drive.google.com/ — 파일 저장 및 공유 서비스, 영상에서 시작 코드 다운로드 용도로 사용
• - 유튜브 (YouTube) : https://www.youtube.com/ — 영상 플랫폼, 해당 영상 및 관련 콘텐츠 시청용
• - 챗GPT (ChatGPT) : https://chat.openai.com/ — 대화형 인공지능 언어 모델, 코딩 및 창작 지원용
• - 빙 (Bing) : https://www.bing.com/ — 검색 엔진, AI 기반 검색 및 정보 탐색용
• - p5.js : https://p5js.org — 자바스크립트 기반 그래픽 및 상호작용 라이브러리
• - p5.sound : https://p5js.org/reference/#/libraries/p5.sound — p5.js의 오디오 입력 및 시각화 라이브러리
• - Processing : https://processing.org — 자바 기반 시각적 프로그래밍 언어 및 환경, 그래픽과 오디오 처리에 탁월
• - GPT-4 (OpenAI) : https://openai.com — 인공지능 언어 모델, 코딩 및 질문 답변 지원

 

[주요 내용]

 

마이크로폰으로 소리를 실시간 수집해, 음성에 반응하는 동그라미 크기가 변하는 코딩 과정을 친절하게 설명합니다. 데이터 기반으로 시각적 변화를 구현하는 방법을 차근차근 보여줘, 코딩 입문자도 쉽게 이해할 수 있는 점이 인상적입니다.

 

사운드를 수집해 반응하는 콘텐츠 제작에 적합한 코딩 툴을 소개합니다. 디자이너 출신 비전문가도 쉽게 활용할 수 있는 시각적 프로그래밍 옵션을 중심으로, 사용자의 능력과 선호에 맞는 다양한 도구를 객관적으로 비교해 알려드립니다.

 

p5.js 라이브러리는 그래픽과 오디오를 쉽게 시각화할 수 있는 도구로, 복잡한 코딩 없이도 마이크 입력을 활용해 다양한 인터랙티브 콘텐츠를 만들 수 있습니다. 사용자 친화적인 시각적 프로그래밍에 관심 있는 분들께 추천할 만한 방법입니다.

 

프로세싱은 자바 기반의 시각적 프로그래밍 언어로, 비전공자도 쉽게 그래픽과 오디오를 다룰 수 있어 창의적인 생성 아트 개발에 매우 유용합니다.

 

프로세싱 코딩을 구체적 기능이나 디자인 없이도 시작하는 방법을 친절히 설명합니다. GPT-4 모델을 활용해 기본 라이브러리 불러오기부터 마이크 오디오 처리까지 차근차근 안내하는 점이 인상적이며, 코딩 입문자에게 실질적 도움을 줍니다.

 

마이크로폰으로 오디오 입력을 받아 사운드 높이 값을 측정하고, 이를 코드로 처리해 원 크기 조절에 활용하는 과정을 친절하게 설명합니다. 오디오 신호를 시각적으로 표현하는 방법에 관심 있는 분들께 유용한 내용입니다.

 

화면 중앙에 원을 그리기 위해 좌표와 화면 크기를 활용하고, 사운드 레벨 값을 0~1 범위에서 10~200 크기로 변환하는 맵핑 함수 과정을 친절하게 설명합니다.

 

입력 값 범위를 0~1에서 10~200으로 변환하는 맵 함수 활용법과, 사운드 라이브러리 연동 시 발생하는 에러 원인을 친절하게 설명합니다. 코드를 직접 실행하며 실습하는 과정이 구체적이라 이해하기 쉽고, 프로그래밍 입문자에게 특히 도움이 되는 내용입니다.

 

2021년 이후로 바뀐 최신 라이브러리 코드를 GPT-4와 빈 검색 엔진을 활용해 문제없이 개발하는 방법을 친절하게 설명합니다.

 

마이크로폰으로 실시간 사운드를 수집해 소리 크기에 따라 시각적 반응을 만드는 간단한 프로세싱 코드 예제를 소개합니다. 사운드 라이브러리를 활용해 소닉 크기 변화를 구현하는 방법을 데이터 기반으로 쉽게 이해할 수 있어, 인터랙티브 콘텐츠 제작에 유용한 팁을 얻을 수 있습니다.

 

최신 마이크로소프트 모델을 활용해 실시간 데이터 검색이 가능하며, 프로세싱3 버전에서 미니멀 라이브러리를 설치하고 사용하는 방법을 친절하게 안내합니다.

 

라이브러리 설치 과정과 문제 해결법을 단계별로 친절하게 안내합니다. 스케치 메뉴에서 ‘매니지 라이브러리’를 통해 필요한 미니미 오디오 라이브러리를 검색하고 설치하는 방법을 구체적으로 설명해, 설치 오류 없이 바로 실행할 수 있도록 돕는 실용적인 가이드입니다.

 

마이크 접근 권한 승인 후에도 소리 크기에 따라 원 크기가 변하지 않을 때, 디버깅을 통해 실제 값이 제대로 들어오는지 확인하는 과정이 중요하다는 점을 친절하게 설명합니다. 프로세싱에서 마이크 입력 처리 문제를 해결하는 실용적인 팁을 담고 있어 도움이 됩니다.

 

마이크에서 실시간으로 들어오는 값이 제대로 출력되는지 확인하는 방법과, 변수 값을 쉽게 확인할 수 있는 프린트 함수 활용법을 친절하게 설명합니다. 코드 디버깅에 꼭 필요한 핵심 과정이라 이해하기 쉽고 실용적입니다.

 

값이 0으로 계속 들어오는 문제를 데이터와 권한 확인을 통해 차근차근 분석하는 과정을 보여줍니다. 마이크로폰 권한 설정과 장치 선택이 원인인지 객관적으로 점검하는 모습이 인상적입니다.

 

컴퓨터에 여러 개의 오디오 입력 장치가 있을 때, 올바른 마이크를 선택하는 방법을 코드로 쉽게 확인하고 수정하는 과정을 친절하게 설명합니다. 정확한 마이크 설정이 중요한 이유와 실용적인 해결책을 함께 배울 수 있어 오디오 장비 활용에 큰 도움이 됩니다.

 

마이크로폰으로 오디오를 실시간 수집해 반응형 그래픽을 만드는 방법을 친절하게 설명합니다. 음성에 따라 원 크기나 색깔이 변하는 코드를 활용해 다양한 인터랙티브 콘텐츠 제작이 가능하다는 점이 인상적입니다. 최신 라이브러리와 AI 모델을 접목한 실용적인 예시로, 직접 적용해보고 싶은 분들께 추천합니다.

 

관련 링크: 유튜브 바로가기