Programming advice

Hello,

I am looking to start a programming project.
But stuck at the first
I want to program a progressive circle that follows a line.

I will add a picture because im unsure how to explain.

Hello @rbu,

There are resources here to start you on your journey:

This is about trigonometry:

This snippet from tutorial will let help you draw a circle:

float x = cos(radians(angle)) * radius; 
float y = sin(radians(angle)) * radius;
point(x, y); // hint...

You will have to consider how to increase angle over time…

Start simple and draw a circle with points…

Once you have an x and y point of a circle to plot you can then add to the y over time and have the circles progress in the y direction.

Start simple and work from there…

I did this in a few lines of code with above suggestion:

You may want try drawing a line at first and have it grow longer over time.

Simple example with point() to start with:

float x;
float y;

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

void draw() 
  {
  x = 150;
  point(x, y);
  y = y+1;
  }

If you are a beginner you need to look up the references for every element of your code:

  • setup()
  • draw()
  • background()
  • size()
  • point()
  • And so on…

:)

2 Likes

Hi @Rbu,

Just as another hint…

This from @glv post …

float x = cos(radians(angle)) * radius; 
float y = sin(radians(angle)) * radius;
point(x, y); // hint...

… will give you the circle points around the origin (0,0).
If you want to adjust the origin you need to apply an offset for x and y.
Ie:

// offX could be x value of your line point
// offY could be y value of your line point
float x = offX + cos(radians(angle)) * radius; 
float y = offY + sin(radians(angle)) * radius;
point(x, y); // hint...

Cheers
— mnse

1 Like

It’s also fun to do in 3D

Like a spiral going north

Thanks for the help.

I’m struggling, to be honest. If there is a level zero with coding, I’m minus 1. I have read the references and understand the basics.

I also understand the simple example where the line progresses, but I can not work out how to even draw the circle with the cos and sin for the life of me.

1 Like

This would work inside a for loop from angle going from 0
To 360

for(int angle=0; angle<360; angle++) {

...

}

A few variables are to be defined before the for loop:

float radius=30; float offX=90; float offY=90;

There are examples available with the Processing IDE (File > Examples… ):

Take a look at the one I highlighted.

Consider going through some of the tutorials on the Processing website:

:)

One more hint.
You may also require strokeWeight() function.

So I think I have done it.

float radius = 50;
float offX = 300;
float offY = 25;

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

void draw()  {
 
  for(int angle=0; angle<360; angle++) {
  float x = offX + cos(radians(angle)) * radius; 
  float y = offY + sin(radians(angle)) * radius;
  point(x,y);
  offY += 0.15;
  }
  
}

so my next objective is to go from pixel a say 150,150 to pixel 300,300. got any hints pls

Hello,

Try drawing a line with point() and also with line() from (150, 150) to (300, 300).

Look up the references for:

  • point()
  • line()
  • for()

Are you using the resources here?

Another good resource:

:)

hello glv,

i get the line but where am I going wrong with the point?

float radius = 50;
float offX = 300;
float offY = 25;

void setup()  {
  size(750,750);
   line(150,150,600,150);
  line(150,150,150,600);
  line(600,150,600,600);
  line(150,600,600,600);
}

void draw()  {
  
  for(int k = 600; k < 150; k = k-11){
    for(int j = 600; j < 150; j = j-1){
    point(k,j);

    }
  }
  
  for(int i = 150; i < 600; i = i+1){
    line(150,150,i,i);
  }
  
  for(int angle=0; angle<360; angle++) {
  float x1 = offX + cos(radians(angle)) * radius; 
  float y1 = offY + sin(radians(angle)) * radius;
  point(x1,y1);
  offY += 0.15;
  }
  
}

For the line you don’t need a
for loop.

Instead just say

line(offX, offY, offX, offY +
height- 100);

or so

Hello,

You are trying to progress from a -1 skill level to a nested for loop that is decrementing.

Start simple and work from there.

Try an incrementing for loop first.

Read a bit more about for loops and take a close look at this test in your loop:

k < 150 // this evaluates to false

These are popular tutorials:

:)