# Help with Neural Network Visualization Bug In Processing

**URL:** <https://discourse.processing.org/t/help-with-neural-network-visualization-bug-in-processing/44794>\
**Category:** Coding Questions\
**Created:** [July 22, 2024, 10:33am UTC](https://discourse.processing.org/t/help-with-neural-network-visualization-bug-in-processing/44794 "2024-07-22T10:33:14Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![winterchan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/winterchan/32/19921_2.png) [@winterchan](https://discourse.processing.org/u/winterchan)\
**Post date:** [July 22, 2024, 10:33am UTC](https://discourse.processing.org/t/help-with-neural-network-visualization-bug-in-processing/44794/1 "2024-07-22T10:33:14Z")

</div>

I’m currently working on a project using Processing where I’m implementing an Othello game with a genetic algorithm AI. The project consists of multiple files including `OthelloGame.pde`, `AIPlayer.pde`, `Button.pde`, `GraphWindow.pde`, `Matrix.pde`, and `NeuralNet.pde`. One of the features I’m trying to implement is a separate window for visualizing the neural network used by the AI.

**However, I’m encountering a persistent issue where the neural network visualization is rendered in the main game window instead of the separate window designated for it.**

[[Here’s my code]](https://github.com/winterchan2138/OTHELLO-AI-NEURAL-NETWORK-WORK-IN-PROGRESS-) **so you can try to check what causes the problem yourself.**

Full Disclosure: GPT 4o was used during the creation process

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/a/2ad732b84bd39f3ce30c6b30341fb014dbbbea01.jpeg)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 22, 2024, 11:28am UTC](https://discourse.processing.org/t/help-with-neural-network-visualization-bug-in-processing/44794/2 "2024-07-22T11:28:04Z")

</div>

Hello,

Please read:

> [@Guidelines—Asking Questions](https://discourse.processing.org/t/guidelines-asking-questions/2147):
>
> Summary (TL;DR) Ask complete questions to get better answers! Be specific. For example: I want to load an image. I tried using createImg() , and I expected the image to be on canvas, but what happened instead was the image showing up below the canvas. Isolate your problem and work in small steps. Share only the code directly related to your problem if it is part of a bigger project, and if something isn’t working, try the smallest code that could do the thing you want. Can we run your code to …

> [@winterchan](#):
>
> However, I’m encountering a persistent issue where the neural network visualization is rendered in the main game window instead of the separate window designated for it.

I suggest you work on a simple minimal example (without the neural network) to isolate this issue that can render (or attempt to) in two different windows; once you understand that you can then integrate additional code.

> [@winterchan](#):
>
> Full Disclosure: GPT 4o was used during the creation process

You should add this statement to your code.

`:)`

---

<div class="post-metadata">

**Author:** ![winterchan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/winterchan/32/19921_2.png) [@winterchan](https://discourse.processing.org/u/winterchan)\
**Post date:** [July 22, 2024, 12:19pm UTC](https://discourse.processing.org/t/help-with-neural-network-visualization-bug-in-processing/44794/3 "2024-07-22T12:19:38Z")

</div>

> [@glv](#):
>
> ``

Tried doing that, it seems as if the problem is related to the

NeuralNet.pde

```auto
class NeuralNet {
  int iNodes, hNodes, oNodes, hLayers;
  Matrix[] weights;

  NeuralNet(int input, int hidden, int output, int hiddenLayers) {
    iNodes = input;
    hNodes = hidden;
    oNodes = output;
    hLayers = hiddenLayers;

    weights = new Matrix[hLayers + 1];
    weights[0] = new Matrix(hNodes, iNodes + 1);
    for (int i = 1; i < hLayers; i++) {
      weights[i] = new Matrix(hNodes, hNodes + 1);
    }
    weights[weights.length - 1] = new Matrix(oNodes, hNodes + 1);

    for (Matrix w : weights) {
      w.randomize();
    }
  }

  void mutate(float mr) {
    for (Matrix w : weights) {
      w.mutate(mr);
    }
  }

  float[] output(float[] inputsArr) {
    Matrix inputs = weights[0].singleColumnMatrixFromArray(inputsArr);
    Matrix curr_bias = inputs.addBias();

    for (int i = 0; i < hLayers; i++) {
      Matrix hidden_ip = weights[i].dot(curr_bias);
      Matrix hidden_op = hidden_ip.activate();
      curr_bias = hidden_op.addBias();
    }

    Matrix output_ip = weights[weights.length - 1].dot(curr_bias);
    Matrix output = output_ip.activate();

    return output.toArray();
  }

  NeuralNet crossover(NeuralNet partner) {
    NeuralNet child = new NeuralNet(iNodes, hNodes, oNodes, hLayers);
    for (int i = 0; i < weights.length; i++) {
      child.weights[i] = weights[i].crossover(partner.weights[i]);
    }
    return child;
  }

  NeuralNet clone() {
    NeuralNet clone = new NeuralNet(iNodes, hNodes, oNodes, hLayers);
    for (int i = 0; i < weights.length; i++) {
      clone.weights[i] = weights[i].clone();
    }
    return clone;
  }

  void show(float x, float y, float w, float h, float[] vision, float[] decision) {
    float space = 5;
    float nSize = (h - (space * (iNodes - 2))) / iNodes;
    float nSpace = (w - (weights.length * nSize)) / weights.length;
    float hBuff = (h - (space * (hNodes - 1)) - (nSize * hNodes)) / 2;
    float oBuff = (h - (space * (oNodes - 1)) - (nSize * oNodes)) / 2;

    int lc = 0; // Layer Count

    // DRAW NODES
    for (int i = 0; i < iNodes; i++) { // DRAW INPUTS
      fill(vision[i] > 0 ? color(0, 255, 0) : color(255));
      stroke(0);
      ellipseMode(CORNER);
      ellipse(x, y + (i * (nSize + space)), nSize, nSize);
    }

    lc++;

    for (int a = 0; a < hLayers; a++) {
      for (int i = 0; i < hNodes; i++) { // DRAW HIDDEN
        fill(color(255));
        stroke(0);
        ellipseMode(CORNER);
        ellipse(x + (lc * nSize) + (lc * nSpace), y + hBuff + (i * (nSize + space)), nSize, nSize);
      }
      lc++;
    }

    for (int i = 0; i < oNodes; i++) { // DRAW OUTPUTS
      fill(decision[i] > 0 ? color(0, 255, 0) : color(255));
      stroke(0);
      ellipseMode(CORNER);
      ellipse(x + (lc * nSpace) + (lc * nSize), y + oBuff + (i * (nSize + space)), nSize, nSize);
    }

    lc = 1;

    // DRAW WEIGHTS
    for (int i = 0; i < weights[0].rows; i++) { // INPUT TO HIDDEN
      for (int j = 0; j < weights[0].cols - 1; j++) {
        if (weights[0].matrix[i][j] < 0) {
          stroke(255, 0, 0);
        } else {
          stroke(0, 0, 255);
        }
        line(x + nSize, y + (nSize / 2) + (j * (space + nSize)), x + nSize + nSpace, y + hBuff + (nSize / 2) + (i * (space + nSize)));
      }
    }

    lc++;

    for (int a = 1; a < hLayers; a++) {
      for (int i = 0; i < weights[a].rows; i++) { // HIDDEN TO HIDDEN
        for (int j = 0; j < weights[a].cols - 1; j++) {
          if (weights[a].matrix[i][j] < 0) {
            stroke(255, 0, 0);
          } else {
            stroke(0, 0, 255);
          }
          line(x + (lc * nSize) + ((lc - 1) * nSpace), y + hBuff + (nSize / 2) + (j * (space + nSize)), x + (lc * nSize) + (lc * nSpace), y + hBuff + (nSize / 2) + (i * (space + nSize)));
        }
      }
      lc++;
    }

    for (int i = 0; i < weights[weights.length - 1].rows; i++) { // HIDDEN TO OUTPUT
      for (int j = 0; j < weights[weights.length - 1].cols - 1; j++) {
        if (weights[weights.length - 1].matrix[i][j] < 0) {
          stroke(255, 0, 0);
        } else {
          stroke(0, 0, 255);
        }
        line(x + (lc * nSize) + ((lc - 1) * nSpace), y + hBuff + (nSize / 2) + (j * (space + nSize)), x + (lc * nSize) + (lc * nSpace), y + oBuff + (nSize / 2) + (i * (space + nSize)));
      }
    }
  }
}

```

or the

NeuralNetworkWindow

```auto
class NeuralNetworkWindow extends PApplet {
  OthelloGame parent;
  AIPlayer aiPlayer;

  NeuralNetworkWindow(OthelloGame parent, AIPlayer aiPlayer) {
    this.parent = parent;
    this.aiPlayer = aiPlayer;
  }

  public void settings() {
    size(800, 800);
    println("NeuralNetworkWindow settings initialized");
  }

  public void setup() {
    background(255);
    println("NeuralNetworkWindow setup completed");
  }

  public void draw() {
    background(255);
    drawNeuralNetwork();
    println("Neural network visualization drawn in NeuralNetworkWindow");
  }

  void drawNeuralNetwork() {
    float x = 50;
    float y = 50;
    float w = width - 100;
    float h = height - 100;
    float[] vision = new float[64]; // Example input data
    float[] decision = aiPlayer.brain.output(vision); // Example output data
    aiPlayer.brain.show(x, y, w, h, vision, decision);
  }

  void updateVisualization() {
    redraw();
    println("Neural network visualization updated in NeuralNetworkWindow");
  }
}

```

i’m not sure what but when i use this code it causes the glitch, i can’d find exactly why

---

<div class="post-metadata">

**Author:** ![ProcessingOrg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/processingorg/32/18341_2.png) [@ProcessingOrg](https://discourse.processing.org/u/ProcessingOrg)\
**Post date:** [July 23, 2024, 1:47pm UTC](https://discourse.processing.org/t/help-with-neural-network-visualization-bug-in-processing/44794/4 "2024-07-23T13:47:32Z")

</div>

Note: If you’re posting to multiple sites, please link between the crossposts so we can see what help you’ve already received. A simple message like “By the way, I’m also posting this on Stack Overflow. Here is a link to that post…” is enough. See [Asking Questions — Are you posting anywhere else?](https://discourse.processing.org/t/guidelines-asking-questions/2147#are-you-posting-anywhere-else-10).

➡ [r/processing: Need Help with Neural Network Visualization Bug In Processing](https://www.reddit.com/r/processing/comments/1e9auj1/need_help_with_neural_network_visualization_bug/)