Interactive Design_Processing and Arduino: 4월 2017

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);

}

예제_easing을 이용해서 부드러운 선 그리기

easing을 이용해서 부드러운 선 그리기

float x;
float y;
float px;
float py;
float easing = 0.05;

void setup() {
size(640, 360);
smooth();
stroke(0,120);
}

void draw() {

float targetX = mouseX;
float dx = targetX - x;
x += dx * easing;

float targetY = mouseY;
float dy = targetY - y;
y += dy * easing;

float weight=dist(x,y,px,py);
strokeWeight(weight);
line(x,y,px,py);
py=y;
px=x;
}

수업자료_easing

점진적인 변화 easing

변화값을 낮추어 부드럽게 하는 계수

float x;
float y;
float easing = 0.05;

void setup() {
  size(640, 360); 
  noStroke();  
}

void draw() { 
  background(51);
  
  float targetX = mouseX;
  float dx = targetX - x;
  x += dx * easing;
  
  float targetY = mouseY;
  float dy = targetY - y;
  y += dy * easing;
  
  ellipse(x, y, 66, 66);
}

수업자료_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 Mapping

지난시간 이미지 매핑과 마찬가지로
비디오를 매핑해보세요.

수업자료_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.

2017년 4월 4일 화요일

학생 작품 예제-mouse position

void setup(){

size(900,600);

smooth();

noStroke();

}

int i;

void draw(){

background(121,171,255);

fill(160,186,237);

rect(0,0,900,400);

fill(196,222,255);

rect(0,0,900,350);

fill(214,240,255);

rect(0,0,900,300);

fill(232,255,255);

rect(0,0,900,150);//sky

fill(255,228,0);

ellipse(mouseX,mouseY,70,70);

fill(255,255,54);

ellipse(mouseX,mouseY,50,50);//sun with mouse

fill(120);

rect(75,200,50,500,6,6,0,0);

fill(140);

rect(230,200,50,500,6,6,0,0);

fill(120);

rect(150,250,100,500,6,6,0,0);

rect(275,245,50,500,6,6,0,0);

rect(400,185,50,500,6,6,0,0);

rect(690,500,60,500,6,6,0,0);

fill(130);

rect(325,210,50,500,6,6,0,0);

rect(650,350,50,500,6,6,0,0);//background building

fill(91);

rect(0,350,100,500,9,9,0,0);

rect(105,100,100,500,9,9,0,0);

rect(350,400,100,500,9,9,0,0);

fill(100);

rect(450,150,100,500,9,9,0,0);

fill(98);

rect(550,300,100,500,9,9,0,0);

fill(94);

rect(750,400,100,500,9,9,0,0);//front building

fill(45,0,0);

rect(0,550,900,600);

fill(93,31,0);

rect(0,550,900,5);//ground

fill(225);

rect(i,550,10,10);

rect(i+10,540,15,20);

rect(i+25,550,10,10);//car1

rect(i+60,550,10,10);

rect(i+70,540,15,20);

rect(i+85,550,10,10);//car2

rect(i+120,550,10,10);

rect(i+130,540,15,20);

rect(i+145,550,10,10);//car3

rect(i+180,550,10,10);

rect(i+190,540,15,20);

rect(i+205,550,10,10);//car4

i=i+2;

if(i>width)i=0;//cars speed

}

void mouseMoved(){

fill(255,198,198);

ellipse(mouseX,mouseY,70,70);

fill(255,48,48);

ellipse(mouseX,mouseY,50,50); //if mouse moved sun will change red

}

학생작품 예제 - mouse position, mousePressed

//The fireworks burst in the black sky

void setup() {
size( 800,800);
background(0);
smooth();
} //size,color setup

void draw() {
smooth();
stroke(255,165,0);
line(mouseX,mouseY,220,220);
stroke(220,020,060);
line(mouseX,mouseY,450,450);
stroke(255,160,122);
line(mouseX,mouseY,220,650);
stroke(255,182,193);
line(mouseX,mouseY,700,100);

}//There are three of the color of lines and locate.

void mousePressed() {
stroke(255);
fill(240,230,140);
ellipse(mouseX,mouseY,50,50);
fill(#F7F25A);
ellipse(mouseX,mouseY,30,30);

}
//Two by superimposing the color and locate a circle.

Interactive Design_Processing and Arduino