How to draw a polygon, when x is getting bigger, its sides getting more

[mengtong]

Now I can draw a chain, but how to make sure the end of chain is following the mouse?

final float CIRCLE_DIAMETER = 20;
final float TARGET_SPACING = CIRCLE_DIAMETER * 0.75;
float anchorX, anchorY;
float xOffSet;
float yOffSet;
float distance;
float numbers;
void setup() {
size(500, 500);
anchorX = width/2;
anchorY = height/2;
strokeWeight(2);
stroke(255);
noFill();
}
void draw() {
background(0);
for (int x=0; x<=numbers; x++) {
xOffSet=abs(anchorX-mouseX);
yOffSet=abs(anchorX-mouseY);
distance=sqrt(xOffSetxOffSet+yOffSetyOffSet);
numbers=round(distance/TARGET_SPACING);
circle(anchorX+(TARGET_SPACINGx0.75), anchorY+(TARGET_SPACINGx0.75), CIRCLE_DIAMETER);
}
}

[Chrisir]

please read again this:

What is the step from one link to the next? It’s like this: “L”. This is distLinkX and distLinkY .

You calculate this in your for-loop please

besides, please format your code with </> sign in the forum command bar

final float CIRCLE_DIAMETER = 20;
final float TARGET_SPACING = CIRCLE_DIAMETER * 0.75;
float anchorX, anchorY;
float xOffSet;
float yOffSet;
float distance;
float numbers;

void setup() {
  size(500, 500);
  anchorX = width/2;
  anchorY = height/2;
  strokeWeight(2);
  stroke(255);
  noFill();
}

void draw() {
  background(0);
  for (int x=0; x<=numbers; x++) {
    xOffSet=abs(anchorX-mouseX);
    yOffSet=abs(anchorX-mouseY);
    distance=sqrt(xOffSet*xOffSet+yOffSet*yOffSet);
    numbers=round(distance/TARGET_SPACING);
    circle(anchorX+(TARGET_SPACING*x*0.75), anchorY+(TARGET_SPACING*x*0.75), CIRCLE_DIAMETER);
  }
}

[mengtong]

yes, I calculated the distLinkX and distLinkY, it is:TARGET_SPACINGx0.75. Now when I move the mouse, the chain get longer and shorter, but it doest follow my mouse
the distLinkX,Y; TARGET_SPACING*0.75
the number of circle: x

[Chrisir]

@mengtong

TARGET_SPACING x 0.75

please format this with using </>

It doesn’t come out good, because the * is missing

[Chrisir]

@mengtong

it is:TARGET_SPACING x 0.75.

No it isn’t.

It is calculated before setup and hence cannot reflect the position of the mouse (mouseX,mouseY)

read this:

@Chrisir

What is the step from one link to the next? It’s like this: “L”. This is distLinkX and distLinkY .

So the L has TWO different Arms: | and _

This is distLinkX and distLinkY .

You have to calculate them from the mouse (mouseX,mouseY)

Hint:

It looks like this without the abs()

    xOffSet=abs(anchorX-mouseX);
    yOffSet=abs(anchorX-mouseY);

[mengtong]

Sorry, I never use </> before. I will try it this time

distLinkX=(anchorX-mouseX)/x;
distLinkY=(anchorY-mouseY)/x;

now it should be the distance between each circle
But, when mouseX>anchorX, I will get negative value

[Chrisir]

There is also a typo in the 2 lines

Check X and Y spelling

[Chrisir]

here is an example that is also wrong but also shows what I mean with “L”

final float CIRCLE_DIAMETER = 20;
float anchorX, anchorY;

void setup() {
  size(500, 500);
  anchorX = width/2;
  anchorY = height/2;
  strokeWeight(2);
  stroke(255);
  noFill();
}

void draw() {
  background(0);

  float xOffSet=(anchorX-mouseX);
  float yOffSet=(anchorY-mouseY);

  line(anchorX, anchorY, 
    anchorX+xOffSet, anchorY);

  line(anchorX+xOffSet, anchorY, 
    anchorX+xOffSet, anchorY+yOffSet);

  ellipse(anchorX, anchorY, CIRCLE_DIAMETER, CIRCLE_DIAMETER);
}

[mengtong]

haha, I GOT IT! Thank you!

final float CIRCLE_DIAMETER = 20;
final float TARGET_SPACING = CIRCLE_DIAMETER * 0.75;
float anchorX, anchorY; 
float xOffSet;
float yOffSet;
float distance;
float numbers;
void setup() {
  size(500, 500);
  anchorX = width/2;
  anchorY = height/2;
  strokeWeight(2); 
  stroke(255);     
  noFill();
}
void draw() {
  background(0);
  for (int x=0; x<=numbers; x++) {
    xOffSet=(anchorX-mouseX);
    yOffSet=(anchorY-mouseY);
    distance=sqrt(xOffSet*xOffSet+yOffSet*yOffSet);
    numbers=round(distance/TARGET_SPACING);
  circle(anchorX,anchorY,CIRCLE_DIAMETER);
  circle(anchorX-x*(xOffSet/numbers),anchorY-x*(yOffSet/numbers),CIRCLE_DIAMETER);

}
}

[mengtong]

Sorry, just one more question , when my mouse stay in the center of canvas, the circle is disappeared.

[Chrisir]

new version

especially, do as much as you can outside for loop

float anchorX, anchorY; 

void setup() {
  size(500, 500);
  anchorX = width/2;
  anchorY = height/2;
  strokeWeight(2); 
  stroke(255);     
  noFill();
}

void draw() {
  background(0);

  final float CIRCLE_DIAMETER = 20;
  final float TARGET_SPACING = CIRCLE_DIAMETER * 0.75;

  float xOffSet;
  float yOffSet;
  float distance;
  float numbers;

  xOffSet=anchorX-mouseX;
  yOffSet=anchorY-mouseY;

  distance=sqrt(xOffSet*xOffSet+yOffSet*yOffSet);
  numbers=round(distance/TARGET_SPACING);

  for (int x=0; x<=numbers; x++) {
    ellipse(anchorX-x*(xOffSet/numbers), anchorY-x*(yOffSet/numbers), CIRCLE_DIAMETER, CIRCLE_DIAMETER);
  }
}

[Chrisir]

@mengtong

when my mouse stay in the center of canvas, the circle is disappeared.

before the for loop say

ellipse(anchorX, anchorY, CIRCLE_DIAMETER, CIRCLE_DIAMETER);

[mengtong]

Thank you very much, you really helped me a lot.

[mengtong]

Sorry , can I ask one more question.

final int BALL_SIZE=50;
int numbers;
size(530, 530);

numbers=height/BALL_SIZE;


for (int x=0; x<numbers; x++) {
  for (int j=0; j<=x; j++) {
    for (int z=0; z<=BALL_SIZE; z++) {
      noStroke();
      fill(255, 255/5*(z+1), 0);
      circle(BALL_SIZE/2+BALL_SIZE*j, BALL_SIZE/2+BALL_SIZE*x, BALL_SIZE/(z+1));
    }
  }
}

I think my code is right, the colour should change 50times. But it looks different.

The left one is demo,right one is mine

[Chrisir]

@mengtong

255/5*(z+1),

could be a rounding error

try 255.0/5.0*(z+1.0)

same with diameter in the circle line

[mengtong]

Sorry, I should not use “/”, should use “-”, now everything is good. I did a mistake.

final int BALL_SIZE=50;
int numbers;
size(530, 530);
numbers=height/BALL_SIZE;
for (int x=0; x<numbers; x++) {
  for (int j=0; j<=x; j++) {
    for (int z=0; z<=50; z++) {
      noStroke();
      fill(255, 0+z*5, 0);
      circle(BALL_SIZE/2+BALL_SIZE*j, BALL_SIZE/2+BALL_SIZE*x, BALL_SIZE-z);
 // println(BALL_SIZE-z);
//  println(z*50);
  
  }
  }
}

[DijaAngel]

int x=0
void setup(){
size(300,300);
}
void draw(){
//make x a little bit bigger
x+=2;
//draw a circle using x as the height and width of the circle
ellipse(150,150,x);
/*if x is too big,we can’t see it in our window,so put it back
*/ to 0 and start over
if(x>300){
x=0;
}
}
My program won’t run please could you tell me where the problems are?

[Chrisir]

Hello, and welcome to the forum!

Great to have you here!

You had one missing ; in the first line and the comment with /* comment */ was wrong

Explanation

• The comment with // is for one line (or the part right of the // sign). You write // at start of the line (or start of the comment): .... // comment
• The comment with /* */ is for a section. So you have to write /* at start of a line (or section) and */ AFTER the comment / after the line: /* comment */
  I think that was your mistake.

This Sketch works:

int x=0;  // missing ; sign here

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

void draw() {
  //make x a little bit bigger
  x+=2;
  //draw a circle using x as the height and width of the circle
  ellipse(150, 150, x, x);
  /*   here the signs for comments were a bit off; they must be like I show here (not at start of line)
   if x is too big,we can’t see it in our window,so put it back
   to 0 and start over    */
  if (x>300) {
    x=0;
  }
}

Hint: you might want to use background(110); to delete the circles

Warm regards,

Chrisir

[DijaAngel]

Thank you so much

[DijaAngel]

void setup(){
size(480,480);

}
void draw(){
if(mousePressed){
fill(0);
}else{
fill(255);
}
ellipse(mouseX,mouseY,80,120);//
}
Hi please could you explain what the fill else statement does to my ellipse.