Graphics with Processing

2017-11
http://vilab.org

1
 2006-2017 H. SHIOZAWA http://vilab.org

11.1*
shading
p p.141
n 3 7 9
n

shade ←

shadow

1 1
2
p
n GPU

n
2
 2006-2017 H. SHIOZAWA http://vilab.org

11.2*
p.155 p.67
p
n
() + +, + -. + / = 0
n 2 = (, +, -
' !" !" !"
, ,
!# !% !&
n

n 74
75
n

' 2 = 74 ×75
,4.5 − .4,5
.4)5 − )4.5
' = 23 2 )4,5 − ,4)5

1 3
 2006-2017 H. SHIOZAWA http://vilab.org

11.3*
Gouraud Phong
p p.156 p p.157
n n
→ →

n 2D n

n n

!"
!"
!
!#
!#
%"
%# !$
!$

%$ 4
 2006-2017 H. SHIOZAWA http://vilab.org

11.4
p.156 p
p 2 n

RGB
2
A D
1−$
! P R
Q % 1−% $
n
1−! C
xyz
B 2

1
&' = 1 − ! &) + !&+
&, = 1 − $ &- + $&.
2 n
&/ = 1 − % &' + %&, uv 5
 2006-2017 H. SHIOZAWA http://vilab.org

11.5*
p.94
p
n
n

!% !
!" !$
p normal(nx, ny, nz)
n !#
!" + !# + !$ + !%
n vertex !=
4 6
 2006-2017 H. SHIOZAWA http://vilab.org

11.6
QUAD_STRIP
Processing

noStroke();
beginShape(QUADS);
float d = 1.0/18;
100 for (float f = 0.0; f < 1.0; f += d) {
+ float a, x, z;
! = 100 cos + a = TWO_PI * f; f 1 1
$ = 100 sin + x = 100 * cos(a);
z = 100 * sin(a);
if (mousePressed) normal(x, 0, z);
vertex(x, -100, z);
vertex(x, 100, z);
$ !, 0, $
a = TWO_PI * (f + d);
x = 100 * cos(a);
!, %, $ z = 100 * sin(a);
if (mousePressed) normal(x, 0, z);
vertex(x, 100, z);
vertex(x, -100, z);
}
! endShape(); 7
 2006-2017 H. SHIOZAWA http://vilab.org

11.7* p.162
O u
p texture
n

O
v x
n z y
3D
n uv
texel
p uv
n 2D
n
(u, v) s,t
p uv
n
uv
n (u, v) → (x, y, z) 2D 8
 2006-2017 H. SHIOZAWA http://vilab.org

11.8
p
p texture( ) n Examples → Topics (3D)
n PImage 3 → Textures
(Examples → Libraries →
n
OpenGL→TexturedSphere)
n beginShape(), endShape()

p vertex(x, y, z, u, v)
n (x, y, z)
(u, v)

n 2D
vertex(x, y, u, v)
p textureMode( )
n uv u=1.0, v=1.0

n NORMAL: 0.0 1.0

n IMAGE: 9
 2006-2017 H. SHIOZAWA http://vilab.org

11.9
// kouji50m.jpg tex
//
// data noStroke();
// Sketch → Add File... beginShape(QUADS); uv
texture(tex); 0 1
PImage tex; textureMode(NORMAL);
vertex(-20,-50, 0, 0.0, 0.0);
vertex( 20,-50, 0, 1.0, 0.0);
void setup() { vertex( 20, 50, 15, 1.0, 1.0);
size(300, 300, P3D); vertex(-20, 50, 15, 0.0, 1.0);
tex = loadImage("kouji50m.jpg"); endShape();
} 0 1
fill(#ffffff, 128);
setup stroke(#555555);
void draw() { beginShape(QUADS);
background(0); vertex(-20,-50, 0);
translate(width/2, height/2, 0); vertex( 20,-50, 0);
rotateY(-radians(frameCount)); vertex( 20, 50, -15);
vertex(-20, 50, -15);
endShape();
}
10
 2006-2017 H. SHIOZAWA http://vilab.org

11.10
p.148
p →uv p
n n
uv
n uv A
3D→2D

! P
! 1−!
1−!
B ) = (,, .)

uv ! 1−!
)0 )1 )3
= 1−! +!
%0 %1 %3
1 1 1
p uv → %0
= 1−!
%1
+!
%3
n uv
&
%
n 11
 2006-2017 H. SHIOZAWA http://vilab.org

11.11*
p.166
p p
n n

n n uv

p (p.164)
n

p p.168
n

12
 2006-2017 H. SHIOZAWA http://vilab.org

11.12
p 11.6
u 1
v
n

n PNG

p
n Tools
→ Archive Sketch
ZIP (x,y,z)
(u,v)
n Processing
ZIP
1
n http://www2.vilab.org/
⇒
upload/cg-upload.html 13
 2006-2017 H. SHIOZAWA http://vilab.org

11.13
// //
// background(255);
PGraphics pg; // lights();
translate(width / 2, height / 2, 0);
void setup() { rotateX(radians(frameCount) / 8);
size(400, 300, P3D); noStroke();
// scale(90);
// 3 size
pg = createGraphics(100, 100, beginShape(QUADS);
JAVA2D); texture(pg); //
} textureMode(IMAGE);
vertex(-1, 1, 1, 0, 0);
void draw() { vertex( 0, 1, 0, 50, 0);
// vertex( 0,-1, 0, 50, 100);
pg.beginDraw(); // vertex(-1,-1, 1, 0, 100);
pg.background(255); vertex( 0, 1, 0, 50, 0);
pg.translate(50, 50); vertex( 1, 1, 1, 100, 0);
pg.fill(240, 180, 180); vertex( 1,-1, 1, 100, 100);
pg.rotate(radians(frameCount)); vertex( 0,-1, 0, 50, 100);
pg.rect(-100, -3, 200, 6); endShape();
pg.endDraw(); // }
14