Get a number with the same ratio

ilan

Expert
Licensed User
hi,

let say you would like to fill an ellipse with a color. the color should be related to the x position of the mouse.

like if x is 0 the color should be black...
but what would happen if your canvas size is bigger then 255 ?? you will probably get an error.

so what you need to do is get a number with the same ratio as the coordinate u want to use but that will fit your needs.

EXAMPLE:

Canvas = 0 to 640 (width/x axis)
Color = 0 to 255

now according to my x position in that canvas i would like to get a number between 0 and 255

so we could use this function:

B4X:
Sub mapping(var As Float, min_real As Float, max_real As Float, min_scaled As Float, max_scaled As Float) As Float
    Return (var * ((max_scaled-min_scaled) / (max_real-min_real))) + min_scaled
End Sub
we put the X position and the space from minimum to maximum of that x position (= canvas size) and the limits from the new minimum and maximum range we would like to get.

like:

B4X:
#Region  Project Attributes
    #MainFormWidth: 600
    #MainFormHeight: 400
#End Region

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Dim c As Canvas
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.SetFormStyle("UNIFIED")
    MainForm.Show
    c.Initialize("c")
    MainForm.RootPane.AddNode(c,0,0,MainForm.RootPane.Width,MainForm.RootPane.Height)
End Sub

Sub mapping(var As Float, min_real As Float, max_real As Float, min_scaled As Float, max_scaled As Float) As Float
    Return (var * ((max_scaled-min_scaled) / (max_real-min_real))) + min_scaled
End Sub   

Sub MainForm_MouseMoved (EventData As MouseEvent)
    c.ClearRect(0,0,c.Width,c.Height)
    c.DrawCircle(c.Width/2,c.Height/2,mapping(EventData.X,0,c.Width,50,100),fx.Colors.RGB(255,mapping(EventData.X,0,c.Width,0,255),0),True,1)
End Sub
what we do here is we draw an ellipse that's size is between 50 and 100 and fill it with a color between 0 and 255. even if we use our x coordinate we can still get the number we need with the same ratio.

this is very useful if you need to get a number in a specific range but would like to use a bigger range as the reference (like mouse coordinates, slider (0-100), progressbar (0-100),...)

i dont know if such function already exists in b4x, i just saw it in another coding language and came with that function in b4j.

regards, ilan
 

Attachments

sorex

Expert
Licensed User
why don't you just use percentage math?

B4X:
col=(mouseX/100%x)*256
size=50+(mouseX/100%x)*50
Edit: my size method seems to be the same as your function, I justed swapped adder & multipliers.
 
Last edited:

ilan

Expert
Licensed User
why don't you just use percentage math?

B4X:
col=(mouseX/100%x)*256
size=50+(mouseX/100%x)*50
Edit: my size method seems to be the same as your function, I justed swapped adder & multipliers.
you should read the thread before you answer to it
 

sorex

Expert
Licensed User
I did, I first replied with the color line as I thought it was the same for the size.

I ran the jar and noticed the circle didn't size to 0 that's why I added the size line after that.
 
Top