Gradient paint background

Getting Started Newbie Questions
#1

I just put this code that I fount on this website for a gradient paint background :

local paint = { type = "gradient", color1 = { 1, 0, 0.4 }, color2 = { 1, 0, 0, 0.2 }, direction = "up" } local rect = display.newRect( 200, 200, 600, 700 ) rect.fill = paint screenGroup:insert(rect)

But nothing is changing can I get help ? also can I add more colors ?

#2

Changing?  I creates a gradient as expected.  You’re either not inserting it into the correct group or positioning it incorrectly.

Try just this in a blank main.lua file to prove to yourself it works, the look for the reason you’re not seeing it when you write it your way:

local paint = { type = "gradient", color1 = { 1, 0, 0.4 }, color2 = { 1, 0, 0, 0.2 }, direction = "up" } local rect = display.newRect( display.contentCenterX, display.contentCenterY, 600, 700 ) rect.fill = paint
#3

gradient.jpg

#4

Have you seen Instagram’s latest background on the register and sign in page ? That’s how I want it to look

#5

Nope.  Better post a screenshot. 

I found this, but I don’t know if that is what you mean:

instagram02.jpg

Regardless.  Corona gradients are TWO color only.  If you want some kind multi color sequence, you’ll need to make it in a art program OR use graphics 2.0 featuers: https://docs.coronalabs.com/guide/graphics/effects.html  Or code your own generator and plug that into Corona’s graphics pipeline.

#6

This seems to approximate the screenshot posted above:

-- == -- hexcolor( ) - converts hex color codes to rgba Graphics 2.0 value -- == local function hexcolor( code ) code = code and string.gsub( code , "#", "") or "FFFFFFFF" code = string.gsub( code , " ", "") local colors = {1,1,1,1} while code:len() \< 8 do code = code .. "F" end local r = tonumber( "0X" .. string.sub( code, 1, 2 ) ) local g = tonumber( "0X" .. string.sub( code, 3, 4 ) ) local b = tonumber( "0X" .. string.sub( code, 5, 6 ) ) local a = tonumber( "0X" .. string.sub( code, 7, 8 ) ) local colors = { r/255, g/255, b/255, a/255 } return colors end local sqrt2 = math.sqrt(2) local paint = { type = "gradient", color1 = hexcolor("#a336b7"), color2 = hexcolor("#f47935"), direction = "down" } local rect = display.newRect( display.contentCenterX, display.contentCenterY, display.actualContentWidth \* sqrt2, display.actualContentWidth \* sqrt2 ) rect.rotation = 45 rect.fill = paint

gradient_instagram.jpg

This can be further refined by changing the rotation, position, and size of rect.

#7

Just gotta think outside the box and it’s all possible with Corona.  That is why I love it.

#8

It’s like this :

http://crevisio.com/photo/ijIqOgkVb

But the colors move in a circular motion 

#9

That can be done, but you’ll have to be creative and probably use more than one gradient filled object combined.  Or, use a custom generator.

I’m out of time to help on this, but I assure you this is achievable.

Is this what you mean?

instagram_gradient_wallpaper_mac.jpg

#10

Do you know of any art generators I can use to accomplish this ?

#11

Try to find or make something here:

https://shader.coronalabs.com/#&{“vdata”:[0.9,0,0,0],“shader”:“ClBfQ09MT1IgdmVjNCBGcmFnbWVudEtlcm5lbCggUF9VViB2ZWMyIHRleENvb3JkICkKewoJUF9DT0xPUiB2ZWM0IHJldCA9IHZlYzQoCgkJdGV4Q29vcmQueCwKCQl0ZXhDb29yZC55LAoJCWFicyhzaW4oQ29yb25hVG90YWxUaW1lKSksCgkJMSk7CgogICAgcmV0dXJuIENvcm9uYUNvbG9yU2NhbGUocmV0KTsgICAgCn0K”}

Then read this article to learn to use it:

https://coronalabs.com/blog/2015/04/15/custom-shader-effects/

https://forums.coronalabs.com/topic/56284-share-your-shaders/

Or… pay someone to do it for you.

#12

I have directed the other two threads to this one. Please continue the conversation here.

Rob

#13

okay do you have an idea of what I am trying to do

#14

Keep in mind, these are “Community” forums. For advice on how to do things, advice from community developers like @roaminggammer is way more valuable to you than from me. I know Corona, the product well, but I don’t have all the experience that the community has in using Corona so I can’t add any more to the conversation that hasn’t already been said other than perhaps you should try looking at what’s going on and try to animate it by changing the values slowly over time.

Rob

#15

Yeah that’s my problem I don’t know how to slow the animations down 

#16

Updated to include a version that oscillates over time:

https://www.youtube.com/watch?v=hx2mUCmt0RM&feature=youtu.be

#17 
local kernel = require "kernel\_filter\_custom\_example" graphics.defineEffect( kernel ) -- Apply filter image.fill.effect = "filter.custom.example" -- image:setFillColor( 1, 0, 0 ) -- Filter parameter image.fill.effect.intensity = 1 transition.to( image.fill.effect, { intensity = 2, time = 9000, transition = easing.outExpo } )
#18

That’s my code and it still doesn’t work .

#19

Sorry, but that code doesn’t mean anything to me.  

What is in kernel_filter_custom_example? 

Your best way of getting help on this is to

  1. Summarize what you are trying to achieve (keep it clear, concise, and precise).

  2. Optionally provide a video link and/or an image link to similar effects.

  3. Make a (very) small example project showing what you’ve tried:

  • build.settings
  • config.lua
  • main.lua
  • kernel definition file

  1. Zip up (.zip, not .7 or .rar because .zip is pretty universal) the project.

  2. Share a link to that file here using dropbox or some other file sharing service.

  3. Ask for folks to look at your code and give input on what may be wrong.

I know this may seem extensive, but seeing just a little bit of your code in this context isn’t enough.  What you’re doing is semi-advanced and requires a high level of context to resolve/understand.

#20

I want my background to fade different colors slowly in da circular motion . Instagram has this background