# How can I use the input value as a variable with two arguments?

**URL:** <https://discourse.processing.org/t/how-can-i-use-the-input-value-as-a-variable-with-two-arguments/1623>\
**Category:** Coding Questions\
**Created:** [July 9, 2018, 1:12pm UTC](https://discourse.processing.org/t/how-can-i-use-the-input-value-as-a-variable-with-two-arguments/1623 "2018-07-09T13:12:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jcponce](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jcponce/32/709_2.png) [@jcponce](https://discourse.processing.org/u/jcponce)\
**Post date:** [July 9, 2018, 1:12pm UTC](https://discourse.processing.org/t/how-can-i-use-the-input-value-as-a-variable-with-two-arguments/1623/1 "2018-07-09T13:12:46Z")

</div>

Hi everyone,

I was able to plot complex functions using the method of domain coloring

[https://openprocessing.org/sketch/569018](https://openprocessing.org/sketch/569018)

and now I have been trying to add two inputs for changing the real and imaginary components of the function after clicking a button, but it seems I am doing something wrong

[https://openprocessing.org/sketch/569019](https://openprocessing.org/sketch/569019)

How can I use those inputs to update two variables each one with two arguments? Do I need to parse the text somehow?

Any help or advice would be appreciated. Thanks in advanced.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 9, 2018, 1:21pm UTC](https://discourse.processing.org/t/how-can-i-use-the-input-value-as-a-variable-with-two-arguments/1623/2 "2018-07-09T13:21:15Z")

</div>

Activate **noLoop()** in **setup()**. Then call **redraw()** from within your **createButton()**'s callback:

1. [https://p5js.org/reference/#/p5/noLoop](https://p5js.org/reference/#/p5/noLoop)
2. [https://p5js.org/reference/#/p5/redraw](https://p5js.org/reference/#/p5/redraw)

---

<div class="post-metadata">

**Author:** ![jcponce](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jcponce/32/709_2.png) [@jcponce](https://discourse.processing.org/u/jcponce)\
**Post date:** [July 10, 2018, 9:53am UTC](https://discourse.processing.org/t/how-can-i-use-the-input-value-as-a-variable-with-two-arguments/1623/3 "2018-07-10T09:53:31Z")

</div>

Hi GoToLoop,

Thanks for the advice. I read carefully the documentation about the redraw function and I tried to implemented in my code but it does not work.

[https://codepen.io/carlosponce/pen/zLYoPN](https://codepen.io/carlosponce/pen/zLYoPN)

I think my problem is that I don’t know how to parse the string in the input to read it as a variable with two arguments. Does that make sense?

Kind regards.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 11, 2018, 1:09am UTC](https://discourse.processing.org/t/how-can-i-use-the-input-value-as-a-variable-with-two-arguments/1623/4 "2018-07-11T01:09:01Z")

</div>

Why don’t you make 2 more inputs? 🤔  
In case you don’t, you’re gonna need **split()** or **splitTokens()**:

1. [https://p5js.org/reference/#/p5/split](https://p5js.org/reference/#/p5/split)
2. [https://p5js.org/reference/#/p5/splitTokens](https://p5js.org/reference/#/p5/splitTokens)

---

<div class="post-metadata">

**Author:** ![jcponce](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jcponce/32/709_2.png) [@jcponce](https://discourse.processing.org/u/jcponce)\
**Post date:** [July 11, 2018, 3:09am UTC](https://discourse.processing.org/t/how-can-i-use-the-input-value-as-a-variable-with-two-arguments/1623/5 "2018-07-11T03:09:01Z")

</div>

I already have two inputs. So, I have these two functions that I use within the draw function:

```auto
function Re(x, y){
  return x+y;
}

function Im(x, y){
  return x*y;
}

```

Then I created two inputs

```auto
let inpRe;
let inpIm;

function setup(){
  inpRe = createInput('x+y');
  inpIm = createInput('x*y');
}

```

And I replaced them as follows

```auto
function Re(x, y){
  return inpRe.value();
}

function Im(x, y){
  return inpIm.value();
}

```

with these new values I should be able to plot the same. But it does not work. Am I missing something?

Thanks for your help.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 11, 2018, 1:36pm UTC](https://discourse.processing.org/t/how-can-i-use-the-input-value-as-a-variable-with-two-arguments/1623/6 "2018-07-11T13:36:39Z")

</div>

> [@jcponce](#):
>
> function Re(x, y){ return inpRe.value(); }

Use `console.log(inRe.value());` to see what you are getting. Also, please show how you are using this function in your code?

Kf

---

<div class="post-metadata">

**Author:** ![jcponce](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jcponce/32/709_2.png) [@jcponce](https://discourse.processing.org/u/jcponce)\
**Post date:** [July 11, 2018, 9:49pm UTC](https://discourse.processing.org/t/how-can-i-use-the-input-value-as-a-variable-with-two-arguments/1623/7 "2018-07-11T21:49:47Z")

</div>

Hi kfrajer,

I used the console.log() as you suggested in the other forum. It shows the correct value, and the button also works fine.

My code is the following:

```auto
let lim = 2.5;

let button;

let inpRe;
let inpIm;

function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 360, 100, 100);
    noLoop();
    
    inpRe = createInput('x');
    inpIm = createInput('y');
    
    inpRe.position(60, 420);
    inpIm.position(60, 445);
    
    button = createButton('Submit');
    button.position(inpIm.x + inpIm.width+10, inpIm.y);
    button.mousePressed(redraw);
    
    realImput = createElement('h2', 'Re:');
    realImput.position(20, 395);
    
    imaginaryImput = createElement('h2', 'Im:');
    imaginaryImput.position(20, 420);
}

function Re(x, y){
    return inpRe.value(); // Here I had: x*x-y*y;
}

function Im(x, y){
    return inpIm.value(); // Here I had: x*y;
}

function draw() {

    loadPixels();
    
    for (let xp = 0; xp < width; xp++) {
        for (let yp = 0; yp < height; yp++) {
            let x, y;
            
            x = map(xp, 0, width, -lim, lim);
            y = map(yp, height, 0, -lim, lim);
            
            let z = new p5.Vector(0,0);
            
            let nextz = new p5.Vector();
            nextz.x = Re(,x, y); 
            nextz.y = Im(x, y); 
            
            z = new p5.Vector(z.x + nextz.x, z.y + nextz.y);
            
            let h = map(atan2(-z.y, -z.x), -PI, PI, 0, 360);
            let s = sqrt(abs( 3*sin( 2* PI * (log(sqrt( z.x*z.x + z.y*z.y ))/log(2) - floor( log(sqrt( z.x*z.x + z.y*z.y ))/log(2) )) )));
            let s2 = map(s, 0, 1, 0, 100);
            let b = sqrt(sqrt(abs( sin(2 * PI * z.y) * sin(2 * PI * z.x) )));
            let b2 = 0.5 * ((1 - s) + b + sqrt((1 - s - b) * (1 - s - b) + 0.01));
            let b3 = map(b2, 0, 1, 0, 100);
            
            set(xp, yp, color(h, s2, b3));
        }
    }
    updatePixels();
    
    console.log(inpRe.value());
}

```

Regards

---

<div class="post-metadata">

**Author:** ![jcponce](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jcponce/32/709_2.png) [@jcponce](https://discourse.processing.org/u/jcponce)\
**Post date:** [July 27, 2018, 4:29am UTC](https://discourse.processing.org/t/how-can-i-use-the-input-value-as-a-variable-with-two-arguments/1623/8 "2018-07-27T04:29:51Z")

</div>

Hello everyone,

I figured out. I just needed to add ‘eval()’ to the code.

Thanks for your advice