Play with Pixels, Bitmap Manipulation with Flash! - Koen De Weggheleire

PRIORITY MAIL
US POSTAGE PAID
info@newmovieclip.com
PERMIT NO 97

play with pixels
BITMAP MANIPULATION WITH FLASH CS3
Koen De Weggheleire Creative Fun
Technical

SESSION OVERVIEW
DOMESTIC - INTERNATIONAL

 Talk about myself...
 Bitmap transformation
 Bitmap manipulation

 Examples
 Q and hopefully A

N° 2 - FITC Feb 2008 - http://www.newmovieclip.com

My personal DO’s and DONT’s



 I DO lecture, speak, coordinate, write, manage,..



 I DO NOT



 I DO NOT
 Renovate my house (sorry dad)



 I DO NOT
 Do sports



 I DO NOT
 Do sports
 Eat healthy



 I DO NOT
 Do sports
 Eat healthy
 Have a girlfriend 


BITMAP TRANSFORMATION



 Purpose:
Understanding how transformations work
(skew, rotate, translate, scale)

Using a transformation MATRIX...



 Purpose:

 Indeed... It is all about



 Purpose:

 Indeed... It is all about

MATH
Oooooh noooo

Background : defining a matrix

a b c
d e f
g h i



a b c  MATRIX

d e f
g h i



a b c  MATRIX
= rectangular table of numbers

d e f
g h i



a b c  MATRIX

d e f  3 x 3 matrix

g h i



a b c  MATRIX

= three rows x three colums

g h i



a b c  MATRIX


g h i  Dimensions of a matrix



a b c  MATRIX


= number of rows by number of
columns



a b c  MATRIX


columns

 Each value stores a piece of data that can be used in a calculation !



a b c  MATRIX


columns

 Each value stores a piece of data that can be used in a calculation !

 Representation in Flash : [a , b , c , d , e , f , g , h , i]


Using the transformation matrix

 How does the transformation MATRIX look ? ?

a b tx
c d ty
u v w




a b tx X and Y scale values

c d ty 1 = 100% scale

u v w




a b tx
c d ty
u v w




a b tx
Y and X skew values
0 = no skew
1 = skew value equal to
c d ty the width or height of
an object at a scale of 1

u v w




a b tx
c d ty
u v w




a b tx Y and X translation values

c d ty value in pixels

u v w



 and ROTATION ?
 Rotation is combination of a, b, c, d !

a b tx
c d ty
u v w



 and ROTATION ?
 Rotation is combination of a, b, c, d !

a b tx Example :

c d ty rotate around angle q
 a = cos(q)

u v w
 b = sin (q)
 c = -sin(q)
 d =-cos(q)



 How does that work in Flash ?
 Matrix.createBox(scaleX, scaleY, rotation, tx, ty);
 Matrix.rotate(rotation);
 Matrix.scale(scaleX, scaleY);
 Matrix.translate(tx,ty)

Time for a demo


BITMAP MANIPULATION

Purpose:
Understanding how PIXEL manipulation
works to do some cool and fun stuff on BITMAPS!


ColorTransform object



 Transform colors of a display object:
 ColorTransform object
 flash.geom.ColorTransform



R



R

G



R

G

B



R

G

B

A



R
//new red value = (old red value * //
redMultiplier) + redOffset

var transfRed:ColorTransform =  G
new ColorTransform();

transfRed.greenMultiplier =0;
transfRed.blueMultiplier=0; B

MC.transform.colorTransform =
transfRed;
A


ColorMatrixFilter

 flash.filters.ColorMatrixFilter
 Yes again a matrix... This time a 4 x 5 matrix.


ColorMatrixFilter

 flash.filters.ColorMatrixFilter
 Yes again a matrix... This time a 4 x 5 matrix.

R G B A Off
R 1 0 0 0 0 SUM red

G 0 1 0 0 0 SUM green

B 0 0 1 0 0 SUM blue

A 0 0 0 1 0 SUM alpha


ColorMatrixFilter

 Example : p(x,y) with colorvalue 0xFF123456
 R = (1*0x12) + (0*0x34) + (0*0x56) + (0*0xFF)+120
 G = (0*0x12) + (2*0x34) + (0*0x56) + (0*0xFF)+0
 B = (0*0x12) + (0*0x34) + (1*0x56) + (0*0xFF)+0
 A = (0*0x12) + (0*0x34) + (0*0x56) + (1*0xFF)+0

  ARGB is resulting color R G B A Off
R 1 0 0 0 120
G 0 2 0 0 0
B 0 0 1 0 0
A 0 0 0 1 0


ConvolutionFilter


ConvolutionFilter

 “One of the reasons for capturing an image digitally is to allow
us to manipulate it to better serve our needs. Often this will include
trying to improve the subjective appearance of an image through
smoothing of grainy features or sharpening of indistinct features.
These goals sometimes can be accomplished through the use of a
discrete convolution operation.”
Dale A. Schumacher – Graphic Gems II, 1991


ConvolutionFilter


 Sounds COOL... BUT... what is a convolution filter now?


ConvolutionFilter


 A convolution filter combines pixel data in a bitmap with
data from neighboring pixels.


ConvolutionFilter


 A convolution filter combines pixel data in a bitmap with
data from neighboring pixels.

 = FULL CONTROL on pixel level


ConvolutionFilter

DIVISOR : sum of matrix coefficients

y [i,j] = 1/22 . (a[x,y] + 2a[x-1,y] + 2a[x-1,y-1] + 2a[x,y-1] + 3a[x,y+1]…


ConvolutionFilter

2 2 3
Convolution Kernel: 2 1 3
3 3 3

Source Bitmap A Output Bitmap B

a [x,y] b [x,y]

DIVISOR : sum of matrix coefficients

y [i,j] = 1/22 . (a[x,y] + 2a[x-1,y] + 2a[x-1,y-1] + 2a[x,y-1] + 3a[x,y+1]…


ConvolutionFilter

0 0 0
0 0 0


a [x,y] b [x,y]

SOLUTION : The output image is the same as the input image


ConvolutionFilter

0 0 0
0 0 0


a [x,y] b [x,y]

SOLUTION : The output image is shifted 1 pixel to left


ConvolutionFilter

 Some Convolution Kernels
Basic Smooth 3x3 Basic Smooth 5x5

Basic High Pass Filter 3x3 Basic High pass Filter 5x5


ConvolutionFilter

Horizontal edges Vertical edges

Left diagonal edges Right diagonal edges


ConvolutionFilter

Basic blur Med Blur

Gauss blur 5 Sharp


ConvolutionFilter

9 Sharp Edge

Extrude Emboss


BitmapData class and pixel manipulation



 = a photographic snapshot of the pixels contained
within a bitmap.



within a bitmap.

 = the class has built-in methods for creation and
manipulation of pixel data.



within a bitmap.

 = the class has built-in methods for creation and
manipulation of pixel data.

var myBitmapDataObject:BitmapData = 
new BitmapData(150, 150, false, 0xFF0000);

var myImage:Bitmap = new Bitmap(myBitmapDataObject);

addChild(myImage);



 Manipulate the little tiny PIXELS:



 getPixel(x,y) and getPixel32(x,y)



 setPixel(x,y) and setPixel32(x,y)



 getPixels(rect)  returns ByteArray



 setPixels(rect,bytes)




 Copying PIXELS:




 Copying PIXELS:
 clone()




 Copying PIXELS:
 clone()
 copyPixels()




 Copying PIXELS:
 clone()
 copyPixels()
 copyChannel()  eg : BitmapDataChannel.RED




 Copying PIXELS:
 clone()
 copyPixels()
 draw()  transformations are NOT copied!




 Copying PIXELS:
 clone()
 copyPixels()

 Other interesting methods:




 Copying PIXELS:
 clone()
 copyPixels()

 applyFilter()




 Copying PIXELS:
 clone()
 copyPixels()

 applyFilter()
 colorTransform()




 Copying PIXELS:
 clone()
 copyPixels()

 applyFilter()
 compare()




 Copying PIXELS:
 clone()
 copyPixels()

 applyFilter()
 compare()
 threshold()




 Copying PIXELS:
 clone()
 copyPixels()

 applyFilter()
 compare()
 threshold()
 ...

DisplacementMapFilter



 ApplyFilter()  DISPLACEMENTMAPFILTER




 What you need:




 What you need:
 A source BitmapData object




 What you need:
 A displacement map image (BitmapData object)




 What you need:

 How it works :




 What you need:

 How it works :
 uses pixel color values from the displacement map to do
displacement in x and y direction !



R(x,y)



S(x,y) D(x,y) R(x,y)

Source Displace Result
Map
[
R[x, y] = S x + ( (doCompX(x, y) - 128 ) * scaleX) / 256 ,

y + ( (doCompY(x, y) - 128) * scaleY) / 256) ]
Multipliers to SCALE
the X- and Y displacement
doCompX = get componentX value from D(Sx-Dx , Sy-Dy)
doCompY = get componentY value from D(Sx-Dx , Sy-Dy)



 How to make your DisplacementMap?

Pinch effect

Perspective effect


PRIORITY MAIL
US POSTAGE PAID
PERMIT NO 97

EXAMPLES...
Slides and code : www.newmovieclip.com
Technical

PRIORITY MAIL
US POSTAGE PAID
PERMIT NO 97

Q AND A
THANK YOU ALL AND CU NEXT TIME !
Technical
Slid
esh
ow
&d
new em
mo at os
viec
lip.
com

Play with Pixels, Bitmap Manipulation with Flash! - Koen De Weggheleire

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Play with Pixels, Bitmap Manipulation with Flash! - Koen De Weggheleire