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

p5.js Coding Questions
1

Hi everyone,

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

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

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.

2

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

  1. https://p5js.org/reference/#/p5/noLoop
  2. https://p5js.org/reference/#/p5/redraw
3

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

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.

4

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

  1. https://p5js.org/reference/#/p5/split
  2. https://p5js.org/reference/#/p5/splitTokens
5

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

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

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

Then I created two inputs

let inpRe;
let inpIm;

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

And I replaced them as follows

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.

6

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

Kf

7

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:

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

8

Hello everyone,

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

Thanks for your advice

1 Like