본문 바로가기

★ 프로그래밍/º P5.js12

p5.js 텍스트 그리기 text( ) 화면에 텍스트 그리기 [문법] 1) text(str, x, y, [x2], [y2] ) str : 표시할 문자 x : 텍스트의 x좌표값 y : 텍스트의 y좌표값 x2 : 텍스트 상자의 너비 y2 : 텍스트 상자의 높이 2) textAlign( ) 함수의 매개변수에 따라 좌표를 기준으로 좌,우,가운데에 텍스트를 그릴 수 있음 3) textFont( ) 함수로 별도 폰트를 지정하지 않을 경우 기본 폰트가 사용됨 4) textSize( ) 함수로 별도 글자 크기를 지정하기 않을 경우 기본 글자 크기가 사용됨 5) fill( ) 함수로 텍스트 색상 변경 가능 6) stroke( ), strokeWeight( ) 함수로 텍스트 윤곽선 변경 가능 예제 1> text( ) 예제 2> text( ), textSize(.. 2020. 11. 21.
p5.js 이미지 불러오기 image( ) 캔버스에 이미지를 불러오는 함수 원본 이미지 크기 설정을 통해 이미지의 일부만을 화면상에 표현할 수 있음 [함수] 1) image(img, x, y, [width], [height] ) img : p5.Image, p5.Element : 화면에 나타낼 이미지 x : 왼쪽 위 모서리의 x 좌표값 y : 왼쪽 위 모서리의 y 좌표값 width : 이미지 너비값 (선택사항) height : 이미지 높이값 (선택사항) 2) image(img, dx, dy, dWidth, dHeight, sx, sy, [sWidth], [sHeight] ) dx : 원본 이미지를 배치할 사각형(?)의 x좌표값 dy : 원본 이미지를 배치할 사각형의 y좌표값 dWithe : 원본 이미지 배치할 사각형의 너비값 dHeight : 원.. 2020. 11. 20.
p5.js 에디터 사용방법 1. p5 접속(크롬권장) https://www.p5js.org home | p5.js Hello! p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to lear p5js.org p5는 다른 자바프로그램과는 다르게 인터넷 창에서 직접 웹에디터를 사용합니다. 별도의 다운로드 작업 없이 바로 사용 가능하기 때문에 학생들 교육에 활.. 2020. 11. 17.
반응형