The Roomalzyr is our prizewinning business app that makes use of the newest Graphics 2.0 functionality in Corona SDK. In this blogpost, I’m going to provide a code snippet that shows you how to upload a photo into a snapshot which functions as a mask, and apply filters to brushes to “paint” the photo.
Create your paint chips using ColourLovers.com data:
First, I have imported a series of paint colors from a palette that was previously created on ColourLovers.com, as specified by the user’s settings pane.
network.request("http://www.colourlovers.com/api/colors/top?keywords="..palette.."&lover="..lover.."&numResults=5&format=json", "POST", listener)
I have parsed the data coming back from ColourLovers to their red, green, and blue values and use those values to fill up the brushes, which are either a circle or a square with various attributes such as alpha, width, and height:
--get the response from ColourLovers and parse it jsonTable = json.decode(response) local increment = 1 for i=1,#jsonTable do increment = increment+30 local c = "chip"..i c = display.newRect( 0+increment, y+100, 20, 20 ) c:setFillColor( jsonTable[i].rgb.red/255, jsonTable[i].rgb.green/255, jsonTable[i].rgb.blue/255 ) c.red = jsonTable[i].rgb.red/255 c.green = jsonTable[i].rgb.green/255 c.blue = jsonTable[i].rgb.blue/255 c:addEventListener( "touch", pickColor ) if c ~= nil then self.view:insert(c) end end
Upload a photo and place it into a snapshot:
I also have uploaded a photo of a room into a snapshot that I have created earlier to house it:
local photo = event.target local photoGroup = display.newGroup() photoGroup:insert(photo) mySnap = display.newSnapshot( display.contentWidth-20, display.contentHeight-110 ) mySnap.x = display.contentCenterX mySnap.y = display.contentCenterY-50 local snapshotGroup = mySnap.group snapshotGroup:insert( photoGroup )
I then add a paintListener to the touch event of mySnap:
mySnap:addEventListener( "touch", paintlistener )
Create paint chips with pretty effects
I load up several chips at the bottom of the screen to paint with. Each of these chips uses a Graphics 2.0 filter and has a touch listener to set the effect designated to the paint tool:
spongeChip = display.newImageRect( "images/brush.png",0,0) spongeChip.name="sponge" spongeChip.effect="filter.crystallize" spongeChip.x=squareChip.x+30 spongeChip.y=squareChip.y spongeChip.width=30 spongeChip.height=30 spongeChip.fill.effect = "filter.crystallize" spongeChip.fill.effect.numTiles =10 spongeChip:setFillColor(0,0,0) spongeChip.alpha=.5 spongeChip:addEventListener( "touch", setEffect )
The setEffect function tells the brush what effect to use to paint:
local function setEffect(event) if event.phase == "ended" then effect=event.target.effect end end
Now we are ready to paint using the colors of the ColourLovers swatches with some filters applied into the snapshot where the photo is housed. Remember we set a touch listener to this paintlistener function so whenever you touch the photo in the snapshot, you’ll start to paint. The snapshot acts as a mask so that you don’t paint all over the screen, only on the room picture.
function paintlistener( event ) local x,y = event.x - mySnap.x, event.y - mySnap.y if ( event.phase == "began" or event.phase == "moved" ) then --if the brush we chose in our settings tray is a circle if circle == true then brush = display.newImage( "images/circle_brush.png", x, y ) else brush = display.newImage( "images/brush.png", x, y ) end brush:setFillColor( red,green,blue ) --play with effects brush.fill.effect=effect --set the alpha brush.alpha=wash brush.width=size brush.height=size mySnap.canvas:insert( brush ) mySnap:invalidate( "canvas" ) end end
I hope this gives you a little idea of what is going on behind the scenes with the Roomalyzr. I am hoping to release this app soon with many improvements so you can create beautiful spaces of your own!
Here’s the video of the process:
Like my tutorials? You’ll love my apps. Please download, rate and review!