Problem with "splitscreen" in one window

Hello, i wanted to do the mandelbrot/julia set challenge from codingtrain that these two fractals are in one window and you can hover over the mandelbrot set and see the corresponding julia set next to it change (like he said in the video but sadly never did as far as i know). I used an own approach to map the coordinates with map(); and now i wanted to have the mandelbrot set on the left side and the julia set on the right side. But somehow i cant figure out how to change the coordinates of the julia set to be shown at the right side. (Also i know the mandelbrot set isn’t shown/ calculated right but that isnt so bad right now for me, i care more about splitting these two)

Here is my code so far:

public void settings() {
  fullScreen();
}
public void draw() {
  background(255);
  loadPixels();

  int maxit=100;
  float ca=map(mouseX, 0, width/2, -2, 2);
  float cb=map(mouseY, 0, height, -2, 2);

  //Mandelbrot set
  for (int x=0; x<width/2; x++) {
    for (int y=0; y<height; y++) {
      float a=map(x, 0, width/2, -2, 2);
      float b=map(y, 0, height, -2, 2);
      int n=0;
      while (n<maxit) {
        float aa=a*a;
        float bb=b*b;
        float ab2=2*(a*b);
        a=aa-bb+a;
        b=ab2+b;
        if (aa+bb>4) {
          break;
        }
        n++;
      }
      if (n == maxit) {
        pixels[x+y*width] = color(0);
      } else {
        float norm = map(n, 0, maxit, 0, 1);
        pixels[x+y*width] = color(map(sqrt(norm), 0, 1, 0, 255));
      }
    }
  }
  //Julia set
  for (int x=0; x<width/2; x++) {
    for (int y=0; y<height; y++) {
      float a=map(x, 0, width/2, -2, 2);
      float b=map(y, 0, height, -2, 2);
      int n=0;
      while (n<maxit) {
        float aa=a*a;
        float bb=b*b;
        float ab2=2*(a*b);
        a=aa-bb+ca;
        b=ab2+cb;
        if (aa+bb>4) {
          break;
        }
        n++;
      }
      if (n == maxit) {
        pixels[x+y*width] = color(0);
      } else {
        float norm = map(n, 0, maxit, 0, 1);
        pixels[x+y*width] = color(map(sqrt(norm), 0, 1, 0, 255));
      }
    }
  }

  updatePixels();
}
1 Like

try:

  //Mandelbrot set
//  for (int x=0; x<width/2; x++) {
  for (int x=width/2; x<width; x++) {
    for (int y=0; y<height; y++) {
//      float a=map(x, 0, width/2, -2, 2);
      float a=map(x, width/2,width, -2, 2);

2 Likes

Thank you for the help it worked. But now i have a problem with the coloring/ displaying the pixels of the julia set on the left side even when the mouse hovers over the mandelbrot set. I thought i could do it with if the problem now is that when i hover over the mandelbrot set the julia set isnt displayed on the left side instead it is layed over the mandelbrot side. I know it has to do something with the displaying process. I used the one codingtrain also used. So my question now is how can i just change one half of the screen with the following method? I want it to only affect the left side of the screen.

if (n == maxit) {
          pixels[x+y*width] = color(0);
        } else {
          float norm = map(n, 0, maxit, 0, 1);
          pixels[x+y*width] = color(map(sqrt(norm), 0, 1, 0, 255));
        }
1 Like

not sure what maxit does,
but first try at beginning of draw to detect where the mouse is:

boolean mix = false;
if ( mouseX > width/2 ) mix = true;

later if mix true julia use pixels[x+width/2, … instead pixels[x,…
and the later code writing to same pixel wins…

I wanted to display both times the julia set on the left side even if i hover over the right side of the screen (kinda like projecting the mouse movement on the right side onto the left side). So if i hover over the left side it is normal and it works as intended and displays it properly on the left side but when I hover over the right side it displays it on the right side and the left side is empty. I want it also to display it on the left side. Maybe my approach is wrong and there is a better way to do it?

Oh and int maxit is the maximum of the iterations the program does.

public void settings() {
  fullScreen();
}
public void draw() {
  background(0);
  loadPixels();

  int maxit=100;
  float ca=map(mouseX, 0, width/2, -2, 2);
  float cb=map(mouseY, 0, height, 2, -2);

  //Julia set
  if (mouseX<width/2) {
    for (int x=0; x<width/2; x++) {
      for (int y=0; y<height; y++) {
        float a=map(x, 0, width/2, -2, 2);
        float b=map(y, 0, height, 2, -2);
        int n=0;
        while (n<maxit) {
          float aa=a*a;
          float bb=b*b;
          float ab2=2*(a*b);
          a=aa-bb+ca;
          b=ab2+cb;
          if (aa+bb>4) {
            break;
          }
          n++;
        }
        if (n == maxit) {
          pixels[x+y*width] = color(0);
        } else {
          float norm = map(n, 0, maxit, 0, 1);
          pixels[x+y*width] = color(map(sqrt(norm), 0, 1, 0, 255));
        }
      }
    }
  } else {
    for (int x=width/2; x<width; x++) {
      for (int y=0; y<height; y++) {
        float a=map(x, width/2, width, -2, 2);
        float b=map(y, 0, height, 2, -2);
        int n=0;
        while (n<maxit) {
          float aa=a*a;
          float bb=b*b;
          float ab2=2*(a*b);
          a=aa-bb+ca;
          b=ab2+cb;
          if (aa+bb>4) {
            break;
          }
          n++;
        }
        if (n == maxit) {
          pixels[x+y*width] = color(0);
        } else {
          float norm = map(n, 0, maxit, 0, 1);
          pixels[x+y*width] = color(map(sqrt(norm), 0, 1, 0, 255));
        }
      }
    }
  }

  updatePixels();
}