Home-theater-designers
프로세싱은 코드를 통해 예술 작품을 만들 수 있는 강력한 도구입니다. 그래픽 작업을 위한 Java 라이브러리와 코드를 쉽게 작성하고 실행할 수 있는 통합 개발 환경(IDE)의 조합입니다.
Processing을 사용하는 그래픽 및 애니메이션 초보자 프로젝트가 많이 있지만 라이브 비디오를 조작할 수도 있습니다.
오늘은 프로세싱 비디오 라이브러리를 사용하여 마우스로 제어되는 다양한 효과의 라이브 비디오 슬라이드쇼를 만들 것입니다. 라이브 비디오를 뒤집을 뿐만 아니라 크기를 조정하고 색상을 지정하는 방법과 마우스 커서를 따라가도록 하는 방법을 배우게 됩니다.
프로젝트 설정
시작하려면 다운로드 처리 빈 스케치를 엽니다. 이 튜토리얼은 Windows 시스템을 기반으로 하지만 웹캠이 있는 모든 컴퓨터에서 작동해야 합니다.
아래에서 액세스할 수 있는 Processing Video 라이브러리를 설치해야 할 수도 있습니다. 스케치 > 라이브러리 가져오기 > 라이브러리 추가 . 검색 동영상 검색 상자에서 라이브러리를 설치하십시오. 프로세싱 재단 .
설치가 완료되면 사용할 준비가 된 것입니다. 코딩을 건너뛰고 싶다면 다음을 수행할 수 있습니다. 전체 스케치 다운로드 . 그러나 처음부터 직접 만드는 것이 훨씬 낫습니다!
처리와 함께 웹캠 사용
라이브러리를 가져와서 시작하겠습니다. 설정 기능. 빈 처리 스케치에 다음을 입력합니다.
import processing.video.*;
Capture cam;
void setup(){
size(640,480);
cam = new Capture(this, 640, 480);
cam.start();
}
비디오 라이브러리를 가져온 후 포착 호출된 인스턴스 주황색 웹캠의 데이터를 저장합니다. 에 설정 , NS 크기 함수는 640x480 작업할 픽셀 크기의 창입니다.
다음 줄은 주황색 의 새로운 인스턴스에 포착 , 을위한 이것 카메라를 켜기 전에 창과 같은 크기의 스케치 cam.start() .
지금 당장 이 모든 부분을 이해하지 못하더라도 걱정하지 마십시오. 간단히 말해서, 우리는 Processing에게 창을 만들고, 카메라를 찾아, 켜라고 지시했습니다! 그것을 표시하려면 우리가 필요합니다 그리다 기능. 위의 코드 아래, 중괄호 외부에 이것을 입력하십시오.
void draw(){
if (cam.available()){
cam.read();
}
image(cam,0,0);
}
NS 그리다 함수는 매 프레임마다 호출됩니다. 즉, 초당 여러 번, 만약 카메라에는 데이터가 있습니다 사용 가능 너 읽다 그것으로부터의 데이터.
이 데이터는 다음으로 표시됩니다. 영상 , 위치에서 0, 0 , 창의 왼쪽 상단에 있습니다.
스케치를 저장하고 화면 상단의 재생 버튼을 누릅니다.
성공! 에 의해 저장된 데이터 주황색 매 프레임마다 화면에 올바르게 인쇄되고 있습니다. 문제가 있는 경우 코드를 철저히 확인하십시오. Java는 올바른 위치에 모든 대괄호와 세미콜론이 필요합니다! 처리는 웹캠에 액세스하는 데 몇 초가 필요할 수도 있으므로 작동하지 않는다고 생각되면 스크립트를 시작한 후 몇 초를 기다리십시오.
그림 뒤집기
이제 라이브 웹캠 이미지가 있으므로 이를 조작해 보겠습니다. 그리기 기능에서 대체 이미지(캠,0,0); 이 두 줄의 코드로.
scale(-1,1);
image(cam,-width,0);
스케치를 저장하고 다시 실행합니다. 차이점이 보이시나요? 네거티브를 사용하여 규모 가치, 모든 NS 값(가로 픽셀)이 이제 반전됩니다. 이 때문에 창의 음수 값을 사용해야 합니다. 너비 이미지를 올바르게 배치합니다.
이미지를 거꾸로 뒤집으려면 몇 가지 작은 변화만 있으면 됩니다.
scale(-1,-1);
image(cam,-width,-height);
이번에는 둘 다 NS 그리고 그리고 값이 뒤집혀 라이브 카메라 이미지가 뒤집힙니다. 지금까지 일반 이미지, 수평으로 뒤집힌 이미지 및 수직으로 뒤집힌 이미지를 코딩했습니다. 그들 사이를 순환하는 방법을 설정합시다.
주기 만들기
매번 코드를 다시 작성하는 대신 숫자를 사용하여 순환할 수 있습니다. 새로 만들기 정수 코드 상단에 스위처 .
import processing.video.*;
int switcher = 0;
Capture cam;
스위처 값을 사용하여 카메라 이미지에 어떤 일이 발생하는지 결정할 수 있습니다. 스케치가 시작되면 값을 지정합니다. 0 . 이제 로직을 사용하여 이미지에 일어나는 일을 변경할 수 있습니다. 업데이트 그리다 방법은 다음과 같습니다.
void draw(){
if (cam.available()){
cam.read();
}
if(switcher==0){
image(cam,0,0);
}
else if(switcher == 1){
scale(-1,1);
image(cam,-width,0);
}
else if(switcher == 2){
scale(-1,-1);
image(cam,-width,-height);
}
else{
println('Switcher = 0 again');
switcher = 0;
}
}
이제 스위처의 값에 따라 코드의 세 가지 변형이 모두 트리거됩니다. 우리 중 하나와 일치하지 않으면 만약 또는 다른 경우라면 진술, 또 다른 절이 0으로 재설정됩니다. 논리는 배워야 하는 중요한 초보자 기술이며 훌륭한 YouTube 프로그래밍 자습서를 통해 이에 대해 자세히 알아볼 수 있습니다!
마우스 사용
처리에는 마우스에 액세스하기 위한 기본 제공 메서드가 있습니다. 사용자가 마우스를 클릭할 때 감지하려면 마우스를 눌렀다 스크립트 맨 아래에 있는 함수.
노트북에 연결되어 충전 중이 아니라고 표시됨
void mousePressed(){
switcher++;
}
프로세싱은 모든 마우스 클릭을 수신하고 감지하면 프로그램을 중단하여 이 방법을 수행합니다. 메소드가 호출될 때마다 스위처의 값은 1씩 커집니다. 스크립트를 저장하고 실행합니다.
이제 마우스 버튼을 누르면 원본으로 돌아가기 전에 비디오의 다른 방향을 순환합니다. 지금까지 비디오를 뒤집었습니다. 이제 좀 더 흥미로운 작업을 해 보겠습니다.
더 많은 효과 추가
이제 유명한 Andy Warhol 작품과 유사한 4색 라이브 이미지 효과를 코딩합니다. 더 많은 효과를 추가하는 것은 논리에 다른 절을 추가하는 것만큼 간단합니다. 마지막 사이의 스크립트에 이것을 추가하십시오. 그렇지 않으면 진술, 그리고 또 다른 .
else if(switcher == 3){
tint(256, 0, 0);
image(cam, 0, 0, width/2, height/2);
tint(0, 256, 0);
image(cam, width/2, 0, width/2, height/2);
tint(0, 0, 256);
image(cam, 0, height/2, width/2, height/2);
tint(256, 0, 256);
image(cam, width/2, height/2, width/2, height/2);
}
이 코드는 영상 기능을 사용하여 화면의 각 모서리에 4개의 개별 카메라 이미지를 만들고 모두 절반 크기로 만듭니다.
NS 색조 기능은 각 카메라 이미지에 색상을 추가합니다. 괄호는 빨강, 초록, 파랑(RGB) 가치. Tint는 선택한 색상으로 다음 코드를 모두 채색합니다.
결과를 보려면 저장하고 재생하십시오. 각각의 RGB 숫자를 변경해 보십시오. 색조 색상을 변경하는 기능!
마우스를 따라가기
마지막으로 Processing 라이브러리의 유용한 기능을 사용하여 라이브 이미지가 마우스 위치를 따르도록 합시다. 위에 이것을 추가하십시오 또 다른 당신의 논리의 일부.
else if(switcher==4 ){
image(cam, mouseX, mouseY, width/2, height/2);
}
여기에서 카메라의 이미지를 다음 위치에 배치합니다. 마우스X 그리고 마우스 . 이것은 마우스가 가리키는 픽셀을 반환하는 처리 값에 내장되어 있습니다.
그게 다야! 코드를 통한 라이브 비디오의 다섯 가지 변형. 그러나 코드를 실행하면 몇 가지 문제가 있음을 알 수 있습니다.
코드 마무리하기
지금까지 만든 코드는 작동하지만 두 가지 문제가 있음을 알 수 있습니다. 첫째, 4색 변형이 나타나면 이후의 모든 것이 보라색으로 착색됩니다. 둘째, 동영상을 마우스로 움직이면 흔적이 남습니다. 그리기 기능의 상단에 몇 줄을 추가하여 수정할 수 있습니다.
void draw(){
tint(256,256,256);
background(0);
//draw function continues normally here!
각 프레임이 시작될 때 이 코드는 색조 색상을 흰색으로 재설정하고 배경색을 검정색으로 추가하여 비디오가 흔적을 남기지 않도록 합니다. 이제 프로그램을 테스트하면 모든 것이 완벽하게 작동합니다!
웹캠 효과: 코드의 예술
처리는 매우 강력하며 많은 작업을 수행하는 데 사용할 수 있습니다. 코드로 예술을 만들기 위한 훌륭한 플랫폼이지만 로봇을 제어하는 데에도 적합합니다!
Java가 당신의 것이 아니라면, p5.js라고 불리는 Processing을 기반으로 하는 JavaScript 라이브러리가 있습니다. 브라우저 기반이며 초보자도 이를 사용하여 환상적인 반응형 애니메이션을 만들 수 있습니다!
이미지 크레디트: Syda_Productions / Depositphotos
공유하다 공유하다 트위터 이메일 이메일이 진짜인지 가짜인지 확인하는 3가지 방법다소 의심스러운 이메일을 받았다면 항상 해당 이메일의 진위 여부를 확인하는 것이 가장 좋습니다. 이메일이 진짜인지 확인하는 세 가지 방법이 있습니다.
다음 읽기 관련 항목- 프로그램 작성
- 자바
- 웹캠
- 처리
- 코딩 튜토리얼
Ian Buckley는 독일 베를린에 거주하는 프리랜스 저널리스트, 음악가, 공연자 및 비디오 프로듀서입니다. 글을 쓰지 않거나 무대에 오르지 않을 때는 미친 과학자가 되기 위해 DIY 전자 제품이나 코드를 만지작거리고 있습니다.
이안 버클리가 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.