[시각화 p5.js] 애니메이션 rectMode()
rectMode()rect() 함수가 사각형을 그릴 때 기준점을 설정하는 모드로 다음과 같이 활용rectMode(CORNER); rect(30, 20, 100, 50); // (30, 20)에 시작하여 너비 100, 높이 50의 사각형rectMode(CORNERS);rect(30, 20, 130, 70); // (30, 20)과 (130, 70)을 연결한 사각형rectMode(CENTER);rect(100, 100, 50, 80); // (100, 100)을 중심으로 너비 50, 높이 80의 사각형rectMode(CENTER);translate(100, 100);rotate(PI / 4); // 45도 회전rect(0, 0, 50, 50); // 회전된 사각형background(0) // 블랙 배경..
2025. 4. 1.
[프로세싱] 랜덤한 위치에 그려지는 원을 선으로 연결
[프로세싱] 랜덤한 위치에 그려지는 원을 선으로 연결하기 함수line() // line(선의 첫번째 점 x좌표, y좌료, 선의 두번째 점 x좌표, y좌표)stroke() // 선 색깔fill()strokeWeight() // 선의 굵기 (별도로 지정하지 않을 경우 기본값 1) int x1,y1,x2,y2;int count=0;void setup(){ size(720, 480); background(10,10,100); frameRate(10); x2=0; y2=0;}void draw() { noStroke(); fill(10,10,50,5); rect(0,0,width,height); x1=int(random(width)); y1=int(random(height)); fill(ra..
2025. 3. 11.
[시각화 p5.js] 숫자, 문자, 문자열을 캔버스에 표시
[시각화 p5.js] 원과 사각형 그리기 textSize(텍스트 크기)text(표시할 문자값, 문자의 x좌표, 문자의 y좌표)// 숫자, 문자, 문자열을 캔버스에 표시function setup() { createCanvas(400, 400); background(180); textSize(30); text(5, 10, 100); text('A', 100, 200); textSize(20); text('Good Moring', 100, 250);} # 실행결과 [sketch.js] textSize(텍스트 크기)text(표시할 문자값, 문자의 x좌표, 문자의 y좌표) #문자열의 기준 좌표표시할 문자열의 기준 좌표는, 첫번째 문자의 왼쪽 아래 꼭지점을 기준으로 한다.
2025. 3. 11.
[시각화 p5.js] 원과 사각형 그리기
[시각화 p5.js] 원과 사각형 그리기// 원과 사각형 그리기function setup() { createCanvas(300, 300); background(100); ellipse(150, 150, 100, 90); //ellipse(x좌표, y좌표, width, height) rect(150, 150, 80, 120); //rect(x좌표, y좌표, width, height)} p5.js web editor
2025. 3. 11.
