https://editor.p5js.org/oae233/sketches/Ci6eLCTM_
Concept / Idea
For this assignment, I wanted to create something like an interactive playground where users can play around with objects and manipulate them to create/build interesting compositions.
I have 3 types of shapes, triangles that float upwards, circles that fall downwards, and squares that are gravity-neutral. Users can move the shapes around, using their forces to hold them together in interesting places. You can generate any one of these shapes at any time, and either expand them or contract them. The force acting on them changes proportionally to the change in size/ mass.
if (this.body.position.x > (zone1.x - 40) && this.body.position.y > (zone1.y - 40) && this.body.position.x < (zone1.x + 40) && this.body.position.y < (zone1.y + 40)&& mouseX > (zone1.x - 40) && mouseY > (zone1.y - 40) && mouseX < (zone1.x + 40) && mouseY < (zone1.y + 40)){
Body.scale(this.body,1.01,1.01);
this.r*=1.01;
} else if (this.body.position.x > (zone2.x - 40) && this.body.position.y > (zone2.y - 40) && this.body.position.x < (zone2.x + 40) && this.body.position.y < (zone2.y + 40)&& mouseX > (zone2.x - 40) && mouseY > (zone2.y - 40) && mouseX < (zone2.x + 40) && mouseY < (zone2.y + 40)){
Body.scale(this.body,0.99,0.99);
this.r*=0.99
}
}
This is how I check if the mouse & and object are in the designated active area and then scale the object accordingly.
Future work:
I’d love to add more features, like giving the user the ability to switch an object’s gravity / force acting upon it. I’m thinking this could be done as two baskets, one upside down and one upright, and when u put an object in it and click the mouse it flips the sign of the force acting on the object.