본문 바로가기

전체 글24

2. 캔버스와 기본 도형, 색상 설정 1. 캔버스 생성createCanvas(width, height): 캔버스 크기를 설정합니다.2. 기본 도형원: ellipse(x, y, w, h) (중심 좌표와 폭, 높이)사각형: rect(x, y, w, h) (좌측 상단 좌표와 폭, 높이)선: line(x1, y1, x2, y2) (시작과 끝 좌표)삼각형: triangle(x1, y1, x2, y2, x3, y3)function setup() { createCanvas(400, 400);}function draw() { background(220); // 배경 색 초기화 rect(50, 50, 100, 100); // 사각형 ellipse(200, 200, 80, 80); // 원 line(300, 100, 350, 300); // 선} .. p5.js Study 📚 2024. 12. 16.
1. p5.js 시작과 기본 구조 p5.js는 프로그래밍과 시각 예술을 쉽게 배울 수 있도록 도와주는 JavaScript 라이브러리입니다.주로 인터랙티브 아트와 그래픽 디자인, 애니메이션 등을 만들 때 사용됩니다. 1. p5.js 세팅하기p5.js를 사용하려면 먼저 HTML 파일에 p5.js를 포함해야 합니다. p5.js 공식 사이트에서 CDN 링크를 복사하여 HTML 파일에 추가하거나, p5.js 웹 에디터를 사용하면 쉽게 시작할 수 있습니다.  2. 기본 구조sketch.js 파일에서 코드를 작성하게 됩니다.p5.js는 두 가지 주요 함수로 시작합니다:setup(): 초기 설정을 담당합니다. (화면 크기, 변수 초기화 등)draw(): 반복적으로 실행되며 화면에 그림을 그리는 역할을 합니다.// 웹페이지가 처음 시작될.. p5.js Study 📚 2024. 12. 16.
크리에이티브 코딩 밋업 인사이트 - 7. Nature of Code 🩷 Nature of Code는 다니엘 쉬프만(Daniel Shiffman) 저서의 책으로, 물리학, 생물학, 수학의 원리를 코드로 구현하는 과정을 안내하며, 창의적인 코딩과 인터랙티브 아트를 위한 훌륭한 자료로 평가받고 있습니다.책은 입자 시스템, 힘과 운동, 진화 알고리즘, 신경망 등 다양한 주제를 예제와 함께 설명하여 복잡한 자연현상을 직관적으로 이해하고 시각화할 수 있게 합니다. 특히, 코딩으로 복잡한 시스템을 단순화하고 창의적으로 표현하고자 하는 사람들에게 인기를 끌고 있으며, 학생과 예술가뿐 아니라 개발자들도 즐겨 찾는 참고서입니다. Nature of CodeSimulating Natural Systems with JavaScriptnatureofcode.comNature of Code는 위 설명.. PM노트 ✏️ 2024. 11. 11.
크리에이티브 코딩 밋업 인사이트 - 6. 물리 버튼 👇 8월에 진행된 밋업을 이제야 정리한다. 이 날 주제는 '물리 버튼'으로 물리적으로 무언가를 눌러서 작동시키는 것의 여러 사례와 아두이노를 활용해 물리 버튼의 신호를 웹으로 가져가 활용하는 과정을 함께 보았다. 오프라인에서 아날로그적인 활동을 웹에 적용시키는 방법에 대한 인사이트를 얻을 수 있었다. 1. 초기 키보드 악기와 그 발전오르간(Organ), 하프시코드(Harpsichord), 피아노(Piano)와 같은 악기를 예로, 눌러서 작동 시키는 사례에 대한 설명이 시작됐다. 건반을 눌러 소리가 나는 방식으로, 뭘 눌러서 여러 소리를 내게끔 하는 악기를 어떻게 만들게 됐는지 궁금해졌다. 검색해보니 하프시코드가 15세기 경에 개발된 건반 악기로 키를 누르면 현을 튕기는 구조로 만들어져있고, 클라비코드라는 악.. PM노트 ✏️ 2024. 11. 11.
워드프레스 포트폴리오 사이트 - 디자인과 개발까지 🥸 포트폴리오 디자인을 완료했다 😉 이미 레쥬메 사이트와 PDF제출용 포트폴리오가 있었기 때문에 그 안에서 콘셉트와 포인트를 정리하고, 사이트의 구성과 웹용 스타일을 만드는데 집중했다.디자인 컨셉WindowsRounded cornerFletMonotone포트폴리오 사이트의 디자인 콘셉트는 Windows로 정했다. 토이프로젝트 소개인 '웹은 사용자 간의 거리가 아주 멀더라도 같은 경험을 해볼 수 있는 좋은 창구입니다.' 이 내용처럼 나에겐 웹이란 무언가를 공유하는 '창구'다. 사전적으로도 건물에 물리적으로 뚫어놓은 창이나 공간이면서 기관 또는 사람끼리 협조하거나 접촉하기 위한 곳을 이르는 말이면서, 컴퓨터에서 어떤 활동을 하기 위한 화면을 '창'이라고도 한다. 나는 '창'이 가진 이 여러 의미들이 내가 하고.. PM노트 ✏️ 2024. 9. 29.
크리에이티브 코딩 밋업 인사이트 - 5. 대화상자와 인터페이스 💬 어느덧 다섯 번째 밋업.다양한 대화 인터페이스 사례와 함께 AI를 활용한 너굴맨 대화창 시현을 봤다. 우리에게 익숙한 대화창은 카카오톡처럼 채팅 대화창일 텐데, 다양한 인터페이스를 보고 아이디어를 많이 얻었다. 나는 덕후가 세상을 발전시킨다는 작은 신념을 가지고 있는데, 엄청난 게임의 대화 인터페이스 사례를 보니 정효님은 게임 덕후가 맞다는 확신과 함께 이래야 크리에이티브 코딩이 재밌겠다는 생각을 했다. 사례들을 몇 가지 공유하면서 내가 얻은 인사이트도 기록해보려 한다. 1. 대화상자대화상자는 영상으로 따지면 자막과 비슷한 역할을 하는데, 게임이나 웹에서는 어떠한 박스에 대화와 설명 등을 포함하여 보여준다. 대화상자에서 보여주고자 하는 내용이 어떤지에 따라 형태가 달라지는데, 다양한 형태의 대화상자를 하.. PM노트 ✏️ 2024. 9. 13.
혼자 워드프레스 홈페이지 만들기 도전 💪 포트폴리오 정리가 다 되어간다.PDF로 제출할 수 있을 정도는 되었지만 아무래도 웹 PM인데 포트폴리오 사이트가 있으면 좋겠다 싶었다.토이프로젝트를 아카이빙할 공간도 필요하다.생 코딩으로 만들기는 어려우니 그나마 많이 접해본 워드프레스에 도전해보기로 한다.이전에 신청해놓은 피그마 + 워드프레스 사이트 만들기 온라인 강의 기한이 한 달 남아있다. 후딱 해보자!뽜샷~포트폴리오 디자인에 맞춰서 홈페이지 디자인 정리개발 환경 세팅 + 퍼블리싱워드프레스 연결, 도메인 세팅 및 오픈 PM노트 ✏️ 2024. 7. 3.
크리에이티브 코딩 밋업 인사이트 - 4. Transition 🎞️ Transition이라는 주제의 밋업이 열린 걸 보고 같이 작업했던 퍼블리셔 한 분이 떠올랐다. 초보 PM 때는 디자인만 화면에 구현되면 된다고 생각했었다. 그만큼 디자이너에게도 액션이나 트랜지션에 대한 요청을 하지 못했었는데, 이 분은 디자인 포인트를 보고 센스 있게 트랜지션을 적용해 주었다. 이 퍼블리셔 분과의 첫 프로젝트의 디자인 모티프는 우주였고, 브랜드 로고의 O를 배경에 크게 깔았었다. 그 O가 둥실둥실 움직이는 결과물을 받았을 때, 이 부분 말고도 차마 가이드 주지 못했던 여러 곳에서 센스를 발견했을 때 나는 이분과 계속 작업하고 싶다는 생각을 했고 퍼블리싱이 별도로 들어가는 프로젝트가 생기면 그분께 연락을 한다.트랜지션이 웹 작업 결과물의 완성도와 감도를 높여주는 걸 몸소 느껴본 후로 디자.. PM노트 ✏️ 2024. 7. 3.
크리에이티브 코딩 밋업 인사이트 - 3. 타이포그래피 🅰️ 디자인과 관련된 일을 한다면 피할 수 없는 타이포그래피. 원래의 뜻은 '활자 서체의 배열' 이지만, 점차 타이포그래피를 잘 안다 또는 잘 한다라고 표현하듯이 디자인 영역의 한 파트로 자리매김 하고 있다. 나도 타이포그래피에 대해서는 많이 들어왔지만 그 개념에 대해서 구체적으로 살펴본 적은 없었던 것 같다. 디자인을 다시 해보려는 시점에 타이포그래피 개념을 다시 공부하라는 조언을 들었고, '타이포그래피 천일야화' 라는 책을 읽고 있다. 한글 타이포그래피의 교과서 같은 책이랄까.그러던 중 코딩 밋업 주제로 타이포그래피가 올라왔고, 티켓팅을 하듯 빠르게 신청했다. 참여하러 가보니 확실히 디자이너 분들의 비중이 높았고, 자리도 빠르게 찼다고. 이번 코딩 밋업에서 얻은 타이포그래피 사례들과 인사이트를 정리해본다... PM노트 ✏️ 2024. 7. 3.
크리에이티브 코딩 밋업 인사이트 - 2. 식물 🪴 이번 크리에이티브 코딩 밋업의 주제는 이었다. 이미 정효님은 '자라나는 것들'이라는 코딩 워크숍을 여러차례 진행했었는데 이번 밋업 덕분에 그에 관련된 인사이트를 들을 수 있었다.  1. 식물이 자라는 모습을 재미있게 표현한 사례1) 이웃집 토토로밋업 서두에 나온 이 영상이 너무 귀엽고 반가웠다. 토토로를 보면서 '식물이 자라는 모습을 저렇게 표현했구나' 생각하는 사람이 얼마나 있을까? 식물에 대한 인터렉션에 관심이 있어야만 발견할 수 있는 인사이트일 것이다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 2) 인터렉션 사례토토로 영상과 함께 실제 식물 인터렉션 사례들을 함께 소개해주었다. 예전엔 이런 사례들을 보면 마냥 신기하기만 했는데, 이젠 어떤 의도를 가지고 이런 아이.. PM노트 ✏️ 2024. 6. 5.