Get a number with the same ratio

Discussion in 'Teaching Programming with B4X' started by ilan, Jul 28, 2016.

  1. ilan

    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:

    Code:
    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:

    Code:
    #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
     

    Attached Files:

  2. sorex

    sorex Expert Licensed User

    why don't you just use percentage math?

    Code:
    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: Jul 29, 2016
  3. ilan

    ilan Expert Licensed User

    you should read the thread before you answer to it
     
  4. sorex

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