I want to connect several dots by lines.(like the main image of processing)

General Discussion Other

sunooz

I want to connect several dots by lines.(like the main image of processing)

in General Discussion • Other • 1 year ago

It might be really easy question for all of you, but is terribly hard to me as a little beginner for processing.

I want to make a visual which looks like the main image of processing.

Like this, I hope to connect several dots by some lines.

(x and y values of dots can be random or designated.)

However, I cannot find easy example for this one.

Though I spend much time looking at examples in processing itself and finding similar sketch at www.OpenProcessing.org, I could not find it...

Of course, there are some examples which have similar visual like the image above at OpenProcessing, but those are usually interactive and complex ones.... I cannot figure out where the codes for the visual are.

(what I have found :

http://www.openprocessing.org/sketch/8857

http://www.openprocessing.org/sketch/30841

However, I cannot find the lines for creating visual in these sketches...)

I just want to look at THE EASIEST solution for the visual above. NO INTERACTION, NO COMPLEX CODES.

I guess that it would be something simple and easy....

But for me as a beginner with almost no knowledge for processing, it is really hard and perplexing...T_T

Can anybody help me? I beg your considerate advices....

Posting codes for the visual would be perfect, or giving URL of examples on OpenProcessing or other site(where I can download the file or read codes) would be great also.

PLEASE HELP ME!

Sorry for my poor English writing... English is not my mother language.^^;

Thank you for reading my question. Have a nice day!

Replies(6)

benja

Re: I want to connect several dots by lines.(like the main image of processing)

1 year ago

The easiest solution... i think that depends, on what you consider to be easy.

Here is a small example with only very basic functions, which might help to understand.

void setup() {
size(300, 300);
smooth();
noLoop();
}

void draw() {
background(0, 0, 20);

// draw some ellipses
fill(60, 60, 190, 60);
noStroke();
ellipse(50, 50, 50, 50);
ellipse(80, 60, 30, 30);
ellipse(90, 160, 90, 90);
ellipse(200, 150, 150, 150);

// draw some lines
strokeWeight(0.5);
stroke(255);
line(50, 50, 80, 60);
line(50, 50, 90, 160);
line(80, 60, 200, 150);
line(200, 150, 90, 160);
line(80, 60, 90, 160);
}

But though it might be easier to understand, you have to write a lot more code if you want lots of circles.
Usually i would create a circle- class, an array for the circle-instances and then draw them in a loop.

sunooz

Re: Re: I want to connect several dots by lines.(like the main image of processing)

1 year ago

Thanks for helping me!

Oh, there are some description missed in my question..... Sorry!

I know how to draw ellipses and strokes manually as you wrote, but what I want is connecting dots automatically or more conveniently...

If dots in my sketch moves, connecting strokes should follow the center points of dots. Right?

(like this : http://www.openprocessing.org/sketch/7505 )

It this case, drawing lines by giving designated x and y values would not work I guess.... because x and y values for dots or circles would continuously change.

What I want to make as a result is moving or interactive sketch, similar to the one in the URL, not a sketch for static image.

If I can fully understand and use moving or interactive examples, I want to tweak the sketch above right now.

However, as I'm a mere beginner, I cannot start with those complex sketches.....

This is why I want the easiest and the simplest solution. I should start by making static image of dots and connecting lines...

benja

Re: I want to connect several dots by lines.(like the main image of processing)

1 year ago

Usually i prefer when people show their own approaches, so we can find errors and help them to improve their sketches. You learn more if you try it yourself.
But here is an example of how one could use an array, a class an loops:

Circle[] circles;
int numCircles = 50;
int maxDistance;

void setup() {
size(300, 300);
smooth();

// create an array and fill it with circles
circles = new Circle[numCircles];
for (int i=0; i< numCircles; i++) {
    circles[i] = new Circle(random(width), random(height), random(20, 90));
}
}

void draw() {
// clear background
background(0, 0, 20);

// update and display the circles
for (int i=0; i< numCircles; i++) {
    circles[i].update();
    circles[i].display();
}

// define maximum distance
maxDistance = mouseX;

// look of the lines
stroke(255, 100);
strokeWeight(0.5);

for (int i=0; i< numCircles; i++) {
    // compare circle to other circles
    for (int j=i+1; j< numCircles; j++) {
      // draw line if distance is below 'maxDistance'
      if (dist(circles[i].x, circles[i].y, circles[j].x, circles[j].y) < maxDistance) {
        line(circles[i].x, circles[i].y, circles[j].x, circles[j].y);
      }
    }
}
}

class Circle {
float x, y, dia;

Circle(float x, float y, float dia) {
    this.x =x;
    this.y =y;
    this.dia = dia;
}

void update() {
    // code for movement here
    // this is just some random displacement
    x = x + random(-1, 1);
    y = y + random(-1, 1);
}

void display() {
    // code for drawing the circles
    noStroke();
    fill(60, 60, 190, 60);
    ellipse(x, y, dia, dia);
}
}

sunooz

Re: Re: I want to connect several dots by lines.(like the main image of processing)

1 year ago

I really appreciate your help!

Of course I know that I can learn more if I try it myself.

Sorry for bothering you.

I know it is shameful that I want to see the full code for it. However, I really didn't know where to start...

Though I have done several projects by processing, I am still poor at using this tool.

While doing past projects, I have done all the thing by myself as finding information and resources in books and on-line.

However, at this time, I could not find any information or little piece of hint for this one.

I was absolutely desperate for the solution.....Sorry!

Anyway, really thank you for your kindness! I will try the code you gave!

+By the way, did you write all the codes in several minutes? It is really astonishing....

I WANT TO BE YOUR STUDENT. haha!!

It is a great hardship for me to use programming tool like processing or arduino as an art-based student.

I have a great interest in media art and be majoring in media interaction design in my undergraduates and graduate school. However, it is a tremendous burden to use those tools because I have almost no experience in programming.(Of course it is a great fun to use them at the same time though) This is because all I have done since childhood was just drawing something, not programming something.. haha

So, for me, you look really cool and gorgeous. I admire you......T_T

I know it is a personal question, but I am just curious... Are you majoring in engineering, programming or something? Or are you a professional programmer or media artist? Sorry for my rudeness, but I really want to know..!

benja

Re: I want to connect several dots by lines.(like the main image of processing)

1 year ago

"bothering" - no not at all. Most people here in the forum have fun in helping beginners, that's what the forum is for.
I studied graphics-design, came in contact with processing, and now i am something freelancing in between design and develpment.

sunooz

Re: Re: I want to connect several dots by lines.(like the main image of processing)

1 year ago

It is surprising that you studied design! I thought that you might be the one with engineering or programming base because you look really good at making something with processing. You gave me some uplift!

I have to study harder to become a skilful processing user like you...haha

I really appreciate your every helps and answers for my questions, even personal one!

Because of my poor English skill, I cannot find appropriate words for my thanks in this language...

Your thoughtful advices are great aids for my problem about dealing with processing.

I will keep my fingers crossed for everything you are doing and will do!

Top Reply