i have a grid and have put nodes into my code, however i need the nodes to be connected to create a full shape like below. Also, i need help getting the nodes to move to the nearest grid location when the user clicks anywhere.
hi,
-a- you should store the points ( mouse click ) to a arraylist of pvector
-b- you make a loop over all points and draw a circle each
-c- if more as 1 point can draw a line
-d- if more as 2 point can connect last one with first [0] so shape is closed
-e- if you need SNAP TO GRID must round the numbers acc width / height of grid cells.
a start example:
ArrayList<PVector> pos = new ArrayList<PVector>();
float w, h;
void setup() {
size(600, 360);
w=width/10;
h=height/10;
println("use key [h] print number, key [s] snap");
}
void draw() {
background(200, 200, 0);
layout();
draw_points();
}
void mousePressed() {
pos.add( new PVector(mouseX, mouseY, 0) );
}
void layout() {
stroke(0);
strokeWeight(0.5);
for (int yLine=0; yLine<=width; yLine+=w) {
for (int xLine=0; xLine<=height; xLine+=h) {
line(yLine, 0, yLine, height);
line(0, xLine, width, xLine);
}
}
}
int x,y,xi, yi, xj, yj;
void get_point(int i ) {
x = (int)pos.get(i).x;
y = (int)pos.get(i).y;
if ( snap ) {
x = (int)(round(x/w) * w);
y = (int)(round(y/h) * h);
}
}
void draw_points() {
stroke(0,0,200);
strokeWeight(2);
for ( int i = 0; i < pos.size(); i++ ) {
get_point(i);
xi =x; yi =y;
circle(xi, yi, 5);
if ( diagp ) text(i, xi, yi);
if ( pos.size() > 0 ) {
int j = i+1;
if ( j > ( pos.size() - 1) ) j = 0; // close loop
get_point(j);
xj =x; yj =y;
line(xi, yi, xj, yj);
}
}
}
boolean diagp=true, snap = true;
void keyPressed() {
if ( key == 'h' ) diagp = ! diagp;
if ( key == 's' ) snap = ! snap;
}
Thank you so much I’ve implemented that into my code! Just some other things that I’m struggling with:
When an arrow key is pressed, all nodes must move up by 1 unit grid cell distance in corresponding direction.
For each node I’d like to calculate the sum of distances of that node from every other node. And then show that the node that has the lowest cumulative distance should be coloured red and the node that has the highest cumulative distance should be coloured blue .
yes sure, show us your code where
you try this,
-a- you might not use the raw mouse x,y any more, only the snap.
-b- use the arrow keys in keyPressed() and overwrite the whole array ( ± wh ) accordingly
-c- distance calc you must redo after each add of a new point and in the current structure
at any draw loop UNLESS you can store that result into some memory
( would need like RED / BLACK / GREEN 3 values, so a boolean array not enough )
but you have unused memory!!! the .z of each point is unused while drawing 2D
there can store like 0, 1 , 2 ( LOL )
why you not repair your above code posting as i asked you for?
“mama? how to make a arrayList of PVectors in processing ?”
the answer might not even be
? did you google it already ?
-b- no, this is the RIGHT PLACE TO ASK
we might be limited by internal forum rules to NOT provide full code solutions,
but if we see OP.s ?potential?
we might invest time with teaching in steps, like a free online course …
( and that is our own decision as also to ignore ( or limit our answers ) for possible cheaters )
-c- and even if our info is a level to high
still it might help others who read that topic later.
i struggle with that feeling in one of our recent teachings…
still there might be a reusable product of our invested time http://kll.engineering-news.org/kllfusion01/articles.php?article_id=166
( here i have a question for you Chrisir, could you
check on a class structure for pages like i used in the JAVA version ( at the end )
or this template for the tutorial,
could that be used / improved / for a game state/screen structure? still use one int state for switching )
@chelise
there are 2 ways to close the shape over a array of points with making lines:
-a- you make a switch inside the for loop to use the index [0]
( see above arrayList notation / example )
int j = i+1;
if ( j > ( pos.size() - 1) ) j = 0; // close loop
-b- or you make a for loop for max - 1 points
and lines (x … x+1 )
and after the for loop a lonely line(first , last )
here now use the array notation of a other example
for (int i=0; i<nodeX.length-1; i++) line (nodeX[i], nodeY[i], nodeX[i+1], nodeY[i+1]);
if ( nodeX.length > 0 ) line (nodeX[0], nodeY[0], nodeX[nodeX.length-1], nodeY[nodeX.length-1]); //_ optional closing line
well, a unusual way ,
usually draw in draw and not in mousePressed, so you might
redesign your whole program-flow later, ( read some tutorial… )
and that is far from the question about the last line of a array to close the shape,
so actually you are completely wrong in this topic,
you should have started a new topic “processing beginner”
and state that you can not even draw one line…
PVector[] points = new PVector[100];
int curr=0;
int cirSize=10;
void setup () {
size (600, 360);
background(200, 200, 0);
//grid_drawing();
}
void draw() {
}
void mousePressed() {
points[curr] = new PVector(mouseX, mouseY);
curr++;
// Display circle at located vector
background(200, 200, 0);
fill(0);
stroke(0);
if ( curr > 0 )
for (int c = 0; c < curr; c++)
ellipse(points[c].x, points[c].y, cirSize, cirSize);
for (int c = 0; c < curr-1; c++)
line(points[c].x, points[c].y, points[c+1].x, points[c+1].y);
if (curr > 1)
line(points[0].x, points[0].y, points[curr-1].x, points[curr-1].y);
}
please note the code calculates everything about the midpoint of the window, therefore in some instances if all your points aren’t evenly spread around the canvas it can cause some lines to intersect to solve this you need to use the mid point of all the points in the array.
