I want to know how this is expressed. 03

[alk5603]

mov2

[TfGuy44]

What have you tried? You MUST try to write the code yourself.

You will need a setup() and draw() function. In setup(), you must call size(). Start with that!

You will also need a mousePressed() function to detect the mouse being clicked. This will toggle if the circles are spinning or not.

How can you position three ellipses equally around a circle of a fixed radius? Hint: I HAVE SHOWN YOU HOW TO DO THIS ALREADY!

How is your sketch going to remember if the circles are spinning or not? How much should they rotate() by? How much does that amount change?

[alk5603]

void setup() {
size(800, 800);
}

void draw() {
background(0);
translate(width/2, height/2);

// The big circle.

// Red spot at top marks first point of triangle.
for (;; ) {
Rotate(ellipse(45, 90, 135,180));
noStroke();
fill(255, 0, 0);
ellipse(0, -100, 20, 20);

// Green spot.
rotate(radians(120));
fill(0, 255, 0);
ellipse(0, -200, 20, 20);

// Blue spot.
rotate(radians(120));
fill(0, 0, 255);
ellipse(0, -200, 20, 20);

}
}

[TfGuy44]

Okay. Finally, some code!

Have you tried to copy and paste and run the code you just posted? It doesn’t even run! You get an error immediately:

The function Rotate(void) does not exist.

If we look at the code, we see that there is a call to the Rotate() function on line 13. So, here’s the first lesson we can teach you today!
LESSON NUMBER ONE: CASE MATTERS! The function is called rotate(), not Rotate(). Notice that the ‘r’ is in lowercase.

If we correct this single-character error, we get this code:

void setup() {
  size(800, 800);
}

void draw() {
  background(0);
  translate(width/2, height/2);

  // The big circle.

  // Red spot at top marks first point of triangle.
  for (;; ) {
    rotate(ellipse(45, 90, 135, 180));
    noStroke();
    fill(255, 0, 0);
    ellipse(0, -100, 20, 20);

    // Green spot.
    rotate(radians(120));
    fill(0, 255, 0);
    ellipse(0, -200, 20, 20);

    // Blue spot.
    rotate(radians(120));
    fill(0, 0, 255);
    ellipse(0, -200, 20, 20);
  }
}

Now copy, paste, and try running this code. Does it work? No. You still get an error, but now it is a different error. Getting an error, understanding it, and then fixing it is a crucial part of the debugging process. LESSON TWO: YOUR CODE MIGHT NOT ALWAYS WORK ALL THE TIME, BUT THAT’S OKAY! YOU CAN FIX THE MISTAKES YOU FIND ONE AT A TIME UNTIL IT WORKS.

The new error is:

The method rotate(float) in the type PApplet is not applicable for the arguments (void)

What does that mean? Well, basically, it means that you are trying to pass a void value to the rotate() function, but the rotate() fuction doesn;t take a void value - it takes a float value. LESSON THREE: VARIABLES HAVE TYPES. & LESSON FOUR: FUNCTION THAT EXPECT A CERTAIN TYPE OF VARIABLE WILL COMPLAIN IF YOU PASS THEM THE WRONG TYPE OF VARIABLE. Learning!

So, why doesn’t it work? Well, your are passing the return value of the ellipse() function to rotate(). Look at line 13:

    rotate(ellipse(45, 90, 135, 180));

The ellipse() function draws an ellipse; it does not return a value. But rotate() needs a value! It needs to know how much you want the coordinate system to rotate. In short, you can’t nestle these two function in this manner.

If we remove the call to rotate() for now, we get this code:

void setup() {
  size(800, 800);
}

void draw() {
  background(0);
  translate(width/2, height/2);

  // The big circle.

  // Red spot at top marks first point of triangle.
  for (;;) {
    ellipse(45, 90, 135, 180);
    noStroke();
    fill(255, 0, 0);
    ellipse(0, -100, 20, 20);

    // Green spot.
    rotate(radians(120));
    fill(0, 255, 0);
    ellipse(0, -200, 20, 20);

    // Blue spot.
    rotate(radians(120));
    fill(0, 0, 255);
    ellipse(0, -200, 20, 20);
  }
}

Copy, paste, and run this code! Does it work? Yes! Our code now runs! The sketch window opens and… … Oh. Something is being drawn. But I don’t know if it’s what we want. What could be the problem?

Let’s look at the code again.We know that something is being drawn, but I’m not sure if it’s the right thing. Is there any code inside draw() that looks weird? To me there is! You have a for loop that has no setup, check, or step statements in it. It’s on line 12, and ends on line 27. What does that do? Are we looping over something? If so, what? How confusing.

Let’s remove that loop because we aren’t sure what it does and it looks weird and we can’t justify a reason for having it. New code:

void setup() {
  size(800, 800);
}

void draw() {
  background(0);
  translate(width/2, height/2);

  // Red spot at top marks first point of triangle.
  ellipse(45, 90, 135, 180);
  
  noStroke();
  fill(255, 0, 0);
  ellipse(0, -100, 20, 20);

  // Green spot.
  rotate(radians(120));
  fill(0, 255, 0);
  ellipse(0, -200, 20, 20);

  // Blue spot.
  rotate(radians(120));
  fill(0, 0, 255);
  ellipse(0, -200, 20, 20);
}

Copy. Paste. Run this code. Do you see how every time I make a change I make sure to run the code? This is a crucial part of the software development process.

So what’s wrong with this code now? Well, nothing. It draws four ellipses. Wait, four? We only need three! Let’s look at the ellipses that we are drawing…

[TfGuy44]

Here are the four calls to ellipse() that draw the four ellipses:

  ellipse(45, 90, 135, 180);
  ellipse(0, -100, 20, 20);
  ellipse(0, -200, 20, 20);
  ellipse(0, -200, 20, 20);

See anything wrong with that? Well, for one thing, one of the ellipses is massive and not even a circle! We only need three of them, so let’s remove the non-circle one.

void setup() {
  size(800, 800);
}

void draw() {
  background(0);
  translate(width/2, height/2);

  // Red spot at top marks first point of triangle.
  noStroke();
  fill(255, 0, 0);
  ellipse(0, -100, 20, 20);

  // Green spot.
  rotate(radians(120));
  fill(0, 255, 0);
  ellipse(0, -200, 20, 20);

  // Blue spot.
  rotate(radians(120));
  fill(0, 0, 255);
  ellipse(0, -200, 20, 20);
}

Code. Copy. Paste. Run. Good. We now see that we have three elipses. Are they in a triangle? Yes. But that triangle is sort of… squashed. Look at the ellipses again:

  ellipse(0, -100, 20, 20);
  ellipse(0, -200, 20, 20);
  ellipse(0, -200, 20, 20);

Does anything else jump out to you as odd? Immediately I see that the first ellipse is at -100 y position, while the other two are at -200 y position. Does changing that value to -200 help? TRY IT YOURSELF!

I tried it and the triangle now looks less squashed. So I’m keeping it!

So now we have three ellipses. But they don’t move! How can we make them move?

Well, how are they positioned? If we change their position based on time, then they will appear to move. As it turns out, they are all -200 pixels away from the sketch center, equally spaced around it. So, how can we get them to rotate around the center?

How do we rotate by some amount? Do we have any function that takes a value of how much to rotate by and then does some rotation for us?

Oh right, rotate()!

void setup() {
  size(800, 800);
}

void draw() {
  background(0);
  translate(width/2, height/2);

  rotate( ??? );

  // Red spot at top marks first point of triangle.
  noStroke();
  fill(255, 0, 0);
  ellipse(0, -200, 20, 20);

  // Green spot.
  rotate(radians(120));
  fill(0, 255, 0);
  ellipse(0, -200, 20, 20);

  // Blue spot.
  rotate(radians(120));
  fill(0, 0, 255);
  ellipse(0, -200, 20, 20);
}

But what value do we want to pass into the rotate function? It needs to be an amount of how much to rotate, so it should be a value between 0 and TWO_PI. And we want to increase this amount over time. Are there any functions that count how much time has ellapsed since the sketch started? How about a function to map a value from one range to another?

As it turns out, we DO have those sort of functions. They are millis() and map(). LESSON FIVE: THERE ARE PROBABLY FUNCTION TO DO THINGS THAT YOU WILL NEED. LOOK IN THE REFERENCE TO LEARN WHAT A FUNCTION DOES!

void setup() {
  size(800, 800);
}

void draw() {
  background(0);
  translate(width/2, height/2);

  rotate( map( millis() % 4000, 0, 4000, 0, TWO_PI ) );

  // Red spot at top marks first point of triangle.
  noStroke();
  fill(255, 0, 0);
  ellipse(0, -200, 20, 20);

  // Green spot.
  rotate(radians(120));
  fill(0, 255, 0);
  ellipse(0, -200, 20, 20);

  // Blue spot.
  rotate(radians(120));
  fill(0, 0, 255);
  ellipse(0, -200, 20, 20);
}

And now they spin! So, do we want to base the amount they rotate due to elapsed time alone? No, probably not. We want to be able to stop the rotation and start it again. So instead of using millis(), let’s add a variable that is the amount of rotation, and increase that amount each frame ourselves:

float rot = 0;
float d_rot = 0.1;

void setup() {
  size(800, 800);
}

void draw() {
  background(0);
  translate(width/2, height/2);

  rot += d_rot;
  rotate( rot );

  // Red spot at top marks first point of triangle.
  noStroke();
  fill(255, 0, 0);
  ellipse(0, -200, 20, 20);

  // Green spot.
  rotate(radians(120));
  fill(0, 255, 0);
  ellipse(0, -200, 20, 20);

  // Blue spot.
  rotate(radians(120));
  fill(0, 0, 255);
  ellipse(0, -200, 20, 20);
}

Whoa, they spin so fast now! Let’s adjust some values:

float rot = PI;
float d_rot = 0.03;

void setup() {
  size(800, 800);
  noStroke();
}

void draw() {
  background(0);
  translate(width/2, height/2);

  rot += d_rot;
  rotate( rot );

  fill(255, 0, 0);
  ellipse(0, 200, 20, 20);

  rotate(radians(120));
  fill(0, 255, 0);
  ellipse(0, 200, 20, 20);

  rotate(radians(120));
  fill(0, 0, 255);
  ellipse(0, 200, 20, 20);
}

Notice how I am showing you the complete, running code after every change? This is so you can follow along with the development process and hopefully learn to do it yourself. If you are asking for help with code, every post you make should include you current, running code.

Okay, almost done. Now we just need some logic to toggle doing the rotation when the mouse is pressed. We can detect a mouse press with the function mousePressed() (see lesson five!), and we can change the amount we are rotating by from 0.03 to 0 or from 0 to 0.03:

float rot = PI;
float d_rot = 0.03;

void setup() {
  size(800, 800);
  noStroke();
}

void draw() {
  background(0);
  translate(width/2, height/2);

  rot += d_rot;
  rotate( rot );

  fill(255, 0, 0);
  ellipse(0, 200, 20, 20);

  rotate(radians(120));
  fill(0, 255, 0);
  ellipse(0, 200, 20, 20);

  rotate(radians(120));
  fill(0, 0, 255);
  ellipse(0, 200, 20, 20);
}

// When the mouse is pressed,
void mousePressed(){
  // If there is no rotation right now,
  if( d_rot == 0 ){
    // Start doing rotation.
    d_rot = 0.03;
  } else { // Or if there was some,
    // Stop doing rotation.
    d_rot = 0;
  }
}

Whew! So close! Now we just need to make the dots a bit bigger and white:

float rot = PI;
float d_rot = 0.03;

void setup() {
  size(800, 800);
  noStroke();
  fill(255);
}

void draw() {
  background(0);
  translate(width/2, height/2);

  rot += d_rot;
  rotate( rot );

  ellipse(0, 200, 40, 40);

  rotate(radians(120));
  ellipse(0, 200, 40, 40);

  rotate(radians(120));
  ellipse(0, 200, 40, 40);
}

// When the mouse is pressed,
void mousePressed(){
  // If there is no rotation right now,
  if( d_rot == 0 ){
    // Start doing rotation.
    d_rot = 0.03;
  } else { // Or if there was some,
    // Stop doing rotation.
    d_rot = 0;
  }
}

There. See how easy that was? Now you have a lot to go learn and understand. Check out the tutorials on 2D transformations. Look up the new functions I just demonstrated in the Reference. Experiment yourself with debugging and making changes to code. Try writing the other 3 sketches you are asking about! With this example, you should be able to puzzle them out now!

And PLEASE post your current code every time you ask for help. EVERY TIME.

[alk5603]

Ok, thanks for the great teaching

[Kevin]

It’s really hard to help with general “how do I do this” type questions. Please try to break your problem down into smaller steps and take those steps on one at a time.

I’ve closed your other threads, which were pretty much a duplicate of this one.

Please read through this guide:

Guidelines—Asking Questions

Summary (TL;DR) Ask complete questions to get better answers! Be specific. For example: I want to load an image. I tried using createImg() , and I expected the image to be on canvas, but what happened instead was the image showing up below the canvas. Isolate your problem and work in small steps. Share only the code directly related to your problem if it is part of a bigger project, and if something isn’t working, try the smallest code that could do the thing you want. Can we run your code …