# Error moving object (using quad())

**URL:** <https://discourse.processing.org/t/error-moving-object-using-quad/42067>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [May 25, 2023, 6:49am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067 "2023-05-25T06:49:38Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![kenkt](https://avatars.discourse-cdn.com/v4/letter/k/35a633/32.png) [@kenkt](https://discourse.processing.org/u/kenkt)\
**Post date:** [May 25, 2023, 6:49am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/1 "2023-05-25T06:49:39Z")

</div>

I want this object moving by mouse x and mouse y, but this code error. anybody, can help me?

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/0/302e55e9ef01ca4fbc0ac9e8f31ae1944d4143e0.png)

That’s my code:

```auto

void setup() {
size (700,700);
}

void draw() {
background(255);
quad(mouseX+1,mouseY-5,mouseX+75,mouseY+70,mouseX+10+mouseY+80,mouseX+1,mouseY+85);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 25, 2023, 7:42am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/2 "2023-05-25T07:42:42Z")

</div>

```auto
size (700,700);
background(255);

quad( mouseX+1,mouseY-5,
  mouseX+75,mouseY+70,
  mouseX+10+mouseY+80,mouseX+1,
  mouseY+85, ...... );

```

I think that’s because you pass 7 parameters instead of 8

Please add one parameter

I like to place line breaks between parameters so you can see the 4 pairs directly

(that you pass int instead of float is not the problem I guess, I am not on my computer right now and can’t test it though)

---

<div class="post-metadata">

**Author:** ![kenkt](https://avatars.discourse-cdn.com/v4/letter/k/35a633/32.png) [@kenkt](https://discourse.processing.org/u/kenkt)\
**Post date:** [May 25, 2023, 8:04am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/3 "2023-05-25T08:04:26Z")

</div>

What is parameter? Sorry, I don’t know 🥲 and dots at the end should be filled?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 25, 2023, 8:19am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/4 "2023-05-25T08:19:08Z")

</div>

Yeah, the 8 entries you pass to the function quad  
are the parameters

The dots represent the 8th parameter

Parameters are separated by comma ,

The dots shall be filled, try mouseX

---

<div class="post-metadata">

**Author:** ![kenkt](https://avatars.discourse-cdn.com/v4/letter/k/35a633/32.png) [@kenkt](https://discourse.processing.org/u/kenkt)\
**Post date:** [May 25, 2023, 8:31am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/5 "2023-05-25T08:31:18Z")

</div>

Thanks for the explanation, it worked! And, how to keep the shape from changing? because after I try, the shape changes  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/5/c579cc5ab9cce2ababd7a4bebaa18b1f5213b1ee.png)  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/3/231791f642b7754029dadcf6fd5d89aac72b42a9.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 25, 2023, 8:39am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/6 "2023-05-25T08:39:57Z")

</div>

The shape changes 60 times per second when you move the mouse

There are different ways to change this

For example you store your parameters  
in variables or a list when you press a mouse button

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 25, 2023, 9:17am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/7 "2023-05-25T09:17:36Z")

</div>

You can also say

if(mousePressed)  
noLoop();

if(keyPressed)  
loop();

Both in draw() function

---

<div class="post-metadata">

**Author:** ![kenkt](https://avatars.discourse-cdn.com/v4/letter/k/35a633/32.png) [@kenkt](https://discourse.processing.org/u/kenkt)\
**Post date:** [May 25, 2023, 10:04am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/9 "2023-05-25T10:04:48Z")

</div>

Oh I see, thanks a lot! I will try it

---

<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 25, 2023, 10:05am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/10 "2023-05-25T10:05:03Z")

</div>

> [@kenkt](#):
>
> What is parameter? Sorry, I don’t know 🥲

Hello @kenkt ,

There are resources here:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

One example:

> **[quad() / Reference](https://processing.org/reference/quad_.html)**
>
> A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the fir…

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 25, 2023, 12:06pm UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/11 "2023-05-25T12:06:56Z")

</div>

you can use a **list of floats** :

```auto
float[] list = new float[8];

void setup() {
  size (700, 700);
}

void draw() {
  background(255);

  list = new float[8];

  list[0]=mouseX+1;
  list[1]=mouseY-5;

  list[2]=mouseX+75;
  list[3]=mouseY+70;

  list[4]=mouseX+10+mouseY+80;
  list[5]=mouseX+1;

  list[6]=mouseY+85;
  list[7]=mouseX;

  drawQuad(list);
}

void drawQuad(float[] list_) {
  quad(list[0], list[1],
    list[2], list[3],
    list[4], list[5],
    list[6], list[7]
    );
}

```

**Let’s put the storing in a function too**

```auto

float[] list = new float[8];

void setup() {
  size (700, 700);
}

void draw() {
  background(255);

  storeQuad();
  drawQuad(list);
}

// ---------------------------------------------------------

void storeQuad() {

  list[0]=mouseX+1;
  list[1]=mouseY-5;

  list[2]=mouseX+75;
  list[3]=mouseY+70;

  list[4]=mouseX+10+mouseY+80;
  list[5]=mouseX+1;

  list[6]=mouseY+85;
  list[7]=mouseX;
}

void drawQuad(float[] list_) {
  quad(list[0], list[1],
    list[2], list[3],
    list[4], list[5],
    list[6], list[7]
    );
}

```

**Next version**

You can store forms/quads in a list on mouse click

- here you can display multiple forms:

```auto
float[] list = new float[8];

// Two parallel ArrayLists
ArrayList<float[]> listOfQuads = new ArrayList();
ArrayList<Integer> listOfColors = new ArrayList(); // for Color 

void setup() {
  size (700, 700);
}

void draw() {
  background(255);

  int i=0;
  for (float[] floatList : listOfQuads) {
    fill(listOfColors.get(i));
    drawQuad(floatList);
    i++;
  }//for

  noFill();
  storeQuad();
  drawQuad(list);
}//func

// ---------------------------------------------------------

void mousePressed() {
  listOfQuads.add(copyList(list));
  listOfColors.add(color(random(255), 0, 0));
}

float[] copyList(float[] list_) {
  float[] l1=new float [8];

  int i=0;
  for (float floatValue : list_) {
    l1[i]=floatValue;
    i++;
  }
  return l1;
}

void storeQuad() {
  list[0]=mouseX+1;
  list[1]=mouseY-5;

  list[2]=mouseX+75;
  list[3]=mouseY+70;

  list[4]=mouseX+10+mouseY+80;
  list[5]=mouseX+1;

  list[6]=mouseY+85;
  list[7]=mouseX;
}

void drawQuad(float[] list_) {
  quad(list_[0], list_[1],
    list_[2], list_[3],
    list_[4], list_[5],
    list_[6], list_[7]
    );
}

```

**Code a bit simplified**

```auto

// draws quads according to mouse pos; click mouse to store the current quad.

float[] list = new float[8];

// Two parallel ArrayLists
ArrayList<float[]> listOfQuads = new ArrayList();
ArrayList<Integer> listOfColors = new ArrayList(); // for Color 

// ---------------------------------------------------------

void setup() {
  size (700, 700);
}

void draw() {
  background(255);

  // draw old quads
  drawExistingQuads();

  // the current quad
  noFill();
  storeQuad();
  drawQuad(list);
}//func

// ---------------------------------------------------------

void mousePressed() {
  // store current quad
  listOfQuads.add(list.clone()); // using clone() here
  listOfColors.add(color(random(255), 0, 0));
}

// ---------------------------------------------------------

void drawExistingQuads() {
  // draw old quads
  int i=0;
  for (float[] floatList : listOfQuads) {
    fill(listOfColors.get(i));
    drawQuad(floatList);
    i++;
  }//for
}//func

void storeQuad() {
  // current quad
  list[0]=mouseX+1;
  list[1]=mouseY-5;

  list[2]=mouseX+75;
  list[3]=mouseY+70;

  list[4]=mouseX+10+mouseY+80;
  list[5]=mouseX+1;

  list[6]=mouseY+85;
  list[7]=mouseX;
}

void drawQuad(float[] list_) {
  // draw the quad indicated by list_
  quad(
    list_[0], list_[1],
    list_[2], list_[3],
    list_[4], list_[5],
    list_[6], list_[7]
    );
}
//

```

**Minor changes**

```auto

// draws quads according to mouse pos; click mouse to store the current quad.

// the current quad
float[] list = new float[8];

// Two parallel ArrayLists store the quad
ArrayList<float[]> listOfQuads = new ArrayList();
ArrayList<Integer> listOfColors = new ArrayList();

// ---------------------------------------------------------

void setup() {
  size (700, 700);
}//func

void draw() {
  background(255);

  // draw old quads
  drawExistingQuads();

  // the current quad
  noFill();
  storeQuad(list);
  drawQuad(list);
}//func

// ---------------------------------------------------------

void mousePressed() {
  // store current quad
  listOfQuads.add(list.clone());
  listOfColors.add(color(random(255), random(255), random(255)));
}//func

// ---------------------------------------------------------

void drawExistingQuads() {
  // draw old quads - using both ArrayLists
  int i=0;
  for (float[] floatList : listOfQuads) {
    fill(listOfColors.get(i));
    drawQuad(floatList);
    i++;
  }//for
}//func

void storeQuad(float[] list_) {
  // current quad
  list_[0]=mouseX+1;
  list_[1]=mouseY-5;

  list_[2]=mouseX+75;
  list_[3]=mouseY+70;

  list_[4]=mouseX+10+mouseY+80;
  list_[5]=mouseX+1;

  list_[6]=mouseY+85;
  list_[7]=mouseX;
}//func

void drawQuad(float[] list_) {
  // draw the quad indicated by list_
  quad(
    list_[0], list_[1],
    list_[2], list_[3],
    list_[4], list_[5],
    list_[6], list_[7]
    );
}//func
//

```

---

<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 25, 2023, 11:33pm UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/12 "2023-05-25T23:33:22Z")

</div>

> [@kenkt](#):
>
> And, how to keep the shape from changing? because after I try, the shape changes

You original code:  
`mouseX+10+mouseY+80`

Did you intend to add these?  
If you change the `+` in the middle to a `,` you have your 8 parameters and the shape moves with mouse but does not change.

`:)`

---

<div class="post-metadata">

**Author:** ![kenkt](https://avatars.discourse-cdn.com/v4/letter/k/35a633/32.png) [@kenkt](https://discourse.processing.org/u/kenkt)\
**Post date:** [May 26, 2023, 3:59am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/13 "2023-05-26T03:59:59Z")

</div>

thanks again for the help! I don’t know what to repay you with other than thanks. hope your days are fun! 🫡

---

<div class="post-metadata">

**Author:** ![kenkt](https://avatars.discourse-cdn.com/v4/letter/k/35a633/32.png) [@kenkt](https://discourse.processing.org/u/kenkt)\
**Post date:** [May 26, 2023, 4:02am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/14 "2023-05-26T04:02:41Z")

</div>

Thanks for the explanation! I will try it 🫡

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 26, 2023, 7:10am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/15 "2023-05-26T07:10:29Z")

</div>

Maybe that what glv said is what you really meant.

Then I misunderstood you. nvm

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 26, 2023, 7:11am UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/16 "2023-05-26T07:11:28Z")

</div>

You can also use rect () and rectMode(CENTER);

---

<div class="post-metadata">

**Author:** ![kenkt](https://avatars.discourse-cdn.com/v4/letter/k/35a633/32.png) [@kenkt](https://discourse.processing.org/u/kenkt)\
**Post date:** [May 26, 2023, 2:42pm UTC](https://discourse.processing.org/t/error-moving-object-using-quad/42067/17 "2023-05-26T14:42:39Z")

</div>

no problem, thank you!