# To change the object shape characteristics

**URL:** <https://discourse.processing.org/t/to-change-the-object-shape-characteristics/1259>\
**Category:** p5.js\
**Created:** [June 25, 2018, 10:25pm UTC](https://discourse.processing.org/t/to-change-the-object-shape-characteristics/1259 "2018-06-25T22:25:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![online](https://avatars.discourse-cdn.com/v4/letter/o/bb73d2/32.png) [@online](https://discourse.processing.org/u/online)\
**Post date:** [June 25, 2018, 10:25pm UTC](https://discourse.processing.org/t/to-change-the-object-shape-characteristics/1259/1 "2018-06-25T22:25:13Z")

</div>

Hi. Please tell me how to make the figure of the object and clicking on it with the mouse to change its characteristics ? In the documentation there is an example, but there is a mouse click focused on the position of the figure. And how to simply specify the object and change the color for example ?

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [June 25, 2018, 10:55pm UTC](https://discourse.processing.org/t/to-change-the-object-shape-characteristics/1259/2 "2018-06-25T22:55:28Z")

</div>

Hi @online, can you share what you have tried so far?

there is a more advanced example in the documentation that morphs a shape from a square, to a circle. This is a great example to modify. [https://p5js.org/examples/motion-morph.html](https://p5js.org/examples/motion-morph.html) Hope this helps.

---

<div class="post-metadata">

**Author:** ![online](https://avatars.discourse-cdn.com/v4/letter/o/bb73d2/32.png) [@online](https://discourse.processing.org/u/online)\
**Post date:** [June 26, 2018, 9:23pm UTC](https://discourse.processing.org/t/to-change-the-object-shape-characteristics/1259/3 "2018-06-26T21:23:18Z")

</div>

No, you are referring to an example without interactivity. I am interested in how to create an object from a figure and refer to this object to change its characteristics. For example, there is code:

```auto
w = innerWidth;
h = innerHeight;

var value = 0
min = 0
max = 255

function setup()
{
	createCanvas(w,h)
}

function draw()
{
	ellipse(w/2,h/2,150,150)
	fill(value)
	
}

function mousePressed()
{
	value = Math.floor(Math.random() * (255 - 0 + 1)) + 0 
}

```

How to change the color of the shape by clicking on it, not across the screen. But only without tracking its coordinates.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 27, 2018, 4:45am UTC](https://discourse.processing.org/t/to-change-the-object-shape-characteristics/1259/4 "2018-06-27T04:45:12Z")

</div>

> [@online](#):
>
> I am interested in how to create an object from a figure…

We make a `class` for it: 🤓

> **[class - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class)**
>
> The class declaration creates a binding of a new class to a given name.

> [@online](#):
>
> … and refer to this object to change its characteristics.

We then add a property to that class for each characteristic we need to track down.  
Plus we define methods that deal w/ those properties: 🤠

> **[Classes - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Class_body_and_method_definitions)**
>
> Classes are a template for creating objects. They encapsulate data with code to work on that data. Classes in JS are built on prototypes but also have some syntax and semantics that are unique to classes.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 27, 2018, 4:50am UTC](https://discourse.processing.org/t/to-change-the-object-shape-characteristics/1259/5 "2018-06-27T04:50:59Z")

</div>

Here’s an online sketch using a class which represents a colorful bouncing Ball: 🎈  
https://codepen.io/GoSubRoutine/embed/preview/KaerGb?height=300&slug-hash=KaerGb&default-tabs=js,result&host=https://codepen.io&embed-version=2