Smalltalk › Frameworks & Tools › eToys Development

How can I access the individual pixels in an image

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

8 messages Options

Steve Thomas

How can I access the individual pixels in an image

How can I loop through each pixel in an image and get their red,green,blue values?

I also would like to be able to create a new image using those values (modified, for example set red=red*0.5)

I know Karl did a great project Color Reading And Writing which I could use, but would like to introduce some of the kids to squeak.

Thanks,

Stephen

_______________________________________________
etoys-dev mailing list
[hidden email]
http://lists.squeakland.org/mailman/listinfo/etoys-dev

Bert Freudenberg

Re: How can I access the individual pixels in an image

On 25.05.2012, at 12:35, Steve Thomas wrote:

How can I loop through each pixel in an image and get their red,green,blue values?
I also would like to be able to create a new image using those values (modified, for example set red=red*0.5)

I know Karl did a great project Color Reading And Writing which I could use, but would like to introduce some of the kids to squeak.

- Bert -

_______________________________________________
etoys-dev mailing list
[hidden email]
http://lists.squeakland.org/mailman/listinfo/etoys-dev

Rita Freudenberg

Re: How can I access the individual pixels in an image

In reply to this post by Steve Thomas

Hi Steve,

I remember Kedama-projects from Yoshiki, where he modified individual pixels in an image. While I was looking for these projects, I found a very project from Mr. Dreyfus in our showcase, in which a sketch can be dropped onto Kedama and is converted into Pixels, which are then moved. You can find it here:

http://www.squeakland.org/launcher/?http://www.squeakland.org/content/showcase/everyone/accounts/pad/Walke-Particles-Pixels.002.pr

Rita

On May 25, 2012, at 12:35 PM, Steve Thomas wrote:

How can I loop through each pixel in an image and get their red,green,blue values?
I also would like to be able to create a new image using those values (modified, for example set red=red*0.5)

I know Karl did a great project Color Reading And Writing which I could use, but would like to introduce some of the kids to squeak.

Thanks,

Stephen
_______________________________________________
etoys-dev mailing list
[hidden email]
http://lists.squeakland.org/mailman/listinfo/etoys-dev

Rita Freudenberg
[hidden email]

_______________________________________________
etoys-dev mailing list
[hidden email]
http://lists.squeakland.org/mailman/listinfo/etoys-dev

Steve Thomas

Re: How can I access the individual pixels in an image

In reply to this post by Bert Freudenberg

I tried setting alpha to 50, but it didn't work, see script below.

recolor

| oldForm newForm old new avg |

oldForm := ErnieRubberDuckie getGraphic.

newForm := Form extent: oldForm extent depth: 16.

to: oldForm height - 1

do: [:y | 0

to: oldForm width - 1

do: [:x |

old := oldForm colorAt: x @ y.

avg := old red + old green + old blue / 3.

new := Color

r: old red * 0 + avg

g: old green * 0 + avg

b: old blue * 0 + avg

alpha: 50.

newForm colorAt: x @ y put: new]].

self setGraphic: newForm

On Fri, May 25, 2012 at 7:59 AM, Bert Freudenberg <[hidden email]> wrote:

On 25.05.2012, at 12:35, Steve Thomas wrote:

How can I loop through each pixel in an image and get their red,green,blue values?
I also would like to be able to create a new image using those values (modified, for example set red=red*0.5)

I know Karl did a great project Color Reading And Writing which I could use, but would like to introduce some of the kids to squeak.

- Bert -

_______________________________________________
etoys-dev mailing list
[hidden email]
http://lists.squeakland.org/mailman/listinfo/etoys-dev

Bert Freudenberg

Re: How can I access the individual pixels in an image

Well, for one, all these values are fractions in the range 0 to 1.

If you use 0 in your example, the image will become fully transparent. If you use 1, it will be fully opaque.

Since 16 bit forms store only 1 bit of alpha (and 5 bits each for red, green, and blue), you cannot do more than toggle that bit.

If you want real translucency, create newForm with 32 bits of depth instead of 16. Then each component gets full 8 bits, and e.g. using an alpha of 0.5 will make the whole image half-transparent.

- Bert -

On 25.05.2012, at 20:23, Steve Thomas wrote:

<Screen Shot 2012-05-25 at 2.22.06 PM.png>
I tried setting alpha to 50, but it didn't work, see script below.

recolor
| oldForm newForm old new avg |
oldForm := ErnieRubberDuckie getGraphic.

newForm := Form extent: oldForm extent depth: 16.
0
to: oldForm height - 1

do: [:y | 0
to: oldForm width - 1
do: [:x |

old := oldForm colorAt: x @ y.
avg := old red + old green + old blue / 3.

new := Color
r: old red * 0 + avg
g: old green * 0 + avg

b: old blue * 0 + avg
alpha: 50.
newForm colorAt: x @ y put: new]].

self setGraphic: newForm

On Fri, May 25, 2012 at 7:59 AM, Bert Freudenberg <[hidden email]> wrote:

On 25.05.2012, at 12:35, Steve Thomas wrote:

How can I loop through each pixel in an image and get their red,green,blue values?
I also would like to be able to create a new image using those values (modified, for example set red=red*0.5)

I know Karl did a great project Color Reading And Writing which I could use, but would like to introduce some of the kids to squeak.

<PastedGraphic-10.png>

<PastedGraphic-11.png>

- Bert -

_______________________________________________
etoys-dev mailing list
[hidden email]
http://lists.squeakland.org/mailman/listinfo/etoys-dev

Bert Freudenberg

Re: How can I access the individual pixels in an image

Also, especially for beginners, you can just leave out alpha, using #r:g:b: instead of #r:g:b:alpha:.

And you can use "named colors":

new := old red < 0.5 ifTrue: [Color blue] ifFalse: [Color yellow].

And, for advanced fun without the RGB color model, use #h:s:v: for creating the new color, and #hue, #saturation, and #brightness for reading. Hue is in degrees (0 to 360 on the color circle) and the others 0 to 1:

new := Color h: (old hue roundTo: 30) s: 1 v: 1 alpha: old alpha.

- Bert -

On 25.05.2012, at 20:32, Bert Freudenberg wrote:

Well, for one, all these values are fractions in the range 0 to 1.

If you use 0 in your example, the image will become fully transparent. If you use 1, it will be fully opaque.

Since 16 bit forms store only 1 bit of alpha (and 5 bits each for red, green, and blue), you cannot do more than toggle that bit.

If you want real translucency, create newForm with 32 bits of depth instead of 16. Then each component gets full 8 bits, and e.g. using an alpha of 0.5 will make the whole image half-transparent.

On 25.05.2012, at 20:23, Steve Thomas wrote:

<Screen Shot 2012-05-25 at 2.22.06 PM.png>
I tried setting alpha to 50, but it didn't work, see script below.

recolor
| oldForm newForm old new avg |
oldForm := ErnieRubberDuckie getGraphic.

newForm := Form extent: oldForm extent depth: 16.
0
to: oldForm height - 1

do: [:y | 0
to: oldForm width - 1
do: [:x |

old := oldForm colorAt: x @ y.
avg := old red + old green + old blue / 3.

new := Color
r: old red * 0 + avg
g: old green * 0 + avg

b: old blue * 0 + avg
alpha: 50.
newForm colorAt: x @ y put: new]].

self setGraphic: newForm

_______________________________________________
etoys-dev mailing list
[hidden email]
http://lists.squeakland.org/mailman/listinfo/etoys-dev

Steve Thomas

Re: How can I access the individual pixels in an image

In reply to this post by Bert Freudenberg

Thanks!!!

So that explains why the red, green, blue values go 0 to 100 instead of 0 to 255.

The kids will have fun with this, I am going to try and get them to create some "green screen effects" using Etoys. I'll let everyone know how it goes and post a how on the squeakland list.

Stpehen

On Fri, May 25, 2012 at 2:32 PM, Bert Freudenberg <[hidden email]> wrote:

Well, for one, all these values are fractions in the range 0 to 1.

If you use 0 in your example, the image will become fully transparent. If you use 1, it will be fully opaque.

Since 16 bit forms store only 1 bit of alpha (and 5 bits each for red, green, and blue), you cannot do more than toggle that bit.

If you want real translucency, create newForm with 32 bits of depth instead of 16. Then each component gets full 8 bits, and e.g. using an alpha of 0.5 will make the whole image half-transparent.

- Bert -

On 25.05.2012, at 20:23, Steve Thomas wrote:

<Screen Shot 2012-05-25 at 2.22.06 PM.png>
I tried setting alpha to 50, but it didn't work, see script below.

recolor
| oldForm newForm old new avg |
oldForm := ErnieRubberDuckie getGraphic.

newForm := Form extent: oldForm extent depth: 16.
0
to: oldForm height - 1

do: [:y | 0
to: oldForm width - 1
do: [:x |

old := oldForm colorAt: x @ y.
avg := old red + old green + old blue / 3.

new := Color
r: old red * 0 + avg
g: old green * 0 + avg

b: old blue * 0 + avg
alpha: 50.
newForm colorAt: x @ y put: new]].

self setGraphic: newForm

On Fri, May 25, 2012 at 7:59 AM, Bert Freudenberg <[hidden email]> wrote:

On 25.05.2012, at 12:35, Steve Thomas wrote:

How can I loop through each pixel in an image and get their red,green,blue values?
I also would like to be able to create a new image using those values (modified, for example set red=red*0.5)

I know Karl did a great project Color Reading And Writing which I could use, but would like to introduce some of the kids to squeak.

<PastedGraphic-10.png>

<PastedGraphic-11.png>

- Bert -

_______________________________________________
etoys-dev mailing list
[hidden email]
http://lists.squeakland.org/mailman/listinfo/etoys-dev

Bert Freudenberg

Re: How can I access the individual pixels in an image

On 25.05.2012, at 21:31, Steve Thomas wrote:

So that explains why the red, green, blue values go 0 to 100 instead of 0 to 255.

Partly. The interface is chosen to be independent of the internal representation. E.g. there are 5 or 8 bits per component in Forms, and 10 bits per component in a single Color. But externally, Squeak uses floating point values between 0 and 1 for all. For the Etoys interface, these are scaled by 100 to have an easier-to-use range.

- Bert -

The kids will have fun with this, I am going to try and get them to create some "green screen effects" using Etoys. I'll let everyone know how it goes and post a how on the squeakland list.

Stpehen

On Fri, May 25, 2012 at 2:32 PM, Bert Freudenberg <[hidden email]> wrote:

Well, for one, all these values are fractions in the range 0 to 1.

If you use 0 in your example, the image will become fully transparent. If you use 1, it will be fully opaque.

Since 16 bit forms store only 1 bit of alpha (and 5 bits each for red, green, and blue), you cannot do more than toggle that bit.

If you want real translucency, create newForm with 32 bits of depth instead of 16. Then each component gets full 8 bits, and e.g. using an alpha of 0.5 will make the whole image half-transparent.

- Bert -

_______________________________________________
etoys-dev mailing list
[hidden email]
http://lists.squeakland.org/mailman/listinfo/etoys-dev