Beautiful Gradients on Gideros

HubertRonald · December 2017

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 · 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)

antix · December 2017

@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 · December 2017

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

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

HubertRonald · 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.

Apollo14 · 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?

HubertRonald · December 2017

@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 · December 2017

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 · December 2017

@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 · December 2017

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 · December 2017

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

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

keszegh · December 2017

great

HubertRonald · December 2017

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 · January 2018

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

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Beautiful Gradients on Gideros

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Beautiful Gradients on Gideros

Comments