본문 바로가기

시각화7

[프로세싱] 랜덤한 위치에 그려지는 원을 선으로 연결 [프로세싱] 랜덤한 위치에 그려지는 원을 선으로 연결하기 함수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] 배경색과 원의 색상 바꾸기   #사용한 함수strokeWeight(크기)noStroke()stroke(0)stroke(r,g,b)ellipse(x,y,너비,높이) 2025. 3. 11.
[시각화 p5.js] 원 내부 색상 표시 [시각화 p5.js] 원 내부 색상 표시   # 사용한 함수noFill()fill(0)fill(255,0,0)fill(0,255,0)fill(0,0,255) 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.
[시각화 p5.js] 도형 - circle(), WEBGL [시각화 p5.js] 도형 - circle 그리기 function setup() { createCanvas(100, 100); background(200); circle(50, 50, 25); describe('A white circle with black outline in the middle of a gray canvas.');function setup() { createCanvas(100, 100, WEBGL); background(200); circle(0, 0, 25);} WEBGLweb graphic labrary. 웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 Javascript API https://p5js.org/ko/reference/p5/circle/ circ.. 2025. 3. 11.