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:
:)