[시각화 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.
[마이크로비트] 센서에 있는 GND, VCC, SDA, SCL 표시
마이크로비트, 아두이노에 사용하는 센서들에는 GND, VCC, SDA, SCL 과 같은 표시가 있다. 이게 뭘까?코파일럿에 물어봤다. GND, VCC, SDA, SCL은 전자 회로나 디지털 통신에서 자주 나오는 용어인데요, 각각의 의미는 다음과 같습니다:GND (Ground): 접지입니다. 전기의 기준점으로 사용되며, 전류가 흐를 수 있도록 회로를 완성하는 역할을 합니다.VCC (Voltage Common Collector): 일반적으로 전원 공급을 의미합니다. 보통 +전압에 연결되는 부분입니다.SDA (Serial Data): I²C 통신에서 데이터 라인을 나타냅니다. 데이터를 주고받는 역할을 합니다.SCL (Serial Clock): I²C 통신에서 클럭 신호를 제공하는 라인입니다. 데이터 전송의 속..
2025. 3. 28.
[프로세싱] 랜덤한 위치에 그려지는 원을 선으로 연결
[프로세싱] 랜덤한 위치에 그려지는 원을 선으로 연결하기 함수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.
