https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace
p5.js overview
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...
github.com
Hello world
https://editor.p5js.org/SOYOUNCat/sketches/cSIsVtjD0
// x를 0으로 초기화
let x = 0;
//프로젝트 실행시 한번만!
function setup() {
//배경색상 100(밝은 회색)
background(100);
//선 그리기=두 점의 좌표값(x1, y1, x2, y2)
line(15,25,70,90);
}
//프로젝트 실행 시 루핑!
function draw() {
//원그리기(x = 0, y = 캔버스 높이/2, 너비=20, 높이=20)
ellipse(x, height/2,20,20);
//x 값을 1씩 더한다 = 왼쪽에서 오른쪽으로 움직인다!
x = x + 1;
}
createCanvas
function setup() {
//600*400 크기의 캔버스 만들기
createCanvas(600, 400);
line(15, 25, 70, 90);
}- Canvas deflaut 값은 100*100
- 웹에서 HMTL 페이지 본문에 다른 콘텐츠가 있는 경우 페이지 이후에 추가되어 창 상단에 안보일 수 있음
- 페이지의 기존CSS의 영향을 받아 패딩(Padding) 때문에 왼쪽 상단 모서리가 완전히 안 닿을 수 도 있음
- 해결책! 기본 패딩을 재정의하는 행을 오버라이드하기!
<style> body{padding:0; margin:0;} </style>
Mouse and touch interaction
| mouse | touch |
| touches[] | |
| mouseIsPressed | |
| mousePressed() | touchStarted() |
| mouseMoved() | |
| mouseDragged() | touchMoved() |
| mouseReleased() | touchEnded() |
| mouseClicked() | |
| mouseScrolled() | |
| https://p5js.org/ko/reference/ | |
- touchStarted()함수를 정의하지 않으면 스크린은 모바일에 따라 기본 터치 동작으로 반응함!
- touchStarted()함수를 공백으로 두면, 손가락을 끌면 전체화면 보기가 이동하는 동작을 멈출 수 있음
-또는 함수의 return flase 로 둔다
function touchMoved() {
// do some stuff
return false;
}오늘 배운 것!
function setup(){//한번만 실행, 주로 초기화에 사용}
function draw(){//반복해서 실행 = 루핑, 주로 애니메이션에서 사용!}
line(x1,y,1,z1,x2,y2,z2)// 두 점의 좌표값 순서대로 작성
ellipse(x,y,w,h); //x축,y축,너비,높이
