Trying to Make center shape spin with mouse interaction

Processing Coding Questions
1

Hi There again! Im trying to make a star in spin with mouse interaction while also still being able to place rectangles in a scatter pattern.

 // Draw star
  fill(41, 171, 226);
  stroke(255);
  strokeWeight(2);
  beginShape();
  vertex(785, 233);
  vertex(881, 431);
  vertex(1098, 464);
  vertex(939, 617);
  vertex(975, 834);
  vertex(781, 730);
  vertex(586, 831);
  vertex(625, 614);
  vertex(468, 460);
  vertex(686, 430);
  endShape(CLOSE);
}

void mousePressed() {
  float r = random(0, 255);
  float g = random(0, 255);
  float b = random(0, 255);
  float a = random(0, 255);
  float X = random(10, 60);
  float Y = random(10, 60);

  rectanglesPos.add(new PVector(mouseX, mouseY));
  rectanglesDim.add(new PVector(X, Y));
  rectanglesCol.add(color(r, g, b, a));
}

This is what I have right now but I’m trying to make the star not spin at first after the first press it spins and then the user can place the rectangles anywhere they want!

2

There are several problems with the code that you posted. The biggest problem is that it won’t compile. It is missing the key parts of a Processing app: there are no setup() or draw() functions. You have tried to just copy/paste a previous example that you were given, but didn’t even copy all of that. Since you put a ‘homework’ tag on your post we have a policy that we don’t post a complete answer. Otherwise you wouldn’t learn as much; the only way you’re going to learn is to do the work yourself. We are happy to help you in your endeavors, but you have to take the initiative first. I’m going to ask you to do a little reading of pre-existing examples and then try to apply those examples to your project. The examples are: https://processing.org/examples/star.html and https://gist.githubusercontent.com/atduskgreg/1516424/raw/dd6819164c4b6d707174068aa6d0e0ac5fb792d5/rotation_around_a_point.pde

You have already been given one example of rotation around a center point but it won’t hurt to study another one. The advantage of finding a new way to draw your star is that the above technique will allow you to place it where you want it and easily control the size. The multiple vertex method that you posted gets the job done, but you don’t have a lot of control over it without re-writing all the vertices. If you’re willing to do this, then I’m willing to try and help you. What you want to do is a little above beginner level, but you should be able to do it if you start over and go step by step, making sure you understand each step as you go. That’s a whole lot better way to learn than copy/pasting someone else’s code.

1 Like
3

Hi Svan, if willing I would like to go over this at a different time. due to time and personal responsibilities i submitted what i was happy with. However, i do want to expand and rewrite this code in the next day or two when I have more time to dedicate to it. I do want to thank you for your honesty and all the help you have given me today!

2 Likes
4

rewrite this code in the next day or two when I have more time to dedicate to it

Not a problem. Just post another response when you get ready and have some time and we’ll see if we can’t make your project a reality.

In the interim there are a couple of things you can do at your own pace to get ready, in addition to studying the examples:

  1. Learn how to create a Processing window 600x600 in size with a gray background.
  2. Draw a circle with a radius of 25 at the origin with this code: circle(0,0,25); That will show you where the origin of the window is located by default.
  3. Then we will draw a star in the exact center of the window.
4 Likes
5

Hi

For spinning rotate and translate given you nice and easy animation watch this video to have a general practices

https://funprogramming.org/29-Rectangle-spinning-around-the-mouse-pointer.html