To change the object shape characteristics

p5.js
1

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 ?

2

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 Hope this helps.

2 Likes
3

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:

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.

4

We make a class for it: :nerd_face:

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: :cowboy_hat_face:

5

Here’s an online sketch using a class which represents a colorful bouncing Ball: :balloon: