Code Walkthrough – Graphics 2.0 Snapshots and Filters in the Roomalyzr

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 paint!

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!

Leave a Reply