# Hi guys, I'm new to processing and I need help

**URL:** <https://discourse.processing.org/t/hi-guys-im-new-to-processing-and-i-need-help/22625>\
**Category:** Coding Questions\
**Created:** [July 14, 2020, 10:13pm UTC](https://discourse.processing.org/t/hi-guys-im-new-to-processing-and-i-need-help/22625 "2020-07-14T22:13:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nhghi](https://avatars.discourse-cdn.com/v4/letter/n/f0a364/32.png) [@nhghi](https://discourse.processing.org/u/nhghi)\
**Post date:** [July 14, 2020, 10:13pm UTC](https://discourse.processing.org/t/hi-guys-im-new-to-processing-and-i-need-help/22625/1 "2020-07-14T22:13:18Z")

</div>

so I’m trying to make an effect is like “Newton’s cradle”. I have n number of circles that go around my mouse. so the first n-1 circle go around my mouse with SPEED constance and the other circle go with 2\*SPEED with opposite direction from the first n-1 circle, when the alone circle touch n-1 circles it becomes a part of the n-1 circle and one of the n-1 cirles go alone, like this picture  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/de97cc0d4c87d59b12c3c836813afbf11402563a.png)

```auto
int numberDot=5;
int dia=30;
int radius=52;
float speed=0.01;
float angle=PI/12;

float c, d;

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

void draw()
{
  background(0);
  angle+=speed;
  for (int i=1; i<=5; i+=1)
// my question is how can i move the first n-1 circle with exactly 5 pixel apart from each other
  {
    c= cos(angle -i/(2*PI))*radius;
    d=sin(angle -i/(2*PI))*radius;
    ellipse(250+ c, 250+d, dia, dia);
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 15, 2020, 8:19am UTC](https://discourse.processing.org/t/hi-guys-im-new-to-processing-and-i-need-help/22625/2 "2020-07-15T08:19:17Z")

</div>

Hello,

First thoughts…

> **[Circular sector](https://en.wikipedia.org/wiki/Circular_sector)**
>
> A circular sector or circle sector (symbol: ⌔), is the portion of a disk enclosed by two radii and an arc, where the smaller area is known as the minor sector and the larger being the major sector.:234 In the diagram, θ is the central angle in radians, 
>   
>     
>       
> r
>       
>     
> {\\displaystyle r}
>   
> the radius of the circle, and 
>   
>     
>       
> L
>       
>     
> {\\displaystyle L}
>   
> is the arc length of the minor sector.
> A sector with the central angle of 180° is called ...

`:)`

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 15, 2020, 8:33am UTC](https://discourse.processing.org/t/hi-guys-im-new-to-processing-and-i-need-help/22625/3 "2020-07-15T08:33:39Z")

</div>

Hi @nhghi

When you want to do something like this, a good way to start is to draw a sketch of how you want it to look like with the information that you know and the one that you want:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4e75cfecff04c480181ba6b351a17bb729017dad.png)

On this sketch, you know:

- Radius: the radius of the big circle on wich the small circles are travelling
- Dia: the diameter of the small circle
- Gap: the gap you want between 2 small circles

And you want to know:

- deltaAngle: the angle between two consecutive small circles in order to get the desired gap bteween them

The good thing about drawing a sketch is that you can see things that you haven’t noticed before. For example here, you can see that the triangle (A, C1, C2) is isocele in A.  
It means that to ease your life, you can cut it in half and work with the top part triangle (highlighted in orange) which is a rectangular triangle:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/34ead270c16410a52cd258167744a15804b4fd5d.png)

You can then apply basic trig functions:

```auto
   sin(deltaAngle / 2) = (Dia/2 + Gap/2) / Radius
=> deltaAngle = 2 * asin( (Dia + Gap) / (2*Radius))

```

The only thing left to do is to implement it with code but I will leave that as an exercice for you.  
Here is my result:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b90e3d5b560ebdd5213aa213a034c56b9a7a526b.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 15, 2020, 11:07am UTC](https://discourse.processing.org/t/hi-guys-im-new-to-processing-and-i-need-help/22625/4 "2020-07-15T11:07:39Z")

</div>

Hello,

> [@jb4x](#):
>
> When you want to do something like this, a good way to start is to draw a sketch of how you want it to look like with the information that you know and the one that you want:

I like that response! And do enjoy the math.

What did you prepare the diagrams with?

A related discussion here but not a direct solution to this:

> [@Finding the angle of an arc?](https://discourse.processing.org/t/finding-the-angle-of-an-arc/22543):
>
> Hello, please excuse my crude drawing. I am looking to constrain the amount a circle rotates on the circumference of its parent circle. I have the center of both, and I already have a function that moves it around the angle with touch. Reason being, I have two circles on the outside and I don’t want them overlapping. Thanks!

`:)`

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 15, 2020, 2:04pm UTC](https://discourse.processing.org/t/hi-guys-im-new-to-processing-and-i-need-help/22625/5 "2020-07-15T14:04:03Z")

</div>

Hello,

I use [geogebra](https://www.geogebra.org/) to quickly produce diagrams like these. They have different apps depending what you want to do : geometry, 3D, equations…

---

<div class="post-metadata">

**Author:** ![nhghi](https://avatars.discourse-cdn.com/v4/letter/n/f0a364/32.png) [@nhghi](https://discourse.processing.org/u/nhghi)\
**Post date:** [July 20, 2020, 10:46pm UTC](https://discourse.processing.org/t/hi-guys-im-new-to-processing-and-i-need-help/22625/6 "2020-07-20T22:46:16Z")

</div>

so I did firgure a way to make n-1 circle move but now the lonely cirelce is so hard to detech because it’s float, can anyone can help me of how to do that ?

````auto
int numberDot=5;
float dia=10;
float radius=150;
float speed=0.01;
float angle=0;
float angle1;
float c, d,a,b;

void setup()
{
size(500, 500);
frameRate(10);
}

void draw()
{
background(0);

for(int i=1;i<=4;i++)
{
a= cos(angle1 +i*asin(dia/radius))*radius;
b=sin(angle1+i*asin(dia/radius))*radius;
ellipse(250+ a, 250+b, dia, dia);
}
c= cos(angle )*radius;
d=sin(angle)*radius;
ellipse(250+ c, 250-d, dia, dia);
angle+=5*speed;
angle1+=speed;
if(250+ a>=250+ c-0.001||250+ a<=250+ c+0.001&&250-d<=250+b+0.001||250-d>=250+b+0.001)
// in here I try to check if the lonely ball hit the other or not, but it's not work
{
println("hit");}

}```
````