Hi! I’m relatively new to Processing, and I’ve been practicing with some simple visualizations. I feel that I’m 90% of the way there but can use some help to get the last step(s).
My goal is to draw a row of dots (Point objects in the code) that rotate around the origin. Each consecutive point should be connected by a line no matter where the points are as they move. It would look like something similar to: https://drive.google.com/file/d/1baLZbgr0A–VFXu2iLllyHXoYXk_jgjj/view?usp=sharing. Here is my full current code:
Point[] points;
void setup(){
size(800,800);
translate(width/2, height/2);
background(0);
colorMode(HSB,100);
fill(100);
stroke(100);
strokeWeight(2);
points = new Point[18];
for(int i=0; i<points.length; i++){
points[i] = new Point(i*20+20, 0, 0, 0.2);
}
}
void draw(){
background(0);
translate(width/2, height/2);
for(int i=0; i<points.length; i++){
points[i].step();
points[i].display();
if(i!=0){
line(points[i-1].x, points[i-1].y, points[i].x, points[i].y);
}
}
return;
}
class Point{
float x, y, theta, speed, screenX, screenY;
Point(float xTemp, float yTemp, float thetaTemp, float speedTemp){
x = xTemp;
y = yTemp;
theta = thetaTemp;
speed = speedTemp;
//screenX = screenX(x,y);
//screenY = screenY(x,y);
}
void step(){
rotate(-radians(theta));
theta += speed;
}
void display(){
ellipse(x, y, 8, 8);
}
}
Right now I’m using a step function every draw cycle for each point object in the Point array in which I rotate the canvas. Each point has an x position that initially aligns the points on the x axis. Each point’s y value is 0 so that the rotate (step) function controls the points’ positions on the screen in a radial fashion. (I only included a y value for each point object so that the lines would have coordinates to draw to.)
The points draw exactly how I’d like, but the lines are not being drawn between dots correctly. You can see by running the code at the bottom of this post that there are small lines attached to the dots. They are drawn at the first frame (and are length i*20 as set by the instantiation line of code) but then just stay that length and move with their associated point. I suspect this problem might be due to the step function causing an issue with drawing between the “current” vs “last” iteration of the dots. However, since the lines don’t change length each frame, it could be that I’m missing or messing up instructions to update the position of one end of each line.
A got bit of success by excluding the draw() function altogether and using the following setup():
void setup(){
size(800,800);
translate(width/2, height/2);
background(0);
colorMode(HSB,100);
fill(100);
stroke(100);
strokeWeight(2);
points = new Point[18];
for(int i=0; i<points.length; i++){
points[i] = new Point(i*20+20, i*i, 0, 0.2);
points[i].display();
if(i!=0){
line(points[i-1].x, points[i-1].y, points[i].x, points[i].y);
}
}
}
Notice that I used i*i for each point’s relative y position to emphasize that lines of appropriate lengths can be drawn successfully between each consecutive point. It results in this static image:
So I’m trying to figure out how to replicate this successful dot-connecting but in the animated draw function.
Another line of thought: because it looks like rotating the canvas for each point is making things complicated for drawing the lines, I’ve also experimented a bit with keeping the step function but using screenX() and screenY(), which I thought might just grab the x,y coordinates of the drawn points relative to the window rather than relative to the rotated canvas(es). The code for this test looks like: uncomment the screenX and screenY definitions in the class and then use line(points[i-1].screenX, points[i-1].screenY, points[i].x, points[i].y) in draw (or something like that). None of the combinations of x, y, screenX, and screenY that I’ve tried in this line work the way I want, but I feel like the concept of getting the points’ x,y coordinates on the screen rather than on their rotated coordinate systems might be onto something.
Any help would be appreciated! Thanks!
