레이블이 수업자료인 게시물을 표시합니다. 모든 게시물 표시
레이블이 수업자료인 게시물을 표시합니다. 모든 게시물 표시

2017년 12월 10일 일요일

아두이노와 프로세싱 연동: 가변저항으로 프로세싱 색상제어


아두이노와 프로세싱을 연동하는 프로젝트로서, 아두이노의 가변저항을 조절하여 프로세싱의 rect의 색상을 조절해봅니다. 과정은 간단합니다. 

1. 아두이노보드에 가변저항을 연결합니다. 가변저항의 세 단자에 GND, 5V, 그리고 A0(아날로그 입력)을 연결해 줍니다. (* 연결방법은 아래 포스트를 참조합니다.)

2. 아두이노 코드를 작성합니다.

3. 아두이노 프로그램에 시리얼 모니터(돋보기 아이콘)를 열어서 가변저항을 돌림에 따라 변하는 값이 제대로 출력되는지 확인합니다.

4. 프로세싱 코드를 작성합니다. 

5. 가변저항 연결 및 두 프로그램에 코드작성이 끝나면, 먼저 아두이노 업로드->프로세싱 play 순서로 작동해 봅니다. (연동시 아두이노 시리얼 모니터는 닫아줍니다) 



아두이노 코드 
-------------------------------------------------------------------------


int pot = A0; // 아날로그 핀 설정 

void setup() 
{
  Serial.begin(9600); //시리얼 통신을 시작한다.(기본 통신속도 9600)
}
void loop() 
{
  int val = map(analogRead(pot),0,1023,0,255);

//아날로그 입력값(A0)를 읽기 위해 analogRead 를 사용하고, 
//읽어들인 값을 변수 val에 전달한다. 
//map함수는 지난시간에 analogRead값을 4로 나누어 아날로그 입력값(0~1023)과 
//아날로그 출력값(0~255)의 범위를 맞춰주는 것과 같은 역할을 한다.

  Serial.println(val); // 값을 시리얼 모니터에 출력해준다. 
  delay(70);          //아두이노와 프로세싱이 연동되는 속도가 50이므로 
                        //이보다 빠르게 하면 작동을 하지 않으므로반드시 50이상으로 할 것
}


프로세싱 코드
--------------------------------------------------------------------

import processing.serial.*;  // 시리얼통신을 위해 프로세싱의 라이브러리를 불러온다. 
Serial port; 

float brightness=0; // 가변저항 값을 저장하는 변수 선언(실수형 float 변수)

void setup()
{
  size(800,500);
  
  port=new Serial(this,"COM4", 9600);  //시리얼 통신을 위한 객체 생성
                                                  //(각자 연결된 포트넘버를 쓰세요)

  port.bufferUntil('\n'); //줄바꿈('\n')이 나오기 전 까지 시리얼 통신 유지
}

void draw()
{
  fill(brightness,100,0); //가변저항에 의한 값을 R 값으로 하는 rect
  rect(100,100,250,250);

  fill(0,brightness,100);//가변저항에 의한 값을 G값으로 하는 rect
  rect(450,100,250,250);
}
void serialEvent(Serial port) //아두이노로 부터 값(데이터)가 들어올때마다 수행되는 함수
{

  brightness=float(port.readStringUntil('\n'));  //줄바꿈 전까지 데이터 읽음 
  println(brightness); //아두이노로 부터 받은 가변저항에 의한 값을 
                           //프로세싱 하단 창에 출력 
}

---------------------------------------------------------------------------------------------
구동테스트를 하여 촬영을 했으니 참고로 하세요. 

가변저항을 돌림에 따라 변하는 사각형의 색상

아두이노로 부터 프로세싱으로 가변저항에 의한 값을 받아 창에 출력하기 

2017년 4월 26일 수요일

수업자료_blend() function using SUBTRACT argument in loops sketch

size(832,624);

background(loadImage("01.jpg"));
PImage img=loadImage("02.jpg");

int w=width/6;
int h=height/8;


for(int i=0; i<width; i+=w){
  for(int j=0; j<height; j+=h){
    blend(img,0,0,width,height,i,j,w,h,SUBTRACT);
  }
}

수업자료_image tiling

size(650,450);

PImage img=loadImage("02.jpg");
int cols=8;
int rows=8;
int w=width/cols;
int h=h=height/rows;
for(int i=0; i<height; i+=h){
  for(int j=0; j<width; j+=w){
    image(img,j,i,w,h);
  }
}



수업자료_filter_dart,lighr,sub

size(832,624);
background(loadImage("01.jpg"));
PImage img=loadImage("02.jpg");


blend(img,0,0,832,624,0,0,832,624,DARKEST);
blend(img,0,0,832,624,0,0,832,624,LIGHTEST);
blend(img,0,0,832,624,0,0,832,624,SUBTRACT);





수업자료_filter_posterize

size(1500,300);
background(255);
PImage img=loadImage("01.jpg");
image(img,0,0);

int cols=5;
int w=width/cols;
int h=height;

int[]vals={2,4,8,16,32};

for(int i=0; i<cols; i++){
  image(img,i*w,0,w,h);

  filter(POSTERIZE,vals[i]);

}

수업자료_filter(BLUR)

size(500,500);
background(255);
PImage img=loadImage("01.jpg");
image(img,0,0);
filter(BLUR,10);




수업자료_filter_threshold


size(800,200);

PImage img=loadImage("01.jpg");
float thresholdLevel=1.0;

for(int i=0; i<4; i++){
  image(img,200*i,0,200,200);
  filter(THRESHOLD,thresholdLevel);
  thresholdLevel-=0.25;
}
 
 
 

수업자료_filter(INVERT)

size(600,400);
background(255);
PImage img=loadImage("01.jpg");
image(img,0,0);
filter(INVERT);

수업자료_invert

size(600,400);
background(255);
PImage img=loadImage("01.jpg");
image(img,0,0);

loadPixels();
for(int i=0; i<(width*height); i++){
  int r=abs(int(red(pixels[i]))-255);
  int g=abs(int(green(pixels[i]))-255);
  int b=abs(int(blue(pixels[i]))-255);
  int a=int(alpha(pixels[i]));
 
  pixels[i]=color(r,g,b,a);
}
updatePixels();



2017년 4월 19일 수요일

수업자료_frameRate

void setup() {
  frameRate(4);
}
int pos = 0;
void draw() {
  background(204);
  pos++;
  line(pos, 20, pos, 80);
  if (pos > width) {
    pos = 0;
  }
}
---------------------------------------

import processing.video.*;
Movie myMovie;

void setup() {
  size(200, 200);
  frameRate(30);
  myMovie = new Movie(this, "totoro.mov");
  myMovie.frameRate(2);
  myMovie.loop();
}

void draw() {
  if (myMovie.available()) {
    myMovie.read();
  }
  image(myMovie, 0, 0);
}

수업자료_대소문자 키 입력



h AND H

void setup() {
size(500,500);
}

void draw() {
 

  if ((key =='h' || key=='H')) {
    fill(255,0,0);
  } else {
    fill(255);
  }
  rect(50, 50, 150, 150);

}

수업자료_Audio Control

import ddf.minim.*;

Minim minim;
AudioPlayer groove;

void setup()
{
  size(512, 200, P2D);

  minim = new Minim(this);
  groove = minim.loadFile("groove.mp3", 2048);
  groove.loop();
}

void draw()
{
  background(0);
 
  stroke(255);
 
  for(int i = 0; i < groove.bufferSize() - 1; i++)
  {
    line(i, 50  + groove.left.get(i)*50,  i+1, 50  + groove.left.get(i+1)*50);
    line(i, 150 + groove.right.get(i)*50, i+1, 150 + groove.right.get(i+1)*50);
  }
}

void keyPressed()
{
  if ( groove.isPlaying() )
  {
    groove.pause();
  }
  else
  {
    // simply call loop again to resume playing from where it was paused
    groove.loop();
  }
}

수업자료_Audio Import

import ddf.minim.*;


Minim minim;//minim이란 이름의 미님을 선언
AudioPlayer groove;//오디오를 재생시킬 플레이어를 선언

void setup()
{
  size(512, 200, P2D);

  minim = new Minim(this); //객체의 생성
  groove = minim.loadFile("groove.mp3", 2048);//파일에서 읽어오기
  groove.play();//사운드 재생
}

void draw()
{
  background(0);

  stroke(255);

  for(int i = 0; i < groove.bufferSize() - 1; i++)
  {
    line(i, 50  + groove.left.get(i)*50,  i+1, 50  + groove.left.get(i+1)*50);
    line(i, 150 + groove.right.get(i)*50, i+1, 150 + groove.right.get(i+1)*50);
  }
}
void stop(){
  groove.close();
  minim.stop();
  super.stop();//
}

//void keyPressed()
//{
//  if ( key == 'l' ) groove.loop();
//}

수업자료_Video Pause


Video Pause

import processing.video.*;

Movie myMovie;

void setup() {

size(200, 200);
background(0); 
myMovie = new Movie(this, "totoro.mov");  myMovie.loop();}
void draw() { 
background(255);  image(myMovie, 0, 0);

}

void movieEvent(Movie m) {

m.read();

}

void mousePressed() {

myMovie.pause();

}

void mouseReleased() {

myMovie.play();

}

수업자료_Video Jump


import processing.video.*;
Movie myMovie;

void setup() {
  size(400, 300);
  frameRate(30);
  myMovie = new Movie(this, "cubist.mov");
  myMovie.loop();
}

void draw() {
  if (myMovie.available()) {
    myMovie.read();
  }
  image(myMovie, 0, 0);
}

void mousePressed() {
  myMovie.jump(random(myMovie.duration()));
}

2017년 4월 13일 목요일

수업자료_Video Import


비디오파일 불러오기 video_import


import processing.video.*;     //video library

Movie movie;

void setup() {
  size(640, 360);
  background(0);

 
  movie = new Movie(this, "cubist.mov");  // Load and play the video
  movie.play();              //한번만 플레이
  //movie.loop();           //반복 플레이
}

void movieEvent(Movie m) {
  m.read();
}

void draw() {
  image(movie, 0, 0, width, height);
}

2017년 4월 12일 수요일

수업자료_Image Mapping

이미지 맵핑 Image mapping

https://processing.org/reference/textureMode_.html



수업자료_Simple Function

간단한 함수의 작성_ simple function

------------------------------------

/* 함수에서 매개변수로 보낸 숫자를 두 배로 만들고, 출력하는 코드

void setup(){
twice(2);
twice(5);
twice(10);
}

void twice(int a){
int b;
b= a* 2;
println(b);
}
--------------------------------------

/* 함수는 계산한 값을 리턴할 수 있다. 두 수를 전달하면 면적을 계산하여 리턴하는 코드로, int area()는 계산한 값을 정수로 반환한다.

void setup(){
int a;
a=area(4,5);
println(a);
}

int area(int a, int b){
int c;
c= a* b;
return(c);
}

----------------------------------------

/*snow man_1

int x,y;
x=50; y=25;
ellipse(x,y,30,30);
ellipse(x,y+40, 50,50);

------------------------------------------

/* snow man_2

int x,y;

x=50; y=25;
ellipse(x,y,30,30);
ellipse(x,y+40, 50,50);

x=50+100; y=25;
ellipse(x,y,30,30);
ellipse(x,y+40, 50,50);

/* snow man_3

void setup(){
size(200,200);

snowman(50,25);
snowman(50+100,25);
snowman(50,25+100);
snowman(50+100,25);
}

void snowman(int x, int y){
ellipse(x,y,30,30);
ellipse(x,y+40, 50,50);
}
---------------------------------
/*snow man_4

void setup(){
int i;
size(800,200);

for(i=0;i<8; i++){
snowman(50+i*100, 25);
snowman(50+i*100, 25+100);

}

void snowman(int x, int y){
ellipse(x,y,30,30);
ellipse(x,y+40, 50,50);
}





수업자료_println

println

The println() function writes to the console area, the black rectangle at the bottom of the Processing environment. This function is often helpful for looking at the data a program is producing.




2016년 10월 26일 수요일

아두이노와 프로세싱 연동: 가변저항으로 프로세싱 색상제어

아두이노와 프로세싱을 연동하는 프로젝트로서, 아두이노의 가변저항을 조절하여 프로세싱의 rect의 색상을 조절해봅니다. 과정은 간단합니다.  1. 아두이노보드에 가변저항을 연결합니다. 가변저항의 세 단자에 GND, 5V, 그리고 A0(아날로...