# Conectar puntos

**URL:** <https://discourse.processing.org/t/conectar-puntos/18250>\
**Category:** Español\
**Created:** [February 29, 2020, 8:51pm UTC](https://discourse.processing.org/t/conectar-puntos/18250 "2020-02-29T20:51:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eduwu](https://avatars.discourse-cdn.com/v4/letter/e/cc9497/32.png) [@Eduwu](https://discourse.processing.org/u/Eduwu)\
**Post date:** [February 29, 2020, 8:51pm UTC](https://discourse.processing.org/t/conectar-puntos/18250/1 "2020-02-29T20:51:10Z")

</div>

Hola!, soy principiante en processing y quería hacer un proyecto donde se crean puntos random con un limite y pueda conectarlos con el mouse dando click en cada punto, como creando constelaciones, pero la verdad no se muy bien como empezar o que hacer para llevarlo a cabo, ¿que me recomiendan?  
de momento solo tengo esto de codigo, pero no se que hacer con el.

Gracias de antemano!

```auto
float rx;
float ry;
void setup(){
size(800,800);
background(0);

}
void draw(){
  rx=random(width);
  ry=random (height);
  stroke(255);
  strokeWeight(5);

point(rx,ry);

}

```

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [March 1, 2020, 2:57pm UTC](https://discourse.processing.org/t/conectar-puntos/18250/2 "2020-03-01T14:57:59Z")

</div>

Solo para empezar.  
Agora e a sua vez  
Usando la matriz PVector usted detecta cuando el mouse se mueve sobre un círculo.

```auto
int ns = 20; // Number of stars
PVector[] points = new PVector[ns];

void setup() {
  size(600, 600);
  fill(0);
  for (int i = 0; i < ns; i++) {
    points[i] = new PVector();
    points[i].x = int(random(10, width-10));
    points[i].y = int(random(10, height-10));
  }
}

void draw(){
  background(255);
  for (int i = 0; i < ns; i++) {
    circle(points[i].x, points[i].y, 5);
  }
}

void mousePressed(){
  
}

```

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [March 2, 2020, 8:57am UTC](https://discourse.processing.org/t/conectar-puntos/18250/3 "2020-03-02T08:57:16Z")

</div>

Uff, perdón, me vine arriba y lo he hecho entero…

> **Alerta de spoiler, no pulsar si no se quiere ver el resultado final**
>
> ```auto
> //https://discourse.processing.org/t/conectar-puntos/18250/2
> //Versión 1.0 Constelaciones, por @Waboqueox en colaboración con @noel
> 
> int ns = 20; // Numero de estrellas
> PVector[] points = new PVector[ns]; //Ubicacion de las estrellas
> ArrayList<PVector> uniones = new ArrayList<PVector>(); //Para unir las estrellas
> Estrella[] estrella = new Estrella[ns]; //Array de estrellas
> 
> void setup() {
> size(600, 600);
> for (int i = 0; i < ns; i++) {
> points[i] = new PVector();
> points[i].x = int(random(10, width-10));
> points[i].y = int(random(10, height-10));
> estrella[i] = new Estrella(points[i]);
> }
> }
> 
> void draw(){
> background(255);
>   
> //Para dibujar las estrellas
> for (int i = 0; i < ns; i++) {
> estrella[i].dibujar();
> }
>   
> //Para dibujar las uniones
> for(int i = 0; i < uniones.size() ; i+=2){
> if( i+1 < uniones.size())
> line(uniones.get(i).x,uniones.get(i).y,uniones.get(i+1).x,uniones.get(i+1).y);
> }
>   
> //Información de uso
> pushStyle();
> fill(255,0,0,122);
> text("r para reiniciar\nb para borrar elección\ng para generar nuevas",20,20);
> popStyle();
> }
> 
> void mousePressed(){
>   
> //Detectar que estrella ha sido pulsada
> for(int i = 0; i < ns; i++)
> {    
> if(estrella[i].pulsada()){
> uniones.add(estrella[i].posicion);
> println("Estrella " + i + " ha sido pulsada");
> }
> }
> }
> 
> //Para interactuar
> void keyPressed() {
>   
> //Reiniciar
> if(key == 'r'){
> uniones.clear();
> println("Reinicio");
> }
>   
> //Borrar
> if(key == 'b'){
> if(uniones.size() >0){
> uniones.remove(uniones.size()-1);
> println("Borrada la anterior selección");
> }    
> }
>   
> //Generar
> if(key == 'g'){
> println("Nuevas estrellas vislumbradas");
> uniones.clear();
> for (int i = 0; i < ns; i++) {
> points[i] = new PVector();
> points[i].x = int(random(10, width-10));
> points[i].y = int(random(10, height-10));
> estrella[i] = new Estrella(points[i]);
> }
> }
>   
> }
> 
> //Clase estrella para poder guardar información y detectar si ha sido pulsada
> class Estrella{
> PVector posicion; //La posición donde se ubica
> float grosor; //Para que haya más variedad
>   
> Estrella(PVector ubicacion){
> posicion = ubicacion.copy();  
> grosor = 3+random(2); //Un mínimo de 3 y hasta 5
> }
>   
> void dibujar(){
> push();
> strokeWeight(grosor);
> fill(0);
> point(posicion.x,posicion.y);
> pop();
> }
>   
> //Detectar si ha sido pulsada
> boolean pulsada(){
> //Le damos un margen de 3 pixeles para que se más fácil pulsar las pequeñas
> //Provoca que si hay dos juntas se unan las dos
> //Se puede poner el grosor sólo para más precisión en vez de grosor + 3
> if(dist(mouseX,mouseY,this.posicion.x,this.posicion.y) < this.grosor+3)
> return true;
> return false;
> }
> 
> }
> 
> ```

Como guía para hacerlo tú:

- Te recomiendo entender el ejemplo de noel.
- Para detectar pulsaciones, recomiendo usar objetos y un método que detecte si se ha pulsado o no.
- En cuanto a unir los puntos, hay varias maneras, también depende de que funcionalidad le quieras dar luego, yo he almacenado las posiciones de las estrellas pulsadas y las he guardado en un ArrayList porque me da más maniobrabilidad para luego borrar, reiniciar o añadir puntos.

---

<div class="post-metadata">

**Author:** ![Eduwu](https://avatars.discourse-cdn.com/v4/letter/e/cc9497/32.png) [@Eduwu](https://discourse.processing.org/u/Eduwu)\
**Post date:** [March 2, 2020, 7:58pm UTC](https://discourse.processing.org/t/conectar-puntos/18250/4 "2020-03-02T19:58:19Z")

</div>

oh dios, gracias!! ahora intentare entender todo lo que hiciste, pero ya tengo una buena guía de como hacer esto y siguientes proyectos.