분류 전체보기35 클릭하면 변하는 버튼: 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. 초보자도 쉽게 따라할 수 있는 웹 기반 GLSL 쉐이더 프로그래밍 웹에서 GLSL(OpenGL Shading Language)을 사용하여 쉐이더 프로그래밍을 실습하고 실험할 수 있는 다양한 플랫폼이 있지만, 그중에서도 특히 주목할 만한 사이트가 있습니다. 바로 'ShaderToy'와 'GLSL Editor'입니다. 이러한 플랫폼들은 사용자가 브라우저에서 직접 GLSL 코드를 작성하고, 실시간으로 결과를 확인할 수 있게 해줍니다. 이 글에서는 이 두 플랫폼과 함께 간단한 쉐이더 코드 예시 세 가지를 소개하겠습니다. 초보자도 쉽게 따라할 수 있는 웹 기반 GLSL 쉐이더 프로그래밍 초보자도 쉽게 따라할 수 있는 웹 기반 GLSL 쉐이더 프로그래밍 1. ShaderToy 2. GLSL Editor 3. 예시 추천글 위의 목차를 클릭하면 해당 글로 자동 이동 합니다. Shad.. 2024. 4. 19. 쉐이더 프로그래밍 가이드: RGB에서 HSV로 – 컬러 스페이스 변환 이해하기 컬러 스페이스와 색상 이론은 그래픽스 개발과 쉐이더 프로그래밍에서 중요한 개념입니다. 이를 이해하는 것은 물체의 색상을 정확하게 표현하고, 사용자에게 시각적으로 만족스러운 경험을 제공하는 데 필수적입니다. 본 글에서는 컬러 스페이스와 색상 이론의 기본 개념을 설명하고, OpenGL을 사용한 쉐이더 프로그램 예제 코드를 통해 이를 실제 어플리케이션에 어떻게 적용할 수 있는지 보여드리겠습니다. 쉐이더 프로그래밍 가이드: RGB에서 HSV로 – 컬러 스페이스 변환 이해하기 쉐이더 프로그래밍 가이드: RGB에서 HSV로 – 컬러 스페이스 변환 이해하기 1. 컬러 스페이스와 색상 이론 개요 2. OpenGL 쉐이더로 RGB에서 HSV로 변환 추천글 위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 컬러 스페이스.. 2024. 4. 19. 이전 1 2 3 4 5 6 다음
