Beautiful Gradients on Gideros

HubertRonald

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.

Apollo14

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)

antix

@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).

SinisterSoft

I think you can do gradients with the Pixel sprite already?

Apollo14

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

HubertRonald

@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.

Apollo14

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?

HubertRonald

@Apollo you can try it:

myPixel = Pixel.new(0x000000, 1, 300, 300) myPixel:setColor(0x8e44ad,1, 0xf1c40f,1) stage:addChild(myPixel)

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

HubertRonald

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)

if mesh would support matrix, it would easy fix texture scale and position on mesh.
somebody know how does scale texture without matrix?

keszegh

@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.

HubertRonald

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

keszegh

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

HubertRonald

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

keszegh

great

HubertRonald

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

HubertRonald

Hi folks!
Updated my script!
For more information, please read original post
Cheers!