Changing the color of pictures?


Author
Message
ritvov
ritvov
Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)
Group: Forum Members
Posts: 3, Visits: 9
I'm running an experiment that presents stimuli that I've created externally in Illustrator. The stimuli are novel squiggly shapes. The main task is a color memory task, so I need the color of the shape to be able to changechange. I know that you can change the color of circles, squares, etc, but can you do this with jpg/pngs, etc? The image is just white and black, and I'd like to be able to select all the white (255 255 255) values and change them to some specified color. I see there is a "transparent color" attribute for pictures where you can select a certain color and make it transparent, but can you do a similar thing to select a color and change it?


Dave
Dave
Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)
Group: Administrators
Posts: 12K, Visits: 98K
ritvov - Sunday, June 17, 2018
I'm running an experiment that presents stimuli that I've created externally in Illustrator. The stimuli are novel squiggly shapes. The main task is a color memory task, so I need the color of the shape to be able to changechange. I know that you can change the color of circles, squares, etc, but can you do this with jpg/pngs, etc? The image is just white and black, and I'd like to be able to select all the white (255 255 255) values and change them to some specified color. I see there is a "transparent color" attribute for pictures where you can select a certain color and make it transparent, but can you do a similar thing to select a color and change it?


There is no way to change the color of pictures or replace colors on the fly. There is however a trick which might work: You can exploit PNGs transparency: I.e. make the "squiggly shape" not a solid color like black or white, but have it be transparent. Then you can display a <shape> behind the <picture> and manipulate that <shape>'s color as needed. The result should be that it looks as if the image changes color. I.e. something like this (attached):

<picture mypicture>
/ items = ("image.png")
/ size = (50%, 30%)
</picture>

<shape myshape>
/ shape = rectangle
/ size = (32%, 30%)
</shape>

<block myblock>
/ trials = [1-6 = mytrial]
</block>


<trial mytrial>
/ ontrialbegin = [
    shape.myshape.color = list.colors.nextvalue;
]
/ stimulusframes = [1=myshape, mypicture]
/ validresponse = (57)
</trial>

<list colors>
/ items = (red, green, blue, yellow, purple, orange, grey)
</list>


Attachments
image.png (546 views, 20.00 KB)
experiment.iqx (530 views, 450 bytes)
ritvov
ritvov
Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)
Group: Forum Members
Posts: 3, Visits: 9
Dave - Monday, June 18, 2018
ritvov - Sunday, June 17, 2018
I'm running an experiment that presents stimuli that I've created externally in Illustrator. The stimuli are novel squiggly shapes. The main task is a color memory task, so I need the color of the shape to be able to changechange. I know that you can change the color of circles, squares, etc, but can you do this with jpg/pngs, etc? The image is just white and black, and I'd like to be able to select all the white (255 255 255) values and change them to some specified color. I see there is a "transparent color" attribute for pictures where you can select a certain color and make it transparent, but can you do a similar thing to select a color and change it?


There is no way to change the color of pictures or replace colors on the fly. There is however a trick which might work: You can exploit PNGs transparency: I.e. make the "squiggly shape" not a solid color like black or white, but have it be transparent. Then you can display a <shape> behind the <picture> and manipulate that <shape>'s color as needed. The result should be that it looks as if the image changes color. I.e. something like this (attached):

<picture mypicture>
/ items = ("image.png")
/ size = (50%, 30%)
</picture>

<shape myshape>
/ shape = rectangle
/ size = (32%, 30%)
</shape>

<block myblock>
/ trials = [1-6 = mytrial]
</block>


<trial mytrial>
/ ontrialbegin = [
    shape.myshape.color = list.colors.nextvalue;
]
/ stimulusframes = [1=myshape, mypicture]
/ validresponse = (57)
</trial>

<list colors>
/ items = (red, green, blue, yellow, purple, orange, grey)
</list>


Thank you! This should work for me. 
ritvov
ritvov
Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)Associate Member (256 reputation)
Group: Forum Members
Posts: 3, Visits: 9
Dave - Monday, June 18, 2018
ritvov - Sunday, June 17, 2018
I'm running an experiment that presents stimuli that I've created externally in Illustrator. The stimuli are novel squiggly shapes. The main task is a color memory task, so I need the color of the shape to be able to changechange. I know that you can change the color of circles, squares, etc, but can you do this with jpg/pngs, etc? The image is just white and black, and I'd like to be able to select all the white (255 255 255) values and change them to some specified color. I see there is a "transparent color" attribute for pictures where you can select a certain color and make it transparent, but can you do a similar thing to select a color and change it?


There is no way to change the color of pictures or replace colors on the fly. There is however a trick which might work: You can exploit PNGs transparency: I.e. make the "squiggly shape" not a solid color like black or white, but have it be transparent. Then you can display a <shape> behind the <picture> and manipulate that <shape>'s color as needed. The result should be that it looks as if the image changes color. I.e. something like this (attached):

<picture mypicture>
/ items = ("image.png")
/ size = (50%, 30%)
</picture>

<shape myshape>
/ shape = rectangle
/ size = (32%, 30%)
</shape>

<block myblock>
/ trials = [1-6 = mytrial]
</block>


<trial mytrial>
/ ontrialbegin = [
    shape.myshape.color = list.colors.nextvalue;
]
/ stimulusframes = [1=myshape, mypicture]
/ validresponse = (57)
</trial>

<list colors>
/ items = (red, green, blue, yellow, purple, orange, grey)
</list>


Hi Dave, 

Thanks for your response, again. This leads me to some follow up questions. Essentially, on every trial I want to present a color wheel, and the participant clicks the point on the wheel that matches their memory for that item. When the cursor is over a color on the color wheel, the central image (or, with your workaround, the central square behind the transparent image) will take on that color-- otherwise the central image would be white (see attached).

So, my follow up questions are 1) Is there a way to continuously update the color of the central square within one trial, dependent on where the mouse is positioned? 2) How do I make it so it only changes color when the cursor is within the space of the color wheel? For #2, I know there is the "valid response" attribute for the trial, but I'm not sure how this would work for a space that is essentially a donut. Thank you again!


Dave
Dave
Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)Supreme Being (1M reputation)
Group: Administrators
Posts: 12K, Visits: 98K
ritvov - Monday, June 18, 2018
Dave - Monday, June 18, 2018
ritvov - Sunday, June 17, 2018
I'm running an experiment that presents stimuli that I've created externally in Illustrator. The stimuli are novel squiggly shapes. The main task is a color memory task, so I need the color of the shape to be able to changechange. I know that you can change the color of circles, squares, etc, but can you do this with jpg/pngs, etc? The image is just white and black, and I'd like to be able to select all the white (255 255 255) values and change them to some specified color. I see there is a "transparent color" attribute for pictures where you can select a certain color and make it transparent, but can you do a similar thing to select a color and change it?


There is no way to change the color of pictures or replace colors on the fly. There is however a trick which might work: You can exploit PNGs transparency: I.e. make the "squiggly shape" not a solid color like black or white, but have it be transparent. Then you can display a <shape> behind the <picture> and manipulate that <shape>'s color as needed. The result should be that it looks as if the image changes color. I.e. something like this (attached):

<picture mypicture>
/ items = ("image.png")
/ size = (50%, 30%)
</picture>

<shape myshape>
/ shape = rectangle
/ size = (32%, 30%)
</shape>

<block myblock>
/ trials = [1-6 = mytrial]
</block>


<trial mytrial>
/ ontrialbegin = [
    shape.myshape.color = list.colors.nextvalue;
]
/ stimulusframes = [1=myshape, mypicture]
/ validresponse = (57)
</trial>

<list colors>
/ items = (red, green, blue, yellow, purple, orange, grey)
</list>


Hi Dave, 

Thanks for your response, again. This leads me to some follow up questions. Essentially, on every trial I want to present a color wheel, and the participant clicks the point on the wheel that matches their memory for that item. When the cursor is over a color on the color wheel, the central image (or, with your workaround, the central square behind the transparent image) will take on that color-- otherwise the central image would be white (see attached).

So, my follow up questions are 1) Is there a way to continuously update the color of the central square within one trial, dependent on where the mouse is positioned? 2) How do I make it so it only changes color when the cursor is within the space of the color wheel? For #2, I know there is the "valid response" attribute for the trial, but I'm not sure how this would work for a space that is essentially a donut. Thank you again!


> 1) Is there a way to continuously update the color of the central square within one trial, dependent on where the mouse is positioned?

No. You would essentially continuously loop a trial, i.e. run multiple trials in a row, not a single one. This can, however, LOOK like a single trial that continuously updates the color to the participant.

> 2) How do I make it so it only changes color when the cursor is within the space of the color wheel?

You'd have to code some <expressions> that check where the cursor / mouse is located at the time of response (i.e. inside or outside the wheel) and then use /isvalidresponse logic in the <trial> to either accept or reject the response.

GO

Merge Selected

Merge into selected topic...



Merge into merge target...



Merge into a specific topic ID...




Reading This Topic

Explore
Messages
Mentions
Search