Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Beautiful Gradients on Gideros — Gideros Forum

Beautiful Gradients on Gideros

HubertRonaldHubertRonald Member
edited January 2018 in Code snippets
Hi folks!

I'm working on a script which you can test in this link:
https://github.com/HubertRonald/Gradient

It's still in alpha phase but I would like to collect your opinions and what things might be needed to extend it
Here a little code:
     local uiGradient = require "uiGradient"
 
	local g = uiGradient.new()
        local conf={}
        local.colors={0xdffffc, 0xbffffc, 0xdffffc}
        g:rectangle(conf) -- in this moment only this kind of shape
        stage:addChild(g)
Some results (see attach):

and yes this script also support texture. All gradients inspiration I took it was here:
https://uigradients.com/

Update uiGradient.lua
version 1.0.1 | dic.11.2017 | Texture Support (Scale, Anchor Point, Deform)

version 1.1.0 | ene.02.2018 | Radial Gradient, regular polygons, antialiasing mode**,
Shapes derivatives of regular polygons like circles,
donuts, ellipses, rectangles and so on.
Regular polygons with hole
Rotate only mesh
**/ This feature is only available for mesh without texture and with this latter but the colours must be available.


image
+1 -1 (+3 / -0 )Share on Facebook

Comments

  • Apollo14Apollo14 Member
    edited December 2017
    Hi Hubert! Gradients look awesome!
    I wish we had more libraries like this with different beautiful effects for Gideros.

    For some reason I got unknown errors few times from the start. Then I pushed Gideros "play" button few times more, and after like fifth try app started without errors (I'm using 2017.11.0 version)
    GradientsError.png
    1126 x 1009 - 43K
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • @HubertRonald, nice one. I really should look at meshes one of these days :)

    @Apollo14 did it give any error message at all or just not start? Personally I have found that sometimes the player just seems to never start the program also (with other code, not just this).
  • I think you can do gradients with the Pixel sprite already?

    Likes: Apollo14

    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
    +1 -1 (+1 / -0 )Share on Facebook
  • Apollo14Apollo14 Member
    edited December 2017
    @Apollo14 did it give any error message at all or just not start? Personally I have found that sometimes the player just seems to never start the program also (with other code, not just this).
    application started playing, displaying only white screen
    logged "progress 0 of 0", "error", "Uploading finished" as on screenshot
    I've tried to restart Gideros, error never appeared again.
    So it doesn't seem to be a problem. Probably some temporary lag.
    I think you can do gradients with the Pixel sprite already?
    This is interesting. Can you please provide a quick code example? Thanks!!

    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • HubertRonaldHubertRonald Member
    edited December 2017
    @Apollo14 yes the idea is extend it

    When I'll get some time I'm going to make regular polygons here some approximation of my mind:
        2---3 
      / \   / \
    7 --- 1 --- 4
      \ /   \ /
        6---5
     
    -- six triangules
            ------------
            Index Array:
    	------------
    	1	2	3
    	1	3	4
    	and so on...
    @SinisterSoft I've got this message when I used pixel "uiGradient.lua:114: bad argument #1 to 'setTexture' (TextureBase expected, got table)" here is the piece of the code:
     --texture
    	if #self.conf.texture>0 then
    		local d = conf.dimension
    		local img=Texture.new(unpack(self.conf.texture))
    		local w,h=img:getWidth(),img:getHeight()
     
    		if next(self.conf.textureArrayCoordinates)== nil then
     
    			--matrix doesn't work
    			--local matrix = Matrix.new(unpack(conf.matrix))
    			--matrix:scale(.3,.3)
    			--self.conf.texture[#self.conf.texture+1]=matrix
     
    			--like a box
    			self.conf.textureArrayCoordinates = {0,	0,
    							min(w,d[1]),	0,
    							0, 		min(h,d[2]),
    							min(w,d[1]), min(h,d[2]),
    								}
    		end
    		local p = Pixel.new(img, min(w,d[1]), min(h,d[2]), 1, 1, 0, 0)
    		self.mesh:setTexture(p) --self.mesh:setTexture(img)
    		self.mesh:setTextureCoordinateArray(self.conf.textureArrayCoordinates)
    	end
    maybe I can be missing something.. in addition Also I've thought integrate it with Blur (example of gideros) overall if you want to design social or business app

    @antix you're welcome... I would like to achieve that the figures are also antialiasing and above all to get the famous "dp" that are included in the google guides on material design .. simulate that kind of shadows is what I dream of.

  • Apollo14Apollo14 Member
    edited December 2017
    I think you can do gradients with the Pixel sprite already?
    I've tried to play with different colors creating Pixel, but can't get any aesthetic result. :(
    myPixel = Pixel.new(0x8e44ad, 1, 300, 300)
    myPixel:setColor(0xf1c40f, 1, 0x000000, 1)
    stage:addChild(myPixel)
    Here I wanted to get clear yellow color & clear black color.
    But in this created Pixel yellow color is not yellow at all. It's pretty dirty :(
    How to make gradient colors clear, like in attached image?
    gradient.jpg
    480 x 270 - 6K
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • HubertRonaldHubertRonald Member
    edited December 2017
    @Apollo you can try it:
        myPixel = Pixel.new(0x000000, 1, 300, 300)
       myPixel:setColor(0x8e44ad,1, 0xf1c40f,1)
       stage:addChild(myPixel)
    image

    ok but if you use texture
    myPixel:setTexture(Texture.new("pexels-photo-89432.png"))
    your canvas is black... on the other hand in theory uiGradient support more than 4 colors viz if you need make a rainbow
    Captura de pantalla 2017-12-09 a la(s) 11.03.21 a. m..png
    302 x 301 - 6K

    Likes: antix

    +1 -1 (+1 / -0 )Share on Facebook
  • Here another little sample
    local uiGradient = require "uiGradient"
    local g = uiGradient.new()
    local conf={
    			color = {0xee4035, 0xf37736, 0xfdf498, 0x7bc043, 0x0392cf},
    			anchor = {0, 0},				
    			dimension = {_WD,_HD},
    			position = {0,0},
    			texture = {"pexels-photo-89432.png",true},
    			matrix = {1, 0, 0, 1, 250, 500} -- matrix no support
    			}
    g:rectangle(conf)
    stage:addChild(g)
    image

    if mesh would support matrix, it would easy fix texture scale and position on mesh.
    somebody know how does scale texture without matrix?
  • @HubertRonald, you can set for each mesh vertex the texture position and it will scale accordingly the texture. see http://docs.giderosmobile.com/reference/gideros/Mesh/setTextureCoordinate#Mesh:setTextureCoordinate
    i hope that's what you wanted, i think it is actually simpler then a transformation matrix would be.

    Likes: antix

    +1 -1 (+1 / -0 )Share on Facebook
  • thank for your reply @keszegh
    In fact, I use reciprocal method
    local textureCoodinates={0, 0, 100, 0, 0, 100}
    Mesh:setTextureCoordinateArray(unpack(textureCoordinates))
    When define anchor point for the texture all fine (still i don't upload this feature at github) the problem is when your texture is more big or small than mesh in that sense I need to scale texture so everything is fine. This feature might be used for example in this case and in many other of course

    via GIPHY

  • instead of 100 you could set texture:getWidth() and texture:getHeight(), this would scale the texture onto the mesh.

    Likes: HubertRonald

    +1 -1 (+1 / -0 )Share on Facebook
  • HubertRonaldHubertRonald Member
    edited December 2017
    Excellent advice!!! @keszegh I believe I go it!!!

    I was making it:
    TextureVertexArray = MeshVertexArray
    I can start with the coding and extend the functionality of my script before uploading it to the github Thanks!!

    Likes: antix

    +1 -1 (+1 / -0 )Share on Facebook
  • Now it supports anchor point and scale for texture here a sample:
    local uiGradient = require "uiGradient"
    local g = uiGradient.new()
    local conf={
    	color = {0xee4035, 0xf37736, 0xfdf498, 0x7bc043, 0x0392cf},
    	--alpha = {.5, .7, .3, .2, .4}, --effect fog
    	anchor = {0, 0},				
    	dimension = {_HD,_WD},
    	position = {0,0},
    	texture = {"pexels-photo-89432.png",true},
    	anchorTexture={.5,.5},
    	scaleTexture = {0,0},	-- sX,sY calculate for you scale perfect when deform is false
    	deform = false
    			}
    g:rectangle(conf)
    stage:addChild(g)
    Update Original Post


    image
    big_rainbow.png
    480 x 320 - 266K
    big_fog.png
    480 x 319 - 204K
    +1 -1 (+4 / -0 )Share on Facebook
  • Hi folks!
    Updated my script!
    For more information, please read original post
    Cheers!

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.