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
1 Like
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;
1 Like
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:
:)
Hello all after a long battle with mental health I’m back.
float radius = 25;
//float offX = 600;
//float offY = 50;
String[] lines;
int index = 0;
int index1 = 1;
void setup() {
size(1200, 600, P2D);
background(10);
stroke(255);
frameRate(2);
lines = loadStrings("list.txt");
}
void draw() {
if (index < lines.length) {
String[] pieces = split(lines[index], ' ');
if (index1 < lines.length) {
String[] pieces1 = split(lines[index1], ' ');
int x = int(pieces[0]);
int y = int(pieces[1]);
int x1 = int(pieces1[0]);
int y1 = int(pieces1[1]);
line(x, y, x1, y1);
float dis = dist (x, y, x1, y1);
println(dis);
PVector v1 = new PVector(x, y);
PVector v2 = new PVector(x1, y1);
float a = PVector.angleBetween(v1, v2);
println(degrees(a));
if (x < x1) {
int 2x (x ++1);
} else {
println ("no");
}
if (y < y1) {
println ("yes");
} else {
println ("no");
}
// Go to the next line for the next run through draw()
index = index + 1;
index1 = index1 + 1;
for (int angle=0; angle<360; angle++) {
float x2 = x + cos(radians(angle)) * radius;
float y2 = y + sin(radians(angle)) * radius;
point(x2, y2);
//adjust the over laps of curves
//x1 += 0.10;
}
}
}
}
this is what I have so far, and struggling with how to get the circles to follow the path in a spiralling action I know I need to offset the x and the y, but how? any advice or where to look?
also, I have tried adding if statements I’m just experimenting with what I can do, really, but I can get it to println but when I want it to change an aspect, I can’t get it too, and all the examples are changing background colours.
2 Likes
Hello!
Good to hear that you are better! 
you are using a text file, can you post the first 10 lines of it please?
I am not sure about the content.
I assumed this content:
100 200
200 220
300 230
400 240
500 250
600 260
700 270
800 280
900 290
You connect point 0 with point 1, then point 1 with point 2 and so on.
There is a trick to calculate all points between two points x,y and x1,y1 (point 0 with point 1 and so on): it’s the lerp() command. We use it inside the for loop.
We use these calculated points as the wandering CENTER for the spiral we are drawing.
So while the angle increases, the center wanders at the same speed.
Full Code
float radius = 25;
String[] lines;
int index = 0;
int index1 = 1;
void setup() {
size(1200, 600, P2D);
background(10);
stroke(255);
frameRate(2);
lines = loadStrings("list.txt");
}
void draw() {
if (index < lines.length) {
String[] pieces = split(lines[index], ' ');
if (index1 < lines.length) {
String[] pieces1 = split(lines[index1], ' ');
int x = int(pieces[0]);
int y = int(pieces[1]);
int x1 = int(pieces1[0]);
int y1 = int(pieces1[1]);
// make a line between x,y and x1,y1
stroke(255, 0, 0); // RED
line(x, y, x1, y1);
// make a spiral between x,y and x1,y1
float upperBound = 360*3;
for (int angle=0; angle<upperBound; angle++) {
// calc parameter amt for lerp to indicate how far we are between x,y and x1,y1.
// amt is between 0 and 1.
float amt = map( angle,
0, upperBound,
0, 1);
// calc current center between x,y and x1,y1
float myCenterX = lerp ( x, x1, amt);
float myCenterY = lerp ( y, y1, amt);
float x2 = myCenterX + cos(radians(angle)) * radius;
float y2 = myCenterY + sin(radians(angle)) * radius;
stroke(0, 255, 0); // GREEN
point(x2, y2);
}// for
// Go to the next line for the next run through draw()
index = index + 1;
index1 = index1 + 1;
}
}
}
Remark
- this won’t work: x ++1 ---- you want x++
- same line: 2x ( ---- you want
2 * (OR2 * x * ([other than in math, processing doesn’t know the implicit multiply, we always need the*operator ] - the int in this place I cannot understand. When you declare a new var it’s
int x2 = 2 * (x++);OR justx = 2 * (x++);without the int - I deleted the section anyway
Have a nice advent season!
Warm regards,
Chrisir 
2 Likes
Quick 3D spiral
float radius = 75;
float ang1=0;
ArrayList<PVector> listAllPoints=new ArrayList();
void setup() {
size(1200, 600, P3D);
background(10);
avoidClipping();
stroke(255);
//frameRate(2);
noStroke();
fill(0, 255, 0); // GREEN
sphereDetail(4);
for (int i=0; i < 10; i++) {
defineAllPoints();
}
}
void draw() {
background(10);
camera(0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0),
0, height/2.0, 0,
0, 1, 0);
lights();
rotateY(ang1+=0.093);
for (PVector pv : listAllPoints ) {
mySphereCommand(pv.x, pv.y, pv.z);
}
}
// -----------------------------------------------------------------
void defineAllPoints() {
// make a spiral
float upperBound = 360*13;
for (int angle=0; angle<upperBound; angle++) {
// calc parameter amt for lerp to indicate how far we are.
// amt is between 0 and 1.
float amt = map( angle,
0, upperBound,
0, 1);
float myX = lerp(90, width-111, amt);
float myY = 233 + cos(radians(angle)) * radius;
float myZ = -33 + sin(radians(angle)) * radius;
listAllPoints.add(new PVector(myX, myY, myZ));
} // for
}
void mySphereCommand(float x2, float y2, float z2) {
pushMatrix();
translate(x2, y2, z2);
sphere( 12 );
popMatrix();
}
void avoidClipping() {
// avoid clipping (at camera):
// https : //
// forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
perspective(PI/3.0, (float) width/height, 1, 1000000);
}//func
//
1 Like
One word to them responses Legendary, thank you so much; I’ve started to add some additional elements to the code you helped with, as a variable radius and a variable affecting the map solution I feel I would have been stuck at the problem for months, so thank you very much.
I’m sure there will be more questions to follow as even tho I am starting to pick things up do feel the biggest issue is problem-solving and getting the solutions required. and keep my code clean I mean, you half my code and got better results, so thanks again for your knowledge sharing.
1 Like