VicPy | 프로세싱 - 그림 그리기
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
VicPy님의 아두이노강의 청각장애인을 위한 자막
de 5
안녕하세요 이번 시간에는 지난 시간에 0 본격적으로 프로세싱 에 대해서배워보도록 하겠습니다
지난 시간에 프로세싱 일반인과 예술가들이 컴퓨터를 이용해 재미난 예술
작품 만들 수 있도록 쉽게 짜져 있는 프로그램이라고 설명 드렸는데요
이번 시간에는 그 프로그램을 제가 옆에서 하나하나 보여드리면서 여러분들이
따라하면서 한번 해보도록 하겠습니다
우선 첫번째로 프로세싱 에 윈도우와 관련된 배경을 설정 하는 것을
해보고요
두번째는 프로세싱 을 이용해서 화면에 재미난 도용을 그리는 것을 한번
해보도록 하겠습니다
세번째는 프로세싱 의 도형 뿐만닌 아 글자나 그림을 표시하는 것을
한번 해보도록 하겠습니다
우선 배경 설정한 것을 해보도록 하는데용
이아 관련해서 저번시간에 배웠던 프로세싱을 우선 한번 실행해 보도록
하겠습니다
프로세싱 이렇게 실행 되어 있죠
지금 첫번째로 보실 거는 사이즈 라는 명령어 인데요
사이즈 라는 명령어는 바로 프로세스에서 실행하는 윈도우의 크기를 변경하는
명령어 입니다
우선 여기서 입력하실 때 저번시간에 배웠던
3 업과 들어오는 먼저 입력해 입력해 주시기 바랍니다
그런 다음에
싸 이 즈 403회 고로 했는데 지금 같은 경우에는
윈도우의 크기를 넓이 400 높이 400 으로 설정했습니다
만약에 저희가 넓이
600 300 으로 설정하고 싶다고 하면 은 다음과 같이 설정해 주시면
됩니다
즉 첫 번째가 넓이 이고 두번째가 높이 값을 지칭하는 값입니다
두번째는 윈도우의 배경색을 변경한 겁니다
백그라운드 라는 명령어를 사용하는데 이때 끄 라운드 라는 명령을 사용하는
것은
일 작 박스 1 받는 것과 인자 팥을 3개 받는 것이 있습니다
인자 바스 1 받는 것은 단순히 검정이나 하얀색 이 흑백을 설정한 것이고
인자 값을 3개 받는 것은 빨강 초록 파랑 을 받아서 자신이 원하는
색깔을 설정 하는 겁니다
한번 해보도록 하겠습니다
창 크기는 다시 400으로 맞추고 요
우선 촛대 그 로마 한번 설정을 해보도록 하겠습니다
백그라운드 일자를 1 를 설정 하는 것은 흑백 이라고 설명 드렸는데
영이 검정색이고
만약에 제가 가장 하얀 색을 원한다.면 의 255 로 설정하면 됩니다
만약에 그 중간에는 회색의 어떤 색깔을 원하신다면 은 그 사이에 있는
값을 설정해 주면 은
이아 같이 회색으로 배경 설 배경색이 설정이 되구요
그 다음에 인자 박스 3개를 줘 가지고 자기가 원하는 색을 설정 한다. 고
하셨을 때 우선은 제가 이제 빨간색을 설정해 보도록 할게요
인자 값을 3개를 봤는데 빨강 초록 파랑 인데 빨강을 255 최고 각 그
다음에 0 0
이렇게 설정을 해주시면 은
이렇게 배경색이 빨간색의 되는 것을 볼 수가 있죠
다음으로는 이제 배경 설정을 하는 것을 넘어가서 2 배경 위에다가 도형을
그리는 것을 한번 해보도록 하겠습니다
우선 도형의 가장 기본적인
점을 그리는 것을 한번 해보도록 하겠습니다 점은 p 라는 명령어를
이용해서 글입니다
2p 라는 명령어를 이용해서 그릴 때 인자 가스 2개를 봤는데
여러분들이 수학 시간에 배웠던 것과 같이 x 좌표 y 좌표 를 받아서
글입니다
화면에 보시면 이렇게 x 좌표와 y 좌표로 볼 수가 있는데 이렇게 원하는
x 다프 와인 좌표를 입력을 해주시면 은 그 해담 되는 곳에 점이 찍히게
됩니다
민 프로세싱 같은 경우에는 이 좌표 의 기준점이 바로 이제 좌측 상단에
이 부분이 영 콤마 0이 됩니다
따라서 이쪽 점을 기준으로 오른쪽으로 갈수록 x 값이 커지고 아래로 내려
갈수록 마이카 시 커집니다 한번 직접 그려 보도록 하겠습니다
여러분들이 쉽게 부분 할 수 있도록 배경색을 하얀 색으로 맞추고 요
그 다음에 포인트 가운데 다 부르도록 하겠습니다
이아 같이 가운데 점에 그런데 문제는 점이 너무 잡으셔서 작아서
여러분들이 보기 힘드실 거에요
점이 이렇게 작은 경우에 제 점의 크기를 늘려 죽일 원하실 텐데 바로
스트라이크 스트로크 웨이트 명령어가 점의 크기를 늘려주는 명령어입니다
스트로크 웨이트는 단순히 점에 크기만 눌러주는 게 아니라 프로세싱 에서
선을 그릴 수도 있는데 선에 두께도 편 같이 변경 하는 명령어입니다 한번
써보도록 하겠습니다
스트로크 웨이크 한 다음에 들어가는 1 약값이 하나인데 이 인자 값은
바로 픽셀 갈 수 있는 당
그래서 제가 30 픽셀이 라고 딱 설정을 해놓으면 은 점에 주께 가 30
픽셀이 되는 겁니다
실행해 주시면 은 이렇게 점에 두께가 굵어진 것을 볼 수가 있죠
다음으로는 윈도우의 배경색을 변경 했던 것과 같이 점에 배경색을 변경할
수 있습니다
바로 스트로크 라는 명령어를 사용하는데요 아까 사용했던 백그라운드 명령어
랑 비슷하게 흑백 을 사용하는 경우
그리고 빨강 초록 파랑 3개의 인자를 받는 경우 이 두가지가 있습니다
좀 더 다른 점이 있다면 은 이와 같이 뒷부분에 투명도 라는 것이 있는
것을 볼 수 있을 거예요
이 투명도는 이 색깔의 이제 투명한 여부를 선택하는 건데
0에 가까울수록 투명해 지는 거고
255 에 가까워질수록 불투명 해 지는 것입니다
한번 설정해 보도록 하겠습니다
그러다 흑백 말고
처음에 색깔의
초록색으로 한번 바꿔보겠습니다
이 상태에서 중 정도만 살짝 변경하면 은
투명도를 255 최대 255 기술을 했었을 때 1 15 로 한번 설정해
보도록 하겠습니다
하면 히미하게 보이시는 게 지금 너무 투명해서 그런데 지금 다시 설정해
보도록 하겠습니다
함 앱으로 설정을 해 볼게요
이렇게 색깔이 투명 해 줘 가지고 뒤에 있는 배경색과 혼합 짜서 보이는
것을 볼 수가 있죠
다음은 오는 선을 그리는 것을 한번 해보도록 하겠습니다
서는 라인 이라는 명령어를 이용해서 글입니다
2라인 이란 명령어는 두 점의 좌표를 받아서 인식하기 때문에 총 인자
까지 총 4개입니다
앞부분에서 는 첫번째 점 의 x 좌표 y 좌표
두번째 점은 두 번째 점의 x 좌표 y 좌표 같습니다
일단 기존 은행
포인트를 주시고 한번 라인으로 선을 그려 보도록 하겠습니다
이렇게 그리면 은 보시는 것과 같까 스트로크 웨이트 적용했던 계선
에서도 적용이 되고
마찬가지로 스트로크 라는 명령어도 선에 적용이 되기 때문에 2선 색깔이
투명한 초록색이 되어 있는 것을 볼 수가 있죠
다음으로 원을 그리는 것을 한번 보도록 하겠습니다
원은 1 입수 라는 명령어를 사용하는데요
일리스는 명령을 는 4개인 작 갓을 봤습니다
우선 원의 중심점 에 해당하는 x y 좌표를 받고
두번째는 원의 넓이와 원의 높이의 해남 내는 값을 받습니다
직접 그려 보도록 하겠습니다
원을 윈도우 중앙에 그리운 그려 보도록 하고
크기를 황 팩에서 넓이를 팩 높이를 1 50 으로 한번 설정하면 은
다음과 같이 원이 그려지는 것을 볼 수가 있죠 스로 쿠웨이트가 너무 굳기
때문에 한번
2 로 설정하고
그 다음으로는 원의 내부에 있는 면의 색깔을 바꾸는 것을 해 보도록
하겠습니다
원은 레버 있는 면의 색깔을 바꾸는 것은 일 이라는 명령어를 사용하는데요
앞서 스트로크 라는 명령어에서 보았다 싶이 거의 유사하게 사용하시면
됩니다
흑백을 설정하고 투명도를 설정하거나
빨강 초록 파랑 설정하고 투명도를 설정하시면 됩니다
한번 해볼까요
여기서는 원의 면 색깔을 한번 투명한 파랑 을 설정해 보도록 하겠습니다
이렇게 다음과 같이 투명한 파란 색으로 변경된 것을 볼 수가 있죠
만약에 도형을 그릴때 면의 색깔을 칠하지 않고 단순히 테두리에 있는 선만
그리고 싶으실 때가 있으실 거예요
이 같은 경우에는 높이리 라는 명령을 사용합니다
뭔 실행해서 비교를 해보시면 은
필이 나는 명명하고 높이는 하고 운영을 해 주시면 은
실제로는 이렇게 안에 하얀색 있지만은
원래는 이제 가운데 면이 뻥 뚫려서 뒤에가 투 너 뒤에 있는 색깔이
보신다고 하실 생각하시면 됩니다
좀더 9분하기 쉽게 하기 위해서 배경 색깔을 하얀색닌 다른 색깔을
한번 변개 해보도록 할게요
이렇게 실행을 하면 은 원 중앙에
면에 부분이 뒤에 배경 색깔이 비쳤을 재생 찍는 것을 볼 수가 있죠
다음으로는 테두리만 그리는 것니라 오히려 그 반대로
면만 그리고 테두리를 앙 그리고 싶으실 때가 있으실 거예요
이 같은 경우에는 노 스트로크 라는 명령을 사용합니다
높일 대신에
노 스트로크 라고 입력을 해 주시고 그림을 그려주시면 은 테두리가 안
그려지고 하얀색 원이 그려진 승인 것을 볼 수가 있을 거예요
여기서 주의하실 점은 노스트라 코 같은 경우에는 점이나 선 에도 영향을
주기 때문에 이 명령어를 사용한 다음에는 점이나 선 이 그려지지 않는가
하는 것을 주의해 주시기 바랍니다
다음으로는 네모를 사각형을 그리는 것을 한번 해보도록 하겠습니다
사각형 도 앞서 선을 그리는 걷다가 유사하게 그릴 수가 있는데요 첫번째
점에 해당되는 x 좌표 y 좌표 를 받고 두번째 점에 해당되는 x 좌표
y 좌표 를 봤습니다
뭔 그려보도록 하겠습니다
네이트
이와 같이 사각형의 그려진 것을 볼 수가 있죠
앞에서 도형을 그리는 것을 설명을 들었는데 프로세싱 에서는 도형 외에도
글자나 그림을 자유롭게 표시할 수가 있습니다
우선 화면에 원하는 글자를 찍는것 사람과 해보도록 하겠습니다
화면에 글자를 표시하는 명령어는 텍스트 라는 명령어를 사용하는데 이때는
인자값 쓸 3개 봤습니다
먼저 첫번째로 여러분들이 화면에 표시하고 싶어하시는 글자의 해당되는 값을
입력해 주시고
두 번째는 그 글자 c 화면에 위치하게 될 x 좌표 y 좌표 를
입력하시면 분 입력하시면 됩니다
텍스트는 3개의 인자 값을 왔는데 우선 첫번째로
글자 여러분들이 화면에 표시하고 싶어하시는 글자 값을 입력하시면 되고 두
번째는 이 글자 파시 위치한 하게 될 x 좌표 세번째는 y 좌표를
입력하시면 됩니다
여기서
배경 색깔을 다시 하얀색 거로 변경하겠습니다 텍스트
여기서 그냥 텔러 라고 응원 하겠습니다
지금 같은경우에는 화면에 아무것도 표시가 되지 않는데
바로 이제 글자 색 하얀색이 때문입니다 이때는
면의 색깔을 바꾸는 것과 같이 피를 이용해 가지고
글자 색을 변경할 수 있습니다 글자 색을 검정색으로 바꿔서 다시
실행하시면 은 지금 윈도우 중앙에 헬로 라고 찍혀 있는 것을 볼 수가
있죠
지금과 같이 헬로 가 너무 글씨가 작아 지고 잘 안 보이실 텐데
마찬가지로 이 글자 크기를 를 맥이 위해서 텍스트 사이즈 라는 명령어를
사용합니다
텍스트 사이즈 라는 명령어는 예 앞에서 스스로 쿠웨이트 명령어와 비슷하게
상황을 사용하시면 됩니다
텍스트 텍스트 사이즈랑 입력하시고
원하시는 글자크게 낚는 픽셀 값을 입력을 하시면 은
이렇게 글자 크기가 변경된 것을 볼 수가 있습니다
다음으로는 여러분들이 단순히 지금 프로세싱 제가 이제 어떤 폰트를
설정하지 않고 단순히 텍스트를 입력 을 했는데
여러분들이 다른 글씨체로 변경을 해 가지고 표시를 해 하고 싶어 하실
거예요 그때 사용하는게 바로 텍스트 폰트와
크레이트 폰트 라는 명령어 입니다
텍스트 폰트는 한가지 인자 값을 봤는데
바로 이제 p 폰트 형이라는 변수값을 받아요
근데 이때는 이제 p p 라는 변수 값을 사용할 때는 크리에이트 폰트
라는 명령어를 사용해야 되는데 이때는 크레이트 폰트 라는 명령어를 사용할
때 기존의 저 2컵 퓨 터 에 여러분들이 사용하고 있는 컴퓨터에 설치된
폰트 이름을 여러분들이 알고 계셔야 되요
그때 우리가 알고 싶어하는 그 꼴이 어떤 이름으로 되어 있는지 알기
위해서 한번 살펴보도록 하겠습니다
글고 b 저장되어 있는 곳에 이동 하시고
여기서는 나들 나눔고딕 을 한번 사용해보도록 하겠습니다
나눈 고지 2기 보이는데 폭사 하시고
윈도우의 특정 부분의 다와 복사를 해 주시면 은 부천 없게 해 주시면 은
이렇게 그 폰트 파일명의 영어로 이렇게 적혀 있는 것을 쓸 것을 볼 수가
있을 거예요
거기서 나는 고딕 이라고 적혀 있는데 이것을 다시 복사를 하셔 가지고
프로세싱 에 적용해서 나눔고딕 으로 한번 글씨를 써 보도록 하겠습니다
우선 p 폰트 라는 변수를 쓰기 위해서는 p p 라는 변수를 선언해
주어야 합니다
p 폰트 하고 평 터라 워 써 넌 해주신 다음에
그래 트 폰트
그 다음에 앞서 우리가 않았던 나는 고증에 이름을 적어주시고
그 다음에 큰 이라고 지정되어 있는 것이 있는데
이 글꼴에 기본 크기라고 설 기본 크기 라고 하시면 됩니다
그래서 우리가 설정한 은 입 그 꼴에 기본 크기가 1 32 픽셀이 라고
가정 한 다음에 다시
앞서 봤던 텍스트 폰트 처럼
언제 화면에 글꼴을 적용해 줍니다
그런 다음에 지금 같은 경우에는 첫 번째는 글꼴이 적용 안된 것을
화면 중앙에서
밑부분에 뿌려주시고
2 꼬리 적용된 것을 화면 중앙에 아래부분에 1봉
돼서 서로 비교해 보도록 하겠습니다 그래서
위에 있는 것이 적용이 안 된 거고 아래에 있는 것이 나눔고딕 으로
이제 글씨를 쓴 겁니다 이와 같이 글꼴을 변경 해 주시면 되구요
다음으로는 프로세싱 의 이미지를 표시하는 것을 설명 드리도록 하겠습니다
이미지를 표시하는 것은 바로 이제 피임 이지영 변수라는 것을 이용하고 그
다음에 여러분들이 그 그림이 위치하기 원하시는
x 좌표 y 좌표 를 입력하시면 됩니다
또한 앞에서 왔던 것처럼
이미지를 사용할 때도 단순 이미지 하나로만 표시를 할 수 있는게 아니라
로드 이미지라는 것을 이용해 가지고 그림을 그려 주 안다
허 하나씩 살펴 보면서 설명드리도록 하겠습니다
우선 이미지를 사용하기 위해서는 여러분들이 사용 현재 이렇게 열어둔
스케치가 한번 저장이 되어야 되는데
저장을 해 주시고
여러분들의 컴퓨터에서 프로세싱 에 이제 스케치 들이 저장된 폴더로 이동
하시면 은
방금 저장 맨 스케치를 확인하실 수가 있습니다
여기서 미리 준비된 이미지 파일을
이 스케치 폴더에 들어가셔서
데이터 라는 폴더를 또 만들어 주고요
그 안에다가 붙여 넣기 해주십니다
지금 같은 경우에는 이미지가
파일명이
애플 정
에 불 점 jpg 로 되어 있습니다
이것을 한번 화면에 그려 보도록 하겠습니다
앞섶이 폰트를 사용했던 것처럼 b 의 이미지 라고 선언해 주고
모드 이미지
그 다음에 2 점 제 비즈 파일명을 입력해 준 다음에
이미지 라는 명령을 통해서
일단은 아
15 표시되도록 설정해 준다면 실행해주시면 은 다음과 지 이미지가
화면에 표시됩니다
이 이미지나 명령어는 뒤에 인자 값을 2개를 추가를 할 수가 있는데요 이
두 2개를 추가하는 경우에는 이미지의 넓이가 까 높이가 쓰 설정할 수가
있습니다
지금 같은 경우에는 단순히 이미지의 따 원본 사이즈 대로 이제 그림을
그려졌는데
200에서 100으로
옆에서 옆으로 쪽 늘어지도록 한번 그려 보도록 하겠습니다 그러면은 화면
2 와 같이 표시되는 것을 볼 수가 있습니다
이번 시간에는 프로세싱 에 가장 22억 이라고 할 수 있는 배경을
설정하고
도형을 그리고 또한 이제 이미지를 표시하거나 글자를 표시하는 것을
해보았습니다
이아 관련되서 좀 더 자세하고 싶으신 분들은 프로세싱 에 레퍼런스 라는
페이지로 이동하셔서 한번 보시면 은 좀더 자세한 정보를 아실 수가
있습니다
또한 오늘 배운 것을 통해서 좀더 다양해서 도전해 보실 수가 있는데 오늘
배우신 것을 통해서 단순히 하나에도 역만 그리는게 아니라 여러 도형을
묶어 가지고 재미난 그림을 그리지 던가
지금 같은 경우에는 셋 업 에만 코드를 입력해서 한번만 그림이 그려지는데
이것의 들어오게 코드 를 입력하셔서 4번 그림 2 재밌게 바뀌도록 한번
해보실 수도 있구요
여러분들이 좋아하는 이미지를 인터넷에서 다운로드 하셔서 화면에 1번 표시
해 보시기 바랍니다
이번 시간은 여기서 마치도록 하겠습니다 감사합니다
댓글 0개
등록된 댓글이 없습니다.