# Matrix multiplication issue

**URL:** https://discourse.processing.org/t/matrix-multiplication-issue/20622
**Category:** Coding Questions
**Tags:** homework
**Created:** [May 8, 2020, 10:01am UTC](https://discourse.processing.org/t/matrix-multiplication-issue/20622 "2020-05-08T10:01:47Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![some](https://avatars.discourse-cdn.com/v4/letter/s/8baadc/32.png) [@some](https://discourse.processing.org/u/some)
#### Post date: [May 8, 2020, 10:01am UTC](https://discourse.processing.org/t/matrix-multiplication-issue/20622/1 "2020-05-08T10:01:47Z")

</div>

Hi i tried to perform matrix multiplication for 2d rotation.

I expected result that points will rotate in place, but instead i got flicker and movement outside screen.

Here is the source code:

```auto
float angle=10;
PVector[] points = new PVector[4];
float[][] rotationXY = {
  {cos(angle),-sin(angle)},
  {sin(angle),cos(angle)}
};
void setup(){
  size(800,600);
  frameRate(60);
  int x=width/2,y=height/2,w=60,h=30;
  points[0]=new PVector(x,y);
  points[1]=new PVector(x+w,y);
  points[2]=new PVector(x+w,y+h);
  points[3]=new PVector(x,y+h);
  
}
void drawPoints(PVector[] point,color col){
  strokeWeight(10);
  stroke(col);
  for(PVector v : point){
    point(v.x,v.y);
  }
}
void draw(){
  background(0);
  connect();
  for(int i=0;i<points.length;i++)points[i]=pos(points[i]);
  drawPoints(points,color(255));
}
void keyPressed(){
  if(key == 'd')angle+=1;
  if(key == 'a')angle-=1;
}
PVector pos(PVector pins){
  float[][] result;
  float[][] poins={
    {pins.x},
    {pins.y}
  };
  result = matmul(rotationXY,poins);
  PVector ret = new PVector(result[0][0],result[1][0]);
  return ret;
}
float[][] matmul(float[][] a, float[][] b){
    int colsA = a[0].length;
    int rowsA = a.length;
    int colsB = b[0].length;
    int rowsB = b.length;
    
    if(colsA != rowsB){
      println("collumns of A must match rows of B");
      return null;
    }
    float result[][] = new float[rowsA][colsB];
    
    for(int i=0;i<rowsA; i++){
      for (int j=0;j<colsB;j++){
        float sum=0;
        for(int k = 0;k<rowsB;k++){
          sum += a[i][k] * b[k][j];
        }
        result[i][j] = sum;
      }
    }
    
    return result;
  }
void connect(){
  strokeWeight(3);
  line(points[0].x,points[0].y,points[1].x,points[1].y);
  line(points[1].x,points[1].y,points[2].x,points[2].y);
  line(points[2].x,points[2].y,points[3].x,points[3].y);
  line(points[3].x,points[3].y,points[0].x,points[0].y);
}

```

Please help.

---

<div class="post-metadata">

### Author: ![Trilobyte](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/trilobyte/32/361_2.png) [@Trilobyte](https://discourse.processing.org/u/Trilobyte)
#### Post date: [May 15, 2020, 4:42pm UTC](https://discourse.processing.org/t/matrix-multiplication-issue/20622/2 "2020-05-15T16:42:29Z")

</div>

Hi Some,  
I’m not quite sure about how the rules regarding homework work (I haven’t been on this forum in a long time) but I would think that we can’t give direct answers. Here are a few things to investigate and keep in mind, though!  
Check out the Translate() function in Processing ([here](https://processing.org/tutorials/transform2d/))  
You got the transformation right, as far as I can tell, but you’ve got a slight issue where you’re drawing the rectangle and the point around which you are rotating the rectangle. This is what causes it to fly around the screen.  
Also, as for the flickering- the draw function loops, so the rectangle is being rotated every time it loops. Try implementing a function that rotates the rectangle on a [mouse click](https://processing.org/reference/mouseClicked_.html) or a button press. Good luck!

- T.

---

<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: [May 15, 2020, 8:25pm UTC](https://discourse.processing.org/t/matrix-multiplication-issue/20622/3 "2020-05-15T20:25:29Z")

</div>

Hello,

Use only radians!

TAU radians is equal to 360 deg  
TWO\_PI is equal to 360 deg.

[https://processing.org/reference/TAU.html](https://processing.org/reference/TAU.html)

To get you started try this in your existing code:

```auto
float angle = TAU/360; 
boolean state = false;

  if (state)
    {
    for (int i=0; i<points.length; i++) points[i]=pos(points[i]);
    state = false;
    }

void keyPressed()
  {
  //if (key == 'd') angle += +TAU/360;
  //if (key == 'a') angle -= -TAU/360;
  state = true;
  }

void keyReleased()
  {
  state = false;
  }

```

Changing the angle in your keyPressed will have no effect in your code because you defined this array at the start of your code:

```auto
float angle = 10;

float[][] rotationXY = {
  {cos(angle), -sin(angle)}, 
  {sin(angle), cos(angle)}
  };

```

The angle variable won’t change after that! Try calling the function in draw.

I leave the rest with you.

`:)`

---

<div class="post-metadata">

### Author: ![some](https://avatars.discourse-cdn.com/v4/letter/s/8baadc/32.png) [@some](https://discourse.processing.org/u/some)
#### Post date: [May 16, 2020, 7:39pm UTC](https://discourse.processing.org/t/matrix-multiplication-issue/20622/4 "2020-05-16T19:39:36Z")

</div>

Thanks. I appreciate your help.