더 웹툰 예고살인

2013-07-30

Movie

Movie, 더 웹툰

유명 만화작가가 그리는대로 살인이 일어나는 이유는?

공포스러움보다 스릴러에 가까운 느낌?

다음이 지원을 많이 해준 듯?

Bubble Pop

2013-07-29

ProgrammingProcessing

Bubble Pop, Processing, Programming

비누방울이 터지는 것을 표현해 보았습니다.

int min;
int max;
void setup() {
    size(320, 180);    
    frameRate(8);
    min = 0;
    max = 100;
}
void draw() {
    // clear slowly
    noStroke();
    colorMode(RGB);
    fill(color(255, 255, 255, 127));
    rect(0, 0, width, height);
    // draw circle
    colorMode(HSB);
    fill(random(255), 255, 255);  
    float diam = random(min, max);
    ellipse(random(width), random(height), diam, diam);
}

Analog Clock

2013-07-28

ProgrammingProcessing

Analog Clock, Processing, Programming

아날로그 시계를 만들어보았다.

흘러가는 세월아…

int s; // size
float r;
void setup() {
  s = 300;
  r = s / 2;
  size(s, s);
  smooth();
  frameRate(15);
}
void draw() {
  strokeWeight(1.5);
  // translate to center
  translate(s / 2, s / 2);
  rotate(radians(270));
  // draw circle
  stroke(#000000);
  fill(#FFFFFF);
  ellipse(0, 0, s, s);
  // draw hour numbers
  float u = radians(360 / 12);
  for(int h = 0; h < 12; h++) {
    pushMatrix();
    float x = (r * 0.9) * cos(h * u);
    float y = (r * 0.9) * sin(h * u);
    translate(x, y);
    rotate(radians(90));
    fill(#000000);
    textAlign(CENTER, CENTER);
    text(h, 0, 0);
    popMatrix();
  }
  // second needle
  float ts = radians(second() * (360 / 60));
  stroke(#FF0000);
  line(0, 0, (r * 0.9) * cos(ts), (r * 0.9) * sin(ts));
  // minute needle
  float tm = radians(minute() * (360 / 60));
  stroke(#00FF00);
  line(0, 0, (r * 0.8) * cos(tm), (r * 0.8) * sin(tm));
  // hour needle
  float th = radians(hour() * (360 / 12));
  stroke(#0000FF);
  line(0, 0, (r * 0.7) * cos(th), (r * 0.7) * sin(th));
}

Untitled 1

2013-07-26

ProgrammingProcessing

Processing, Programming

int s;  // size
int u;  // unit
PVector p; // line position
PVector d; // direction

void setup() {

  s = 300;
  u = 2;
  p = new PVector(0, 0);
  d = new PVector(u, 0); // left to right

  size(s, s);
  background(#FFFFFF);
  colorMode(HSB, s / u);
}

void draw() {

  // direction
  if (p.x > s) {
    p.x = s;
    d.x = 0;
    d.y = u;
  }
  else if (p.y > s) {
    p.y = s;
    d.x = -u;
    d.y = 0;
  }
  else if (p.x < 0) {
    p.x = 0;
    d.x = 0;
    d.y = -u;
  }
  else if (p.y < 0) {
    p.y = 0;
    d.x = u;
    d.y = 0;
  }

  // draw
  stroke(frameCount % (s / u), 127, 127);
  line(p.x, p.y, s - p.y, p.x);

  // update
  p.add(d);
}

Oblivion

2013-07-25

Movie

Movie, Oblivion

드론을 수리하는 잭이 기억을 찾아가며 진짜 적을 물리치는 이야기이다.

컴퓨터가 우주에서 지시하는 것과 톰 그루즈가 타고 다니는 비행선이 독특했다.

SF 장르를 좋아하기 때문에 재미있게 보았다.

Breakout

2013-07-21

ProgrammingProcessing

Breakout, Game, Processing, Programming

프로세싱으로 만들어보았다.

교육용 샘플 정도로만 만들었기 때문에 더 이상 버전업은 하지 않을듯…

‘R’ 키를 누르면 재시작한다.

PVector pos;
PVector delta;
int paddle;
int nrows;
int ncols;
float bwidth;
float bheight;
boolean[][] bricks;
void setup() {
  size(320, 240);
  smooth();
  colorMode(HSB);
  pos = new PVector(width / 2, height / 2);
  delta = new PVector(-2, -2);
  paddle = 20;
  nrows = 5;
  ncols = 5;
  bwidth = width / ncols;
  bheight = 15;
  bricks = new boolean[nrows][ncols];
  reset();
}
void draw() {
  // clear
  background(#FFFFFF);
  // hit wall ?
  if (pos.x < 0 || pos.x > width) {
    delta.x = -delta.x;
  }  
  if (pos.y < 0) {
    delta.y = -delta.y;
  }
  // hit paddle ?
  if (pos.y > height) {
    if (pos.x > mouseX - paddle && pos.x < mouseX + paddle) {
      delta.y = -delta.y;
    }
  }
  // hit brick ?
  for (int r = 0; r < nrows; r++) {
    for (int c = 0; c < ncols; c++) {
      if (bricks[r][c]) {
    if (pos.x > bwidth * c && pos.x < bwidth * (c + 1) &&
      pos.y > bheight * r && pos.y < bheight * (r + 1)) {
        // remove brick
        bricks[r][c] = false;
        // bound ball
        delta.y = -delta.y;
    }
      }
    }
  }
  // draw paddle
  stroke(#000000);
  strokeWeight(10);
  line(mouseX - paddle, height, mouseX + paddle, height);
  // draw ball
  noStroke();
  fill(#000000);
  ellipse(pos.x, pos.y, 20, 20);
  // draw bricks
  stroke(#FFFFFF);
  strokeWeight(1);
  for (int r = 0; r < nrows; r++) {
    fill(color(255.0 / nrows * r, 255, 255));
    for (int c = 0; c < ncols; c++) {
      if (bricks[r][c]) {
    rect(bwidth * c, bheight * r, bwidth, bheight);
      }
    }
  }
  // move
  pos.x += delta.x;
  pos.y += delta.y;
}
void keyPressed() {
  if(key == 'r' || key == 'R') {
    reset();
  }
}
void reset() {
  // pos
  pos.x = width / 2;
  pos.y = height / 2;
  // delta
  delta.x = -2;
  delta.y = -2;
  // brick
  for (int r = 0; r < nrows; r++) {
    for (int c = 0; c < ncols; c++) {
      bricks[r][c] = true;
    }
  }
}

Tumblr에 Processing 포스팅 하기

2013-07-20

ProgrammingProcessing

Processing, Programming

저는 텀블러(Tumblr)라고 하는 블로깅 서비스를 사용하고 있는데요. 오늘은 텀블러에 프로세싱(Processing)을 포스팅하는 방법에 대해 알아보도록 하겠습니다.

방법은 무척 쉽습니다. 텀블러의 포스팅 종류를 Text로 선택하고 아래 소스코드 안에 프로세싱 코드를 포함하여 입력하시면 됩니다.

<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script type="text/processing" data-processing-target="processing-canvas-hello">
void setup() {
    size(320, 340);
}
void draw() {
    ellipse(width / 2, height / 2, 50, 50);
}
</script>
<canvas id="processing-canvas-hello"> </canvas>

다음의 두 가지 항목만 유의하시기 바랍니다.

script 태그의 data-processing-target 속성값과 canvas 태그의 id 속성값은 임의로 주어도 되지만 둘은 항상 같아야 합니다. ex) “processing-canvas-hello”
각 게시물마다 위의 속성값들이 달라야 합니다. 왜냐하면 여러 게시물에 하나의 페이지에 표시될 경우 캔버스의 ID가 겹치므로 제대로 표시되지 않을 수 있습니다.

이제 프로세싱 공부도 열심히 하고, 블로그에 자랑도 해보아요~ ㅎㅎ

태극 마크

2013-07-20

Programming

Processing, Programming

프로세싱으로 태극 마크를 그려봤습니다.

애국심이 생겨나네요.

void setup() {

  int unit = 150;

  // 3:2
  size(unit * 3, unit * 2);

  noLoop();

  smooth();
}

void draw() {

  noStroke();

  // white
  background(255);

  // center
  translate(width / 2, height / 2);  
  float t = atan2(height, width);
  rotate(t);  
  scale(0.5);

  // north
  fill(255, 0, 0);  
  arc(0, 0, height, height, PI, PI * 2);

  // south
  fill(0, 0, 255);  
  arc(0, 0, height, height, 0, PI);

  scale(0.5);

  pushMatrix();
  translate(-height / 2, 0);  
  fill(255, 0, 0);
  ellipse(0, 0, height, height);    
  popMatrix();

  pushMatrix();
  translate(height / 2, 0);  
  fill(0, 0, 255);
  ellipse(0, 0, height, height);  
  popMatrix();  
}