VicPy | 프로세싱 - LED와 버튼 제어하기
본문
※ 영상을 선명하게 보기 안내
- 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
- 팝업목록에서 "품질" 선택하세요.
- 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
VicPy님의 아두이노강의 청각장애인을 위한 자막
de 5
안녕하세요 이번 시간에는 지난 시간에 서우리가 저희가 배웠던 아디는 연결하는 것을 이용해 가지고
아두이노 의 앱이 디아 버튼을 연결한 뒤에 그것을 프로세싱 으로
재밌게 제어하는 것을 한번 해보도록 하겠습니다
그래서 첫 번째는 프로세스를 이용해서 led 를 껐다 키고 또 두번째는
led 에 반발 기를 조절하는 것 그리고 또 이제
아두이노 의 버튼을 눌렀을 때 그것을 해서 이제 메시지를 보내서 프로세싱
에서 뭔가 재미난 액션을 취하는 것을 한번 해보도록 하겠습니다
첫 번째로 이제 led 껐다 켜기를 해보는데요
단순히 그냥 led 를 껐다 키 많은 재미가 없을 수 있기 때문에
같이 화면에 다 가 없는 색 보험과 하얀색 부분을 그래서 여러분들의
마우스 커서가 검은색 부분의 있으며 는 led 가 켜지고 하얀 부분에
있으면 led 가 켜지는 것을 한번 해보도록 하겠습니다
연결은 간단하게 led 앙
560 옴 저항 을 사용하면 되고요
이아 같이 기존의 아두이노 수업 때 많이 해 보셨던 것처럼 그냥
그라운드에서 이렇게
엘이디 에 응급 부분에 가 연결 해 주시고
여기 9반 핀을 연결해서 저항 과 연결을 한 다음에 led 에 양국
부분에 다 연결이 되도록 하시면 됩니다
그리고 분명히 들의 인어 여러분들이 지금 사용하는 아들인 후에는
저번시간에 저희가 사용했던
아두이노 의 프로세싱 라이브러리 그 포 맡아 라이브러리가 여기 설치가
되어 있어야 되요
그 점 주의해 주시고
프로세스의 이 코드는 다음과 같이 입력합니다
먼저
인 폴트 가지고 라이벌을 입력하는데 저번시간에 도 마찬가지로 이와 같이
시리얼과 cc 아들이 너를 입력하는데 아드 인어 에서 잉 클로드 라는
매크로 상수를 입력하는 것 처럼 이것도 어떤 라이브러리를 사용하겠다고
프로세싱 에다가 알려주는 겁니다
그런 다음에 현재 아두이노 라이브를 의 해당되는 변수를 선언해 주시고
우리가 사용할 p 내 앱 ed 9번
led 를 9분해 연결 할 것이기 때문에 9번의 입력해주시면 됩니다
그런 다음에 3 억 부분에서는 현재 이제
창의 크기에 대한 설정 한번 해주시구요
맨 처음에 여기서는
배경 색깔을 검은색으로 색칠해 주었어요
그 다음에 이제 면 색깔을 하얀색을 1 하고 선을 그리지 않을 것이기
때문에 노 스트로크 라는 함수를 호출 해줬구요
그 다음에 네모를 그려 가지고 이제 하얀색 메모를 오른쪽에 다 그리게 해
놓았읍니다
위드 랑 헤이트 라는 이제 보라색 이라고 보라색 표시가 돼 있는 변수를
보실 수 있는데 이건 뒤에서 설명 드리도록 하겠습니다
여기서 닿아 있는 부분들은 이전 시간에 했던 것들과 똑같이 복사 하셔서
사용하시면 되고요
킨 모드 도 마찬가지로 아두이노 에서 사용 하셨던 것처럼 9 표시라고
설정하시면 됩니다
마우스 가 움직이는 거기 때문에 마우스 뭐 부디 라는 이벤트를 사용할
것이고
마찬가지로 여기서 위드 라는 함수가 사용될 건데
뒤에 설명을 드리고 다시 앞에서 한번 설명을 드리도록 하겠습니다
여기서 앞에 설명드렸던 위드 헤이트 라는 변수는 바로 현재 여러분들이
사용하고 있는 윈도우의 넓이와 높이 값을 알려주는 변수입니다
한번
테스트를 해보면 은
로이드 세덤
뭐 사이즈를 널 빈의 600 에서
높이는 300 으로 설정해 주시고
센터의 렌 뭐 2기
위드 프린트에 4
페인트 입력해 준 다음 실행해주시면 은
위드가 이제 녹 넓이 해당되는 6 - 출력되고
페이트가 여러분들의 좀 인도 창 높이 해당돼 302 출력되는 것을 볼
수가 있죠
앞으로 이동해서 보시면은 이 말은
렉 트 라는게 앞서 시간에 설명 드렸다시피 사각형을 그리는 거라고 설명
드렸잖아요
그래서 위드 에 나누게 이니까 는 중간 지정 x 의 중간 지점 중간지점에
중간 지점이 가 2배 콤마 영자 표에서
2배 콤마 높이 좌표 그러나 400 2배 콤마 0에서 209 막 4배까지
의 사각형을 그려라 라고 설명해 주신 하는거고
여기 같은 경우에는 마우스의 x 좌표가
만약 절반의 절반 보다 잡을 때
만약에 절반 보다 높을 때는 여기 l 스 로 이동 하겠죠 따라서 절반
보다 작을 때는
로라는 디지털 라이트를 하니까 는 led 핀이 꺼지게 있고
하 이라는 뒤 디지털 라이트를 하니까 넬 입힌 익혀 지겠죠
한번 코드를 입력해 보도록 하겠습니다
좋더군요 화면은
이와 같이 화면이 꺾는 색과 하얀 색으로 표시되어 있는 윈도우가 뜨는
것을 볼 수가 있죠
지금 보시면 현재 마우스 커서가 검정 3개의 위치하고 있어요
지금 보시면 이렇게 led 가 꺼져 있고 마우스 커서를 하얀색으로 옮기며
는 led 가 켜지고 다시 검색 으로 이동하면 1
led 가 꺼지는 것을 볼 수가 있습니다
왔다갔다 하며 는 led 와 껐다 켜 주죠
다음은 이번에는 이제 led 를 껐다 키는 게 아니라 여러분들이 이제
pwm 이라는 것을 통해서 예전에 led 에 발 길이 조절하는 것을 해
보셨죠 않아요
이렇게 화면에 다가
그라데이션 이라고 하죠 화면에 다가 검은색 포터 흰 색까지 이제 그
표시를 해 준 다음에 마우스 커서 위치에 따라서 led 의 밝기가
변하도록 한번 해보도록 하겠습니다
뭐 재료는 이전에 방금 했던 거랑 똑같이 해주시면 되구요
회로도 똑같이 구성 해주시면 되기 때문에 이제
넘어가도록 하고 먼저 바로 코드를 보도록 하겠습니다 여기 이제 그
라이브러리를 불러오는 부분이라
기본 변수를 선언한 부분도 똑같이 사용하시면 되고요
3 억 부분에서는 이제 아까 네 이제 검은색 선을 그렸지만 은 여기서 좀
다릅니다
참 크기는 이전과 똑같이 405 8 400 이고 여기서 오시면 좀더 다른
것을 볼 수가 있어요
포 문으로 되어있어 가시고 이제 400 곱하기 백인이 까는
400개의 선을 하나씩 그리는 거예요 그래가지고
맨 처음에는 역임 앱이라는 함수도 이제 아두이노 에서
배웠던 함수처럼 사용하시면 되요 여기서 보시면은
인트 i 는 0부터 시장에서 아이가 0 부터 시작해 가지고 아이가 위드
전까지 반복을 하게 됩니다
지금 각진 경우에는 윗 이라는 이 변수가 400을 지칭하기 때문에 이
아이라는 것은 0에서 399 까지 이제 반복하게 되어
여기서 다시 폼은 안에 들어가 보시면 은 스트로크 라는 함수가 또 있고
스트로크 함수 안에 또 맵 이라는 함수가 있어요
하나씩 뜯어서 보면은 스트로크 함수는 인자를 하나를 받으며 는
흑 흑백으로 색깔을 설정 하는 거라고 설명 드렸잖아요 선에 색깔을
바로 이 맵이 라는 인자 하나를 받게 되는데 이 맵이 라는 인자는
아두이노 에서 사용했던 것처럼 어떤 값이 소속돼 있는 특정 범위 의 특정
범위에 있는 어떤 값을 또 다른 범위에 있는 값으로 변환 해주는거 예로
들어 가지고
애가 아이 라는 것이 0 에서 400 사이에 있는 값인데 그것을
0에서 255 사이의 있는 것처럼 변경을 시켜 주는 거에요 만약에 아이
라는 것이 402 면은 변경해 놓은 255 되어 있죠 그래서 이렇게
해가지고 만약에 지금 x
지금 아이 같은 경우에는 이가 만약 0이면 은
여기서도 이제 영이 돼 가지고 스스로 코가 0이 되고 스트로크와 0이
된다는 것은 저번에 설명드렸던 것처럼 새 내색 선의 색깔이 검정색이
된다는 것을 뜻합니다
라인을 그리는 것을 한번 또 살펴보도록 할게요
여기서는 라인에서는 저번에 설명드렸던 것처럼 두 개의 좌표를 받는다고
설명 들었는데
하나는
여기서 보시면은 하나는 첫번째 x y 좌표
하나는 두 번째 xy 좌표로 설명 드렸죠
첩 x y 좌표 x 좌표는 와 아이로 둘다 동일하고
여기서는 이제 y 좌표는 0
또 두번째 y 좌표는 회의 헤이트 그래가지고
결국에는 어떤 식을 내년은 아이가 변경되면서 i 0 1 2 3 변경되면서
선도 마찬가지로 옆으로 2
왼쪽에서 오른쪽으로 계속 1 선들이 이렇게 표시 그림이 그려지는 거예요
대시 이제 처음에는 검정 이었다가
검정 이었다가 오른쪽으로 갈수록 계속 해 들면서 선들이 이제 그어져
가지고
자 한번 실행을 해보면 은
이아 같이 검정 에서 하얀색으로 색깔의 이제 그려지게 되는 겁니다
2번 여기 밑에 나와있는 코드들을 앞에서 사용했던 코드들이 가 통일을
하구요
세번째는 이제 마우스 드래그 들으라는 이벤트를 사용할 거예요
따라서 여러분들이 마우스를 들에게 할 때 이 led 의 밝기가 변경
되도록 하는 겁니다
여기서는 마우스 드래그 드 라는 이벤트를 사용했는데
바로 여러분들이 마우스를 들에게 할 때 led 의 밝기를 조절하는 것에
한번 해 보도록 할 거에요 그래서
여기서도 마찬가지로 앞에서 봤던 맵 이라는 함수가 사용되는데
여기서 맵이 라는 함수에 아까는 아이 라는 값을 0 에서 255 범위의
값을 변했다면 은 여기서는
마우스 x 좌표를 0에서 255 범위의 값으로 변환을 해 주고
지금 변환의 준 다음에 인 트 라는 것을 이제 감싸고 있는데
인트 라는 것은 그 물론 이제 여러분들이 변수 형으로 도 알고 있지만 는
플러싱에서 는 인트라 는 함수도 존재를 하고 있어요
인텔 함수는 뭐냐면은 바로 무슨
소수 나 또는 이제 숫자 형태인데 문자 형태로 되어 있다거나 1호 될
예로 들어 가지고 쌍 따옴표 가 있는데
쌍 따옴표 가 있는데 그 안에 뭐 숫자가 있다거나 이런 형태 값들을
이런 형태의 값들을 정수를 변환을 해주는 겁니다
여기서 왜 인 트 함수를 사용하는 거란 거냐면
앞에서 보시면 이제 아날로그 라이트 라는 함수를 지금 사용하고 있는데
아날로그 나이트 함수
여기 핀 버너 하고 그 다음에 인 트 형 변수를 입력을 해 줘야 되요
근데 맵 이라는 함수는 칠 수 0
실수형 의 데이터를 반환 하기 때문에 여기서 정수영 인 트 0 으로 한
번 변환을 해 주셔야 되요 소수점 없애 줘야 돼요
민트 형을 변환 해 주신 다음의 코드를 한번 실행해 보도록 하겠습니다
여기서 이제 코드를 실행 하시면 은 이와 같은 화면이 떠 있는 것을 볼
수가 있죠
현재 이제 윈도우가 이아 같이 표시되는 것을 볼 수 있죠
지금 마우스를 어두운 곳에서 드래그를 하시면 n
에릭의 가 꺼져 있다가 오른쪽으로 드래그 링을 하시면은
깜박거리게 하지만 은 점차 led 가 신발 가지는 것을 볼 수가 있죠
다시 어두운 곳으로 마우스를 들에게 언어는
전차 밝기가 어두워 지면서 led 이뻐지는 것을 볼 수가 있어요
다음에는 이제는 아두이노 쪽에 다가 led 로 제어를 하는 것니라
아들이 내 쪽에서 버튼으로 버튼을 눌러서 플러스 신뢰가 아가씨 너를
보내며 는 프로세싱 에서 그 신호를 받아서 화면에 재미난 그림을 그리는
것을 한번 해볼까 합니다
따라서 만약에 아두이노 서 버튼을 누르면 은 현재 마우스 커서가 있는
위치를 기술을 해가지고
랜덤한 랜덤한 색깔의 원외 원이 그려진 도록 한번 해보도록 하겠습니다
재료는 버튼과 10키로 움 정만 있으면 되고요
페로 도는 간단하게 오벌 트 전원을 버튼의 한쪽에 연결해 주시고 그
반대쪽에 다가
먼저 아두이노 의 8번 핀을 연결 시킨 다음에 그 밑에 나가 저항 을
연결하고 그라운드를 연결해 주시면 됩니다
프로세싱 코드 다음과 같습니다
먼저 라이 볼을 참 좋아하는 건 앞에 사용했던 것과 동 이라고
8번 버튼을 사용할 것이기 때문에 버튼 하고 파리 라는 것을 할
당했습니다
그리고 p 스테이트 라고 한 것은 버튼이 눌렸을 때 상태를 확인하기
위해서 선언을 한 것으로 아두이노 로 라는 것을 초기 값으로 설정을
했습니다
화면에 창 크기를 우리 보시면은
마찬가지로 자백 곱하기 400 을 설정하고 화면에 배경 색깔을 하얀색 인
255 로 설정을 한 다음에 여기 보시면은 랜덤 씨드 하고 세컨드 라고
적혀있는 것을 볼 수가 있어요
험머 설명해드리고 하면은 랜덤 cd 라는 것은 아주 잉어 에서 사용했던
과 동일한 것이기 때문에 다시 한번 설명 드리면 은
랜던 c 드는 랜덤 이란걸 사용하기 전에 난수 생성기를
초기화 시켜주는 넘겨 워요 근데 그 초기화 시켜 줄 때 그 난수 생성기
가 초기화를 시키기 위한 키 값을 매개변수로 줘야 되는데 그때 아들이
도에서는 알로 브
입력 값을 매개변수로 좋죠 여기서는 세컨드 라는 명령어를 이용해서 매개
변수를 입력을 해 줬어요 2 세컨드 는
여러분들이 사용하고 있는 컴퓨터의 현재 시간에 초를 알려주는 명령어 요
그래서 뭐 만약에 여러분들이 이 프로그램을 실행할 때마다 2 세컨드 가
매번 바뀌기 때문에
난수 생성기 가 매번 달라지면서 초기화가 되기 때문에 일어 이와 같이
입력을 한 거예요
다시 앞으로 이동을 산소가 지구
주변은 아까는 2 3 led 를 출력 을 사용했기 때문에 아웃풋이 어찌
많은 여기서는 버튼을 사용할 것이기 때문에 인풋이 사용했고
여기서는 들어오라는 부분에 보시면 은 먼저 아두이노 에서 이제 버튼 핀
에 해당되는 상태를 확인합니다
로인 지하에 이제 확인해서 그 값을 스테이트 라는 곳에다가 넣은 다음에
만약에 이전에 이 버튼을 상태 값이 로 였다가 하이루 되는지 확인을 한
다음에 만약 놓였다 하이로 됐다는 것은 여러분들이 버튼을 누르고 있지
않았다 눌러 누른 상태를 말하는 것이 잖아요
그때 이제 여러분들이 있는 음
여러분들이 사용하고 있는 마우스 커서 에 위치한 위치에
원을 그려 주는 것을 지금 코드를 짜져 있는 겁니다
저 플러스 레디 웃으라고 적혀있는 것은
원의
원의 지름을 설정하려고 지금 좋은 변수 고요
랜덤 50에서 300으로 좋기 때문에 원외 지름이
50에서 300 사이에 어떤 난수를 설정이 됩니다
그리고 여기 원 의 색깔을 설정 하기 위해서 랜덤 0에서 255
랜덤 0에서 255 3개를 입력하고 맨 뒤에 투명도를
20을 좋아지고 255 분의 20 으로 설정을 했구요
그 다음에 이제 지름과 면에 색깔이 설정이 됐으니까 는 1 입수하고 현재
마우스 커서의 위치에 마우스 x 마우스와 이 하고 앞서 개선 햇던 레이디
우스 레이디스 한 다음에
원을 그리도록 해 놓았습니다 이렇게 모든 것이 끝났으면 은 이전 상태
값을 현재 3대 값으로 변경 시키는 것 사람과 해주고
그럼 코드를 한번 실행해 보도록 하겠습니다
코드를 실행하면 화면에 이제 하얀 배경만 있지만
여러분들이 버튼을 이렇게 눌르면 의 문제 마우스 커서가 있는 위치에
원이 다양한 색깔로 생성되는 것을 볼 수가 있죠
이렇게 어디 생성된 그래서 볼 수가 있습니다
이번 시간에는 아두이노 의 가장 기본적이 led 아 버튼을 연결 해
가지고 프로세싱 으로 제어를 해보는 것을 해보았습니다
여러분들이 좀 더 이제 다양한 것을 하기 위해서 led 에 개수를 늘려서
해 본다던가
아니면은 마우스 버튼을 누르고 있으면 led 밝기 음악 서서히 밝아진다
거나 아니면 때면 어두워진 나거나 만약 아들이 너 에서 버튼을 눌렀을 때
단순히 원을 그리는 게 아니라
점이나 선이나 네모 나 다양한 도형으로 바꿔가면서 그려 지도록 뭐 해
보시기 바랍니다
이번 시간을 여기서 마치도록 하겠습니다 소 아셨습니다
댓글 0개
등록된 댓글이 없습니다.