1 of 22

Ch 13 - Animation

Supanit Angsirikul

2 of 22

Thread คืออะไร

โปรเซส (Process) คือ โปรแกรมที่กำลังทำงานหรือรันอยู่บนเครื่องคอมพิวเตอร์ โดยทุกโปรเซสจะต้องประกอบด้วย เธรต (Thread)อย่างน้อย 1 ตัว
Thread คือ หน่วยการทำงานย่อยที่อยู่ใน process มีการแบ่งปันทรัพยากรต่างๆ ใน process นั้นๆ โดยปกติ Process ที่มี 1 thread จะเรียกว่า Single thread หรือเรียกว่า Heavy Weight Process ซึ่งมักพบใน OS รุ่นเก่า แต่ถ้า 1 process มีหลาย thread จะเรียกว่า Multithread หรือ Light Weight Process ซึ่งพบได้ใน OS รุ่นใหม่ที่ใช้กันในปัจจุบันทั่วไป และ Multithread ก็เป็นที่นิยมมากกว่า Single thread
https://www.youtube.com/watch?v=E4j6KMPOj0c

3 of 22

currentThread()

-- static mode

int i = 0;

println(i++ + ": " + Thread.currentThread().getName());

4 of 22

currentThread()

-- dynamic mode

void setup() {

println("setup(): " + Thread.currentThread().getName());

noLoop();

}

int d = 0;

void draw() {

println("draw(): " + Thread.currentThread().getName() + ", " + d++);

}

void mousePressed() {

println("mousePressed(): " + Thread.currentThread().getName());

redraw();

}

5 of 22

Create thread in static mode.

new Thread(new Runnable()

{ public void run() {

print("Hello: " + Thread.currentThread().getName());

}

}).start();

6 of 22

Create thread in active mode.

void setup() {

new Thread(new Runnable() {

public void run() {

println("setup(): " + Thread.currentThread().getName());

}

}).start();

frameRate(1);

}

void draw() {

new Thread(new Runnable() {

public void run() {

println("draw(): " + Thread.currentThread().getName());

}

}).start();

}

7 of 22

Static mode cannot redraw.

size(400, 200);

fill(255, 0, 0);

noStroke();

float cx = 100.0;

while(++cx < width) {

background(255);

ellipse(cx, height/2, 80, 80);

try { Thread.sleep(50); } catch(Exception ex) { }

println("static: " + cx);

}

8 of 22

Background thread cannot draw.

size(400, 200);

fill(255, 0, 0);

noStroke();

new Thread(new Runnable() {

public void run() {

float cx = 100.0;

while(++cx < width) {

background(255);

ellipse(cx, height/2, 80, 80);

try { Thread.sleep(50); } catch(Exception ex) { }

println("runnable: " + cx );

}

}).start();

9 of 22

void setup() {

size(400, 200);

fill(255, 0, 0);

noStroke();

circles();

}

float cx = 100.0;

void draw() {

background(255);

ellipse(cx, height/2, 80, 80);

}

void circles() {

new Thread(new Runnable() {

public void run() {

while(++cx < width) {

redraw();

try { Thread.sleep(50); } catch(Exception ex) { }

println("runnable: " + cx);

}

}).start();

}

การวาดต้องอยู่ใน draw() เท่านั้น

10 of 22

Animation with draw()

void setup() {

size(400, 200);

fill(255, 0, 0);

noStroke();

}

float cx = 0.0;

void draw() {

background(255);

ellipse(cx, height/2, 80, 80);

if (++cx > width)

noLoop();

}

11 of 22

Graphic Animation

int x = 0;

PImage im;

void setup() {

size(600, 400);

im = loadImage("data/road.png");

im.resize(width, height);

fill(255, 10, 20, 255);

noStroke();

}

void draw() {

background(im);

ellipse(x++, 50, 60, 60);

if (x >= width)

noLoop();

}

12 of 22

Image Animation with key and mouse

int x, y, i = 0;

PImage []im = new PImage[4];

void setup() {

im[0] = loadImage("data/bird1.png");

im[1] = loadImage("data/bird2.png");

im[2] = loadImage("data/bird3.png");

im[3] = im[1];

size(800, 600);

x = width/2; y = height/2;

}

void draw() {

background(255);

image(im[i++ % 4], x, y);

noLoop();

}

void keyPressed() {

if (key == CODED) {

if (keyCode == UP)

y--;

else if (keyCode == DOWN)

y++;

else if (keyCode == LEFT)

x--;

else if (keyCode == RIGHT)

x++;

}

redraw();

}

void mouseDragged() {

if (x < mouseX)

x++;

else if (x > mouseX)

x--;

if (y < mouseY)

y++;

else if (y > mouseY)

y--;

redraw();

}

13 of 22

Image Animation : Random Fly

int x, y, i = 0;

PImage []im = new PImage[4];

void setup() {

im[0] = loadImage("data/bird1.png");

im[1] = loadImage("data/bird2.png");

im[2] = loadImage("data/bird3.png");

im[3] = im[1];

size(800, 600);

x = width/2; y = height/2;

frameRate(5);

}

void draw() {

background(255);

x += random(-10, 3);

y += random(-10, 3);

image(im[i++ % 4], x, y);

if (x < 0 || x > width || y < 0 || y > height)

noLoop();

}

14 of 22

Image Animation on Background Image

int x, y, i = 0;

PImage []im = new PImage[4];

PImage bg;

void setup() {

bg = loadImage("data/road.png");

im[0] = loadImage("data/bird1.png");

im[1] = loadImage("data/bird2.png");

im[2] = loadImage("data/bird3.png");

im[3] = im[1];

size(800, 600);

bg.resize(width, height);

x = width/2; y = height/2;

frameRate(5);

}

void draw() {

background(bg);

x += random(-10, 3);

y += random(-10, 3);

image(im[i++ % 4], x, y);

if (x < 0 || x > width || y < 0 || y > height)

noLoop();

}

15 of 22

Turning background to transparency

int threshold = 750;

PImage []im = new PImage[3];

im[0] = loadImage("data/bird1.png");

im[1] = loadImage("data/bird2.png");

im[2] = loadImage("data/bird3.png");

PImage []tim = new PImage[3];

for (int i = 0; i < 3; i++) {

tim[i] = createImage(im[i].width, im[i].height, ARGB);

im[i].loadPixels();

tim[i].loadPixels();

for (int j = 0; j < im[i].pixels.length; j++) {

float r = red(im[i].pixels[j]);

float g = green(im[i].pixels[j]);

float b = blue(im[i].pixels[j]);

if ((r + g + b) > threshold)

tim[i].pixels[j] = color(r, g, b, 0);

else

tim[i].pixels[j] = color(r, g, b, 255);

}

tim[i].updatePixels();

tim[i].save("/data/tbird" + (i+1) + ".png");

}

// Save in Sketch folder

tbird1

tbird2

tbird3

16 of 22

int x, y, i = 0;

PImage []im = new PImage[4];

PImage bg;

void setup() {

bg = loadImage("data/road.png");

im[0] = loadImage("data/tbird1.png");

im[1] = loadImage("data/tbird2.png");

im[2] = loadImage("data/tbird3.png");

im[3] = im[1];

size(800, 600);

bg.resize(width, height);

x = width/2; y = height/2;

frameRate(5);

}

void draw() {

background(bg);

x += random(-10, 3);

y += random(-10, 3);

image(im[i++ % 4], x, y);

if (x < 0 || x > width || y < 0 || y > height)

noLoop();

}

17 of 22

Animated Objects

class BirdImages {

PImage []im = new PImage[4];

BirdImages() {

im[0] = loadImage("data/tbird1.png");

im[1] = loadImage("data/tbird2.png");

im[2] = loadImage("data/tbird3.png");

im[3] = im[1];

}

class Bird {

BirdImages bi;

int x, y, rx, ry, i = 0;

Bird(BirdImages bi, int rx, int ry) {

this.bi = bi;

this.rx = rx; this.ry = ry;

x = width/2 ;

y = height/2;

}

void move() {

x += random(-rx, rx);

y += random(-ry, ry);

if (x < 0 || x > width || y < 0 || y > height) {

x = width/2; rx = int(random(-2, 5));

y = height/2; ry = int(random(-2, 5));

}

image(bi.im[i++ % 4], x, y);

}

Bird []b = new Bird[5];

void setup() {

size(800, 600);

BirdImages bi = new BirdImages();

for(int i = 0; i < 5; i++)

b[i] = new Bird(bi, int(random(-5, 5)), int(random(-5, 5)));

frameRate(5);

}

void draw() {

background(255);

for(int i = 0; i < 5; i++)

b[i].move();

}

18 of 22

19 of 22

int x, y, gx, dx = -2, dy = -2, i = 0;

boolean fire;

int bx, by;

PImage []im = new PImage[4];

void setup() {

im[0] = loadImage("data/bird1.png");

im[1] = loadImage("data/bird2.png");

im[2] = loadImage("data/bird3.png");

im[3] = im[1];

size(800, 600);

x = width/2; y = height/2;

frameRate(10);

noLoop();

fill(0);

}

void draw() {

background(255);

drawBird();

drawGun();

if(fire)

drawBullet();

if(isStrike())

noLoop();

}

void drawBird() {

x += dx + random(-4, 4);

y += dy + random(-4, 4);

if (x < 0 || x > width-100 || y < 0 || y > height-100) {

dx *= -1; dy *= -1;

}

image(im[i++ % 4], x, y);

}

Game

20 of 22

void keyPressed() {

if (key == 's')// start game

loop();

}

void mouseMoved() {

gx = mouseX;

}

void mousePressed() {

if (!fire) {

fire = true;

bx = mouseX+20;

by = height - 50;

}

void drawGun() {

rect(gx, height-50, 40, 50);

}

void drawBullet() {

ellipse(bx, by--, 20, 20);

by -= 10;

if (by < 5)

fire = false;

}

boolean isStrike() {

if ((bx > x - 10) && (bx < x + 120) &&

(by < y + 80) && (by > y - 10))

return true;

return false;

}

Game (cont.)

21 of 22

Assignment #

ให้นักศึกษาเขียนโปรแกรมเกมยิงนก โดยเมื่อเริ่มเกมให้มีนกบินออกมาพร้อมกัน 10 ตัว สามารถยิงกระสุนได้ทีละ 1 นัด เมื่อนกตัวใดถูกยิง นกตัวนั้นจะหาย เมื่อยิงครบทั้ง 10 ตัว จึงจะสิ้นสุดเกม

22 of 22

งานกลุ่ม (กลุ่มละ 2-3 คน) 20 คะแนน

ให้นักศึกษานำความรู้ที่เรียนมาในวิชานี้ สร้าง โปรเจค 1 ชิ้น