# I have a project where I have to make an interactive graphics program

**URL:** <https://discourse.processing.org/t/i-have-a-project-where-i-have-to-make-an-interactive-graphics-program/42011>\
**Category:** Coding Questions\
**Created:** [May 16, 2023, 8:42am UTC](https://discourse.processing.org/t/i-have-a-project-where-i-have-to-make-an-interactive-graphics-program/42011 "2023-05-16T08:42:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Deezer242](https://avatars.discourse-cdn.com/v4/letter/d/aeb1de/32.png) [@Deezer242](https://discourse.processing.org/u/Deezer242)\
**Post date:** [May 16, 2023, 8:42am UTC](https://discourse.processing.org/t/i-have-a-project-where-i-have-to-make-an-interactive-graphics-program/42011/1 "2023-05-16T08:42:03Z")

</div>

I am trying to create shapes that can be placed with key binds and then saved in an ArrayList. The hardest thing I’m having trouble with right now is how to edit the shapes’ size and location after I have placed them. I want to use a slider to edit the size of the selected shape.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 16, 2023, 8:49am UTC](https://discourse.processing.org/t/i-have-a-project-where-i-have-to-make-an-interactive-graphics-program/42011/2 "2023-05-16T08:49:06Z")

</div>

sounds like a shape program. You could use a line class to create the shapes providing the are line dependent, theyre’ll be alternatives for beziers elipses etc.

But essentialy

```auto
for(int i=0;i<shapes.size();i++){
for(int j=0;j<shapes.get(i).line;j++){
   drawLine()

}
}

```

where your class will take

```auto
class shape{
   shape(int x, int y, ind w, int h){
   this.x = x;
   this.y = y;
   this.h = h;
   this.w = w;
   calc center of shape() so you can stretch rotate shape later

}

shape.draw(){
//drawshape
}

shape.hover(){
//hover logic
}

shape.pointHover(){
//point hover logic
}

shape.vertexHover(){
//vertex hover logic
}
}

```

---

<div class="post-metadata">

**Author:** ![Deezer242](https://avatars.discourse-cdn.com/v4/letter/d/aeb1de/32.png) [@Deezer242](https://discourse.processing.org/u/Deezer242)\
**Post date:** [May 16, 2023, 8:52am UTC](https://discourse.processing.org/t/i-have-a-project-where-i-have-to-make-an-interactive-graphics-program/42011/3 "2023-05-16T08:52:56Z")

</div>

How do I implement it for a slider im currently just using a simple controll p5 slider I found.

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 16, 2023, 9:01am UTC](https://discourse.processing.org/t/i-have-a-project-where-i-have-to-make-an-interactive-graphics-program/42011/4 "2023-05-16T09:01:45Z")

</div>

```auto
shape.stretch(){
   shape.width = slider.getValue();
   //here you would have to consider how the shape is made and stretch the points that make the vertexes,
}

```

//be aware in the previous response I incorrectly called edges vertexes

---

<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 16, 2023, 1:19pm UTC](https://discourse.processing.org/t/i-have-a-project-where-i-have-to-make-an-interactive-graphics-program/42011/5 "2023-05-16T13:19:38Z")

</div>

> [@Deezer242](#):
>
> The hardest thing I’m having trouble with right now is how to edit the shapes’ size and location

Place : drag with mouse add same value to each corner

Size: use scale() command; make points therefore in a way that you place all points around 0,0

---

<div class="post-metadata">

**Author:** ![Deezer242](https://avatars.discourse-cdn.com/v4/letter/d/aeb1de/32.png) [@Deezer242](https://discourse.processing.org/u/Deezer242)\
**Post date:** [May 17, 2023, 8:23am UTC](https://discourse.processing.org/t/i-have-a-project-where-i-have-to-make-an-interactive-graphics-program/42011/6 "2023-05-17T08:23:24Z")

</div>

So what I want to accomplish now is how do I select a particular shape that I have drawn on the canvas and then proceed to only change the size of that particular shape with the slider.

---

<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 19, 2023, 10:18am UTC](https://discourse.processing.org/t/i-have-a-project-where-i-have-to-make-an-interactive-graphics-program/42011/7 "2023-05-19T10:18:57Z")

</div>

Okay, when you have multiple shapes calculate the center of each shape (store Center in class for example and update when needed). The center is the average of all points, so x1+x2+x3…/n, same for y1+y2…

- User clicks, check for nearest center (for loop)

- Store the index of selected shape

- And use scale() only with that one.