Maybe you've used a displacement or convolution filter but never understood how it actually works...maybe you need some inspiration for your next mashup or you just want some tips on how you can make your daily bitmapdata life easier. In this session Koen will explain in depth how to use Flash CS3 to do real time image processing. Fasten your seatbelt for an inspirational hour full of displacement, manipulation, convolution, matrices, webcam and of course a lot of bitmapdata and fun!
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Play with Pixels, Bitmap Manipulation with Flash! - Koen De Weggheleire
1. 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
2. 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
3. My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com
4. My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
I DO lecture, speak, coordinate, write, manage,..
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com
5. My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
I DO lecture, speak, coordinate, write, manage,..
I DO NOT
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com
6. My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
I DO lecture, speak, coordinate, write, manage,..
I DO NOT
Renovate my house (sorry dad)
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com
7. My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
I DO lecture, speak, coordinate, write, manage,..
I DO NOT
Renovate my house (sorry dad)
Do sports
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com
8. My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
I DO lecture, speak, coordinate, write, manage,..
I DO NOT
Renovate my house (sorry dad)
Do sports
Eat healthy
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com
9. My personal DO’s and DONT’s
DOMESTIC - INTERNATIONAL
I DO lecture, speak, coordinate, write, manage,..
I DO NOT
Renovate my house (sorry dad)
Do sports
Eat healthy
Have a girlfriend
N° 3 - FITC Feb 2008 - http://www.newmovieclip.com
11. BITMAP TRANSFORMATION
DOMESTIC - INTERNATIONAL
Purpose:
Understanding how transformations work
(skew, rotate, translate, scale)
Using a transformation MATRIX...
N° 4 - FITC Feb 2008 - http://www.newmovieclip.com
12. BITMAP TRANSFORMATION
DOMESTIC - INTERNATIONAL
Purpose:
Understanding how transformations work
(skew, rotate, translate, scale)
Using a transformation MATRIX...
Indeed... It is all about
N° 4 - FITC Feb 2008 - http://www.newmovieclip.com
13. BITMAP TRANSFORMATION
DOMESTIC - INTERNATIONAL
Purpose:
Understanding how transformations work
(skew, rotate, translate, scale)
Using a transformation MATRIX...
Indeed... It is all about
MATH
Oooooh noooo
N° 4 - FITC Feb 2008 - http://www.newmovieclip.com
14. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c
d e f
g h i
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
15. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c MATRIX
d e f
g h i
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
16. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c MATRIX
= rectangular table of numbers
d e f
g h i
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
17. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c MATRIX
= rectangular table of numbers
d e f 3 x 3 matrix
g h i
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
18. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c MATRIX
= rectangular table of numbers
d e f 3 x 3 matrix
= three rows x three colums
g h i
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
19. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c MATRIX
= rectangular table of numbers
d e f 3 x 3 matrix
= three rows x three colums
g h i Dimensions of a matrix
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
20. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c MATRIX
= rectangular table of numbers
d e f 3 x 3 matrix
= three rows x three colums
g h i Dimensions of a matrix
= number of rows by number of
columns
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
21. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c MATRIX
= rectangular table of numbers
d e f 3 x 3 matrix
= three rows x three colums
g h i Dimensions of a matrix
= number of rows by number of
columns
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
22. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c MATRIX
= rectangular table of numbers
d e f 3 x 3 matrix
= three rows x three colums
g h i Dimensions of a matrix
= number of rows by number of
columns
Each value stores a piece of data that can be used in a calculation !
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
23. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c MATRIX
= rectangular table of numbers
d e f 3 x 3 matrix
= three rows x three colums
g h i Dimensions of a matrix
= number of rows by number of
columns
Each value stores a piece of data that can be used in a calculation !
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
24. Background : defining a matrix
DOMESTIC - INTERNATIONAL
a b c MATRIX
= rectangular table of numbers
d e f 3 x 3 matrix
= three rows x three colums
g h i Dimensions of a matrix
= number of rows by number of
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]
N° 5 - FITC Feb 2008 - http://www.newmovieclip.com
25. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 6 - FITC Feb 2008 - http://www.newmovieclip.com
26. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 6 - FITC Feb 2008 - http://www.newmovieclip.com
27. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
a b tx X and Y scale values
c d ty 1 = 100% scale
u v w
N° 6 - FITC Feb 2008 - http://www.newmovieclip.com
28. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
a b tx X and Y scale values
c d ty 1 = 100% scale
u v w
N° 6 - FITC Feb 2008 - http://www.newmovieclip.com
29. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 7 - FITC Feb 2008 - http://www.newmovieclip.com
30. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 7 - FITC Feb 2008 - http://www.newmovieclip.com
31. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
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
N° 7 - FITC Feb 2008 - http://www.newmovieclip.com
32. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
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
N° 7 - FITC Feb 2008 - http://www.newmovieclip.com
33. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 8 - FITC Feb 2008 - http://www.newmovieclip.com
34. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
a b tx
c d ty
u v w
N° 8 - FITC Feb 2008 - http://www.newmovieclip.com
35. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
a b tx Y and X translation values
c d ty value in pixels
u v w
N° 8 - FITC Feb 2008 - http://www.newmovieclip.com
36. Using the transformation matrix
DOMESTIC - INTERNATIONAL
How does the transformation MATRIX look ? ?
a b tx Y and X translation values
c d ty value in pixels
u v w
N° 8 - FITC Feb 2008 - http://www.newmovieclip.com
37. Using the transformation matrix
DOMESTIC - INTERNATIONAL
and ROTATION ?
Rotation is combination of a, b, c, d !
a b tx
c d ty
u v w
N° 9 - FITC Feb 2008 - http://www.newmovieclip.com
38. Using the transformation matrix
DOMESTIC - INTERNATIONAL
and ROTATION ?
Rotation is combination of a, b, c, d !
a b tx
c d ty
u v w
N° 9 - FITC Feb 2008 - http://www.newmovieclip.com
39. Using the transformation matrix
DOMESTIC - INTERNATIONAL
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)
N° 9 - FITC Feb 2008 - http://www.newmovieclip.com
40. Using the transformation matrix
DOMESTIC - INTERNATIONAL
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
N° 10 - FITC Feb 2008 - http://www.newmovieclip.com
41. BITMAP MANIPULATION
DOMESTIC - INTERNATIONAL
Purpose:
Understanding how PIXEL manipulation
works to do some cool and fun stuff on BITMAPS!
N° 11 - FITC Feb 2008 - http://www.newmovieclip.com
43. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
44. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
45. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
46. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
47. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
R
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
48. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
R
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
49. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
R
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
50. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
R
G
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
51. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
R
G
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
52. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
R
G
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
53. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
R
G
B
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
54. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
R
G
B
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
55. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
R
G
B
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
56. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
R
G
B
A
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
57. ColorTransform object
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
ColorTransform object
flash.geom.ColorTransform
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
N° 12 - FITC Feb 2008 - http://www.newmovieclip.com
58. ColorMatrixFilter
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
flash.filters.ColorMatrixFilter
Yes again a matrix... This time a 4 x 5 matrix.
N° 13 - FITC Feb 2008 - http://www.newmovieclip.com
59. ColorMatrixFilter
DOMESTIC - INTERNATIONAL
Transform colors of a display object:
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
N° 13 - FITC Feb 2008 - http://www.newmovieclip.com
60. ColorMatrixFilter
DOMESTIC - INTERNATIONAL
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
N° 14 - FITC Feb 2008 - http://www.newmovieclip.com
62. ConvolutionFilter
DOMESTIC - INTERNATIONAL
“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
N° 15 - FITC Feb 2008 - http://www.newmovieclip.com
63. ConvolutionFilter
DOMESTIC - INTERNATIONAL
“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
Sounds COOL... BUT... what is a convolution filter now?
N° 15 - FITC Feb 2008 - http://www.newmovieclip.com
64. ConvolutionFilter
DOMESTIC - INTERNATIONAL
“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
Sounds COOL... BUT... what is a convolution filter now?
A convolution filter combines pixel data in a bitmap with
data from neighboring pixels.
N° 15 - FITC Feb 2008 - http://www.newmovieclip.com
65. ConvolutionFilter
DOMESTIC - INTERNATIONAL
“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
Sounds COOL... BUT... what is a convolution filter now?
A convolution filter combines pixel data in a bitmap with
data from neighboring pixels.
= FULL CONTROL on pixel level
N° 15 - FITC Feb 2008 - http://www.newmovieclip.com
66. ConvolutionFilter
DOMESTIC - INTERNATIONAL
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]…
N° 16 - FITC Feb 2008 - http://www.newmovieclip.com
67. ConvolutionFilter
DOMESTIC - INTERNATIONAL
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]…
N° 16 - FITC Feb 2008 - http://www.newmovieclip.com
68. ConvolutionFilter
DOMESTIC - INTERNATIONAL
0 0 0
Convolution Kernel: 0 1 0
0 0 0
Source Bitmap A Output Bitmap B
a [x,y] b [x,y]
SOLUTION : The output image is the same as the input image
N° 17 - FITC Feb 2008 - http://www.newmovieclip.com
69. ConvolutionFilter
DOMESTIC - INTERNATIONAL
0 0 0
Convolution Kernel: 0 0 1
0 0 0
Source Bitmap A Output Bitmap B
a [x,y] b [x,y]
SOLUTION : The output image is shifted 1 pixel to left
N° 18 - FITC Feb 2008 - http://www.newmovieclip.com
70. ConvolutionFilter
DOMESTIC - INTERNATIONAL
Some Convolution Kernels
Basic Smooth 3x3 Basic Smooth 5x5
Basic High Pass Filter 3x3 Basic High pass Filter 5x5
N° 19 - FITC Feb 2008 - http://www.newmovieclip.com
71. ConvolutionFilter
DOMESTIC - INTERNATIONAL
Some Convolution Kernels
Horizontal edges Vertical edges
Left diagonal edges Right diagonal edges
N° 20 - FITC Feb 2008 - http://www.newmovieclip.com
74. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
N° 23 - FITC Feb 2008 - http://www.newmovieclip.com
75. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
= a photographic snapshot of the pixels contained
within a bitmap.
N° 23 - FITC Feb 2008 - http://www.newmovieclip.com
76. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
= a photographic snapshot of the pixels contained
within a bitmap.
= the class has built-in methods for creation and
manipulation of pixel data.
N° 23 - FITC Feb 2008 - http://www.newmovieclip.com
77. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
= a photographic snapshot of the pixels contained
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);
N° 23 - FITC Feb 2008 - http://www.newmovieclip.com
78. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
79. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
Manipulate the little tiny PIXELS:
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
80. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
Manipulate the little tiny PIXELS:
getPixel(x,y) and getPixel32(x,y)
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
81. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
Manipulate the little tiny PIXELS:
getPixel(x,y) and getPixel32(x,y)
setPixel(x,y) and setPixel32(x,y)
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
82. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
Manipulate the little tiny PIXELS:
getPixel(x,y) and getPixel32(x,y)
setPixel(x,y) and setPixel32(x,y)
getPixels(rect) returns ByteArray
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
83. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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)
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
84. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
85. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
clone()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
86. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
clone()
copyPixels()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
87. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
clone()
copyPixels()
copyChannel() eg : BitmapDataChannel.RED
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
88. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
clone()
copyPixels()
copyChannel() eg : BitmapDataChannel.RED
draw() transformations are NOT copied!
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
89. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
clone()
copyPixels()
copyChannel() eg : BitmapDataChannel.RED
draw() transformations are NOT copied!
Other interesting methods:
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
90. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
clone()
copyPixels()
copyChannel() eg : BitmapDataChannel.RED
draw() transformations are NOT copied!
Other interesting methods:
applyFilter()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
91. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
clone()
copyPixels()
copyChannel() eg : BitmapDataChannel.RED
draw() transformations are NOT copied!
Other interesting methods:
applyFilter()
colorTransform()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
92. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
clone()
copyPixels()
copyChannel() eg : BitmapDataChannel.RED
draw() transformations are NOT copied!
Other interesting methods:
applyFilter()
colorTransform()
compare()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
93. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
clone()
copyPixels()
copyChannel() eg : BitmapDataChannel.RED
draw() transformations are NOT copied!
Other interesting methods:
applyFilter()
colorTransform()
compare()
threshold()
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
94. BitmapData class and pixel manipulation
DOMESTIC - INTERNATIONAL
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:
clone()
copyPixels()
copyChannel() eg : BitmapDataChannel.RED
draw() transformations are NOT copied!
Other interesting methods:
applyFilter()
colorTransform()
compare()
threshold()
...
N° 24 - FITC Feb 2008 - http://www.newmovieclip.com
98. DisplacementMapFilter
DOMESTIC - INTERNATIONAL
ApplyFilter() DISPLACEMENTMAPFILTER
What you need:
A source BitmapData object
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
99. DisplacementMapFilter
DOMESTIC - INTERNATIONAL
ApplyFilter() DISPLACEMENTMAPFILTER
What you need:
A source BitmapData object
A displacement map image (BitmapData object)
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
100. DisplacementMapFilter
DOMESTIC - INTERNATIONAL
ApplyFilter() DISPLACEMENTMAPFILTER
What you need:
A source BitmapData object
A displacement map image (BitmapData object)
How it works :
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
101. DisplacementMapFilter
DOMESTIC - INTERNATIONAL
ApplyFilter() DISPLACEMENTMAPFILTER
What you need:
A source BitmapData object
A displacement map image (BitmapData object)
How it works :
uses pixel color values from the displacement map to do
displacement in x and y direction !
N° 25 - FITC Feb 2008 - http://www.newmovieclip.com
103. DisplacementMapFilter
DOMESTIC - INTERNATIONAL
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)
N° 26 - FITC Feb 2008 - http://www.newmovieclip.com
105. PRIORITY MAIL
US POSTAGE PAID
info@newmovieclip.com
PERMIT NO 97
EXAMPLES...
Slides and code : www.newmovieclip.com
Koen De Weggheleire Creative Fun
Technical
106. PRIORITY MAIL
US POSTAGE PAID
info@newmovieclip.com
PERMIT NO 97
Q AND A
THANK YOU ALL AND CU NEXT TIME !
Koen De Weggheleire Creative Fun
Technical
Slid
esh
ow
&d
new em
mo at os
viec
lip.
com