지식 확장/p5.js (18) 썸네일형 리스트형 p5.js 온라인 웹 에디터 사용법 p5js.org 사이트에서 제공하는 웹 데이터의 사용법을 정리해 보려고 한다. p5.js 온라인 웹 에디터의 장점 환경 세팅 없이 웹에서 입력 후 바로 확인할 수 있어 편리 다른 사람에게 내 코드나 작업물을 공유 가능 회원 가입 후 로그인 시 내 작업물 저장/다운로드 및 관리 가능 p5.js 온라인 웹 에디터 바로가기 p5.js Web Editor editor.p5js.org p5.js 온라인 웹 에디터 사용법 위의 p5.js 온라인 웹 에디터 링크로 이동하면 아래와 같은 초기 화면이 나온다. 파일을 저장하길 원한다면 회원가입 후 로그인하면 된다. 에디터 영역 : 코드를 입력 및 수정 미리보기 영역 : 에디터에 입력한 코드를 실행하는 영역 (코드 입력 후 좌측 상단의 Run 버튼 클릭) Auto-refr.. p5.js 애니메이션을 위한 변수 및 대입 연산자의 이해 정지된 도형에 움직임이나 크기 변화 등을 주려면 고정된 숫자가 아닌 변하는 숫자를 넣어주어야 하는데 이때 필요한 것이 변수이다. 변수란? 변수란 데이터를 저장할 수 있는 메모리 공간을 의미하며, 저장된 값은 변경될 수 있다. 어떤 이름을 가진 상자를 만들어서 그 상자 속에 여러 가지 물건을 넣는 것과 비슷하다고 생각하면 된다. 아래 그림처럼 변수에 어떤 값을 할당하는지(넣는지)에 따라 그 값은 계속 바뀌게 된다. 변수를 선언(생성)할 때는 var, let, const 를 이용할 수 있는데 여기서는 let을 이용해 예시를 들어보겠다. 변수를 선언하는 방법에는 선언만 하는 방법/선언과 동시에 초기화하는 방법 두 가지가 있다. 변수를 이용한 간단 모션 만들기 let speed = 1; let yPos = 0;.. p5.js 애니메이션을 위한 프레임 개념 및 frameRate(), frameCount 애니메이션의 원리 여러 장의 연속적인 이미지를 일정한 속도로 보여주게 되면 우리 두뇌는 망막에 남은 잔상으로 인해 이미지가 움직이는 것처럼 착각하게 된다고 한다. 출처 : https://ko.wikipedia.org/wiki/애니메이션 빨간 공이 움직이는 애니메이션은 연속된 정지 사진 6장의 모음으로 볼 수 있는데, 각각의 정지된 이미지 하나를 '프레임'이라 부른다. 이런 이미지가 1초에 몇 장 보이는지 프레임을 넘기는 속도를 가리켜 'Frame Rate', 우리말로 옮기면 프레임률이라 하며, 단위로는 'fps' 혹은 국제 표준인 'Hz'를 쓴다. sketch.js 파일의 기본 구조 p5.js 에디터에서 Sketch Files를 클릭해 보면 html, js, css로 파일로 나뉘어 있고, 그중에 sket.. p5.js 애니메이션을 위한 변형(transform) 함수 3 - 객체 회전 rotate() p5.js 애니메이션을 위한 변형(transform) 함수 3 - 객체 회전 rotate() p5.js 애니메이션을 위한 변형(transform) 함수에는 translate(), scale(), rotate()가 있다. 지난 포스팅의 scale 함수에 이어 이번에는 rotate 함수에 대해 알아보자. rotate() - 객체 회전 scale 함수의 기본 문법은 rotate(angle, [axis])이다. angle : 현재 angleMode의 매개변수인 RADIANS(원주호) 또는 DEGREES(도)의 설정 사항에 따른 회전각. 양수를 입력할 경우 시계 방향으로 객체를 회전 시킴 axis : p5.Vector|숫자 배열[]: (3D의 경우,) 회전축 (선택 사항) translate, scale 함수와 마.. p5.js 애니메이션을 위한 변형(transform) 함수 2 - 객체 크기 조정 scale() p5.js 애니메이션을 위한 변형(transform) 함수 2 - 객체 크기 조정 scale() p5.js 애니메이션을 위한 변형(transform) 함수에는 translate(), scale(), rotate()가 있다. 지난 포스팅의 translate 함수에 이어 이번에는 scale 함수에 대해 알아보자. scale() - 객체 크기 조정 scale 함수의 기본 문법은 scale(s, [y], [z])이다. S : 객체 크기를 조정하는 백분율. 여러 인수 지정 시에는 x축(가로축)에서의 객체 크기 배율을 조정하는 백분율 예) scale(1.0) 함수를 호출하면 100% 그대로이기 때문에 도형의 크기에 변화가 없음 예) scale(2.0) 함수를 호출하면 도형의 크기를 가로 세로 배율 200% 증가 시.. p5.js 애니메이션을 위한 변형(transform) 함수 1 - 객체 위치 이동 translate() p5.js 애니메이션을 위한 변형(transform) 함수 1 - 객체 위치 이동 translate() p5.js 애니메이션을 위한 변형(transform) 함수에는 translate(), scale(), rotate()가 있다. 이미 css를 다룰 줄 안다면 이들 함수가 어떤 역할을 하는지 대략 짐작이 갈 것이다. x, y, z 축으로 객체의 위치를 이동시킬 수 있는 translate, 객체의 크기를 확대 및 축소시킬 수 있는 scale, 객체를 회전시키는 rotate 이 세 가지 변형 함수들에 대해서 알아보자. translate() - 객체 위치 이동 translate 함수의 기본 문법은 translate(x, y, [z])이다. X축 : 좌우 이동 Y축 : 상하 이동 Z축 : 앞뒤 이동 (WebGL.. K-MOOC] 예술가와 디자이너를 위한 아트 코딩 4주 차 실습 과제 K-MOOC] 예술가와 디자이너를 위한 아트 코딩 4주 차 실습 과제 마우스의 움직임을 활용해 도형을 붓으로 그린듯한 인터랙션을 구현하는 과제이다. 4주 차 인터랙션의 활용 수업에서 배운 내용인 시스템 함수 mouseX, mouseY와 변수 및 map 함수를 사용했다. 배운 내용을 자주 사용해서 익숙해질 수 있도록 해야겠다😁 실습과제 1 editor.p5js.org/yonalaolla/sketches/kgxE3tCxZ p5.js Web Editor editor.p5js.org 실습과제 2 editor.p5js.org/yonalaolla/sketches/uEE7VqS-P p5.js Web Editor editor.p5js.org [집콕]예술가와 디자이너를 위한 아트 코딩 본 교과목은 코딩의 기초를 시각화를.. p5.js colorMode - RGB / HSB 알아보기 (feat. 색상 대비) p5.js colorMode - RGB / HSB 알아보기 (feat. 색상 대비) fill(), stroke(), background(), color() 함수에 색상을 채울 때 사용되는 기본 컬러 모드는 RGB 색상 모드로 설정되어 있다. 이 외에 colorMode(HSB)나 colorMode(HSL)로 설정하면 각각의 색상 모드로 변경할 수 있다. RGB 색상만 알아도 충분히 표현은 가능하지만, 명도/채도 등의 색상에 대한 기본 속성을 알아두면 좀 더 조화롭게 배색하는 데 도움이 될 것이다. RGB 색상 모드 컴퓨터가 색상을 보는 방식으로 빛의 3원 색인 빨강(RED), 초록(GREEN), 파랑(BLUE) 세 종류의 광원을 이용하여 색을 혼합하며, 색을 섞을수록 밝아지기 때문에 '가산 혼합'이라고 한.. 이전 1 2 3 다음
