I am trying to make a loop of points with different distances and sizes beetween them, but something softer that I can get with random. I have started to use noise function, but it is my very first time, so I am not really sure about what I am doing. I haven been able to play with distances between points (although I don’t control it completely), but I can not change sizes without doing a mess. I have tried to use float o as strokeWeight but it does not work, I am looking for very small variations between sizes. Could you please help me?
`float u = 0;
float v = 0;
//float w = 0;
size(1000,1000);
background(255);
strokeCap(ROUND);
//firs pattern
stroke(255,0,255);
for (int x = 0; x < 1000; x += 20) {
for (int y = 0; y < 1000; y += 20) {
u = u + 0.1;
v = v + 0.11;
//w = w + 0.001;
float n = noise(u) * width;
float m = noise(v) * width;
//float o = noise(w) * width;
strokeWeight(4);
point(n, m);
}
}`
You might try using a randomly generated number set between limits for strokeWeight. That would change the size. See how that effects your image. Reference / Processing.org
Thank you, @The_Traveler , but I would like to make sizes similiars to the sizes of the near dots, so I guess I need to use noise, not random. I think I have to use noise function in a different way that I used it with distances, but I really don’t know. I have tried with noise detail but obviously I am not doing right and I don’t even know it that is what I need. So could you please help me?
float u = 0;
float v = 0;
float noiseVal;
float noiseScale=0.02;
size(1000,1000);
background(255);
strokeCap(ROUND);
//firs pattern
stroke(255,0,255);
for (int x = 0; x < 1000; x += 20) {
for (int y = 0; y < 1000; y += 20) {
u = u + 0.1;
v = v + 0.11;
noiseDetail(3,0.5);
noiseVal = noise(3) * noiseScale;
float n = noise(u) * width;
float m = noise(v) * width;
strokeWeight(noiseVal);
point(n, m);
}
}
I also have tried making step counters for strokeWeight with a maximum range (noiseScale), but it did not work so I am really lost now. Could someone help me a bit with this, please?
float u = 0;
float v = 0;
float n1off, n2off, n1, n2;
float noiseScale = 50;
size(1000,1000);
background(255);
strokeCap(ROUND);
//first pattern
stroke(255,0,255);
for (int x = 0; x < 1000; x += 20) {
for (int y = 0; y < 1000; y += 20) {
u = u + 0.1;
v = v + 0.11;
float n = noise(u) * width;
float m = noise(v) * width;
n1off = +0.1;
n2off = +0.3;
n1 = noise(n1off)*noiseScale;
n2 = noise(n2off)*noiseScale;
strokeWeight(n1);
point(n, m);
}
}
As your sketch is stateless, ie, it doesn’t store the information for each dot, this is will very difficult to do. You would need to store the information about every dot you generate, say x, y, size. When you place a new dot, you would need to query your data for the 8 possible dots surrounding the new one. Then, work out an algorithm to average the sizes of the surrounding dots to determine a size for the new one. Lots of work and program overhead. Unless is was critical, I’d settle for generating dots within a constrained size range instead.
Yes, definitely sounds so hard to do, it is more than I can code. Because noise function was easy to use with positions, I thought that it would be as easy with sizes, but you are sure that it is not, aren’t you?
Yep. Quite sure. As I mentioned, your sketch is “stateless”, that is, it just runs freely and doesn’t log any data. Here’s a definition for you to add to your collective knowledge:
Stateless means there is no record of
previous interactions and each interaction
request has to be handled based entirely
on information that comes with it.
So without recording the “state” of each element, in this case dots (x,y,size), you have no data to examine and programmatically determine the size of your new dots.
I think the best you can do in this situation is to play around with your dot generation variables until it produces something that would be acceptable. Cheers.
Now I am playing with the position of the whole constellation. I have been using “width” to make the center of the constallation on the center of the image. If I change “width” for 500, constellation goes to the first quadrant of the image, but If want to move it to the second green quadrant, I really don’t know how. Or just If want to put constellation on another place, as the blue polygon of my screenshot, I don’t know how to define that place. Could you please help me?
float u = 0;
float v = 0;
size(1000,1000);
background(255);
strokeCap(ROUND);
//first pattern
stroke(255,0,255);
for (int x = 0; x < 1000; x += 30) {
for (int y = 0; y < 1000; y += 30) {
u = u + 0.1;
v = v + 0.11;
float n = noise(u) * 500;
float m = noise(v) * 500;
strokeWeight(random(3,5));
point(n, m);
}
}
Your welcome. To move your constellation to another rectangular area of screen, your green box, examine setLocation(): Reference / Processing.org
As for the uneven quad, you could determine the x,y of each corner then write code that would generate your noise(u,v) coordinates to fall within the x,y coordinates of the quad. Something like an an if-else where each time the noise(u,v) is run, it compares the (u,v) coordinates to the x,y coordinates of each corner. This is a simple and somewhat time-consuming way of doing it, but is reliable. You might take a look at createGraphics() to produce a second drawing surface inside the main screen: Reference / Processing.org but I’m not sure if it would be what you need because it defines a simple rectangular region.
I don’t mind if it is time-consuming, I prefer if it simple! But I don’t understand how to write these coordinates in the code that generates noise. I guess that I have to replace “width” in that line but that is a single value and coordinates are several numbers.
float u = 0;
float v = 0;
size(1000,1000);
background(255);
strokeCap(ROUND);
quad (300,500, 800,600, 700,900, 400,800);
//first pattern
stroke(255,0,255);
for (int x = 0; x < 1000; x += 30) {
for (int y = 0; y < 1000; y += 30) {
u = u + 0.1;
v = v + 0.11;
float n = noise(u) * width;
float m = noise(v) * width;
strokeWeight(random(3,5));
point(n, m);
}
}
There are couple ways to do this that come to mind. First though, I’d replace the numbers in quad() with x1,y1, x2,y2, etc and put them up at the top of your code. Quad would look like quad(x1,y1,x2,y2,x3,y3,x4,y4) and that makes it a bit simpler to work with those variables. You might look at constructing an if else structure: Reference / Processing.org The goal is to test u,v against each set of x,y. For a dot to be plotted on the screen u, v has to fall within those 4 x,y pairs.
thank you so much again, @The_Traveler . I want to think that I can intuit your idea, being optimistic
I have tried to follow your indications because sometimes you manage to do something even if you don’t understand it completely … but I think this is not one of these times
How could I do your approach better ?
float u = 0;
float v = 0;
float x1, x2, x3, x4;
float y1, y2, y3, y4;
size(1000,1000);
background(255);
strokeCap(ROUND);
x1 = 300;
x2 = 800;
x3 = 700;
x4 = 400;
y1 = 500;
y2 = 600;
y3 = 900;
y4 = 800;
quad (x1,y1, x2,y2, x3,y3, x4,y4);
//first pattern
stroke(255,0,255);
for (int x = 0; x < 1000; x += 30) {
for (int y = 0; y < 1000; y += 30) {
u = u + 0.1;
v = v + 0.11;
float n = noise(u) * width;
float m = noise(v) * width;
if (x1<300) {
u = x1;
}
else if (y1<500) {
v = y1;
}
strokeWeight(random(3,5));
point(n, m);
}
}
I think your on the right track but you need to switch the variables around a bit. You can also use the && operator to do both comparisons at the same time. Here is a possible solution. The if statement compares n,m to all the x, y coordinates. If it passes all 4 comparisons, it places a dot. Otherwise it simply goes back to the top of the loop for the next iteration. It works but there is a problem which I think has something to do with Perlin noise space mapping to 2D screen space. It needs to be corrected to fit the dots in the quad screen space. I think translation and rotation could be necessary before the point(n,m) function. Also keep in mind that some of the dots will fail and not be plotted. This will make your constellation somewhat smaller so you may have to increase the count in the loop.
float u = 0;
float v = 0;
float x1, x2, x3, x4;
float y1, y2, y3, y4;
size(1000,1000);
background(255);
strokeCap(ROUND);
x1 = 300;
x2 = 800;
x3 = 700;
x4 = 400;
y1 = 500;
y2 = 600;
y3 = 900;
y4 = 800;
quad (x1,y1, x2,y2, x3,y3, x4,y4);
//first pattern
stroke(255,0,255);
for (int x = 0; x < 1000; x += 30) {
for (int y = 0; y < 1000; y += 30) {
u = u + 0.1;
v = v + 0.11;
float n = noise(u) * height;
float m = noise(v) * width;
if (((( n < x1)) && (( m < y1))) && ((( n < x2)) && (( m < y2))) \
&& ((( n < x3)) && (( m < y3))) && ((( n < x4)) && (( m < y4)))) {
strokeWeight(random(3,5));
point(n, m);
}
else
;
}
}
Hmm. Sorry. I thought the && AND operator was in the previous release. I haven’t used Processing for awhile and I’m using 4.0b8 currently. As it’s not in your version, and if you don’t have access to 4.0b8, you can break down what I did and form it into a if/else structure similar to the one you were working on. The down side is having a bit more complexity to cover all the comparisons.
I have been trying with setLocation too but It does not work either. Could you please help me?
float u = 0;
float v = 0;
size(1000,1000);
background(255);
strokeCap(ROUND);
//first pattern
surface.setResizable(true);
surface.setSize(300, 200);
surface.setLocation(300,300);
stroke(255,0,255);
for (int x = 0; x < 1000; x += 30) {
for (int y = 0; y < 1000; y += 30) {
u = u + 0.1;
v = v + 0.11;
float n = noise(u) * 500;
float m = noise(v) * 500;
strokeWeight(random(3,5));
point(n, m);
}
}
I had the same problem with the positioning of the dots staying ourside the quad. The issue, I think, is that the u,v coordinates created by the Perlin noise function are texture coordinates and have to be mapped to screen x,y coordinates. I was going to look into a rotation/translation matrix which are generally used with 2D and 3D shapes (but I believe should also work for dots): Rotating elements in Processing - Creative Coding - Tutorial
setLocation() should be pretty straightforward. It allows the movement of the 0,0 location in the upper left hand corner to any other arbitrary x,y point on the screen surface.
If might be wise for you to reorganize your code to include void setup() and void draw() blocks.
Thank you again for your patiente. I never thought that this would be so complicated, but is is really important for me to solve it somehow.
I have been trying with rotate and translate but that duplicates the constellation.
float u = 0;
float v = 0;
size(1000,1000);
background(255);
strokeCap(ROUND);
//first pattern
stroke(255,0,255);
for (int x = 0; x < 1000; x += 30) {
for (int y = 0; y < 1000; y += 30) {
u = u + 0.1;
v = v + 0.11;
float n = noise(u) * 500;
float m = noise(v) * 500;
strokeWeight(random(3,5));
translate(600,600);
rotate(PI/2.0);
point(n, m);
}
}
Then, I have been trying with set location again, but with less sucess!
void setup(){
float u = 0;
float v = 0;
size(1000,1000);
background(255);
strokeCap(ROUND);
surface.setResizable(true);
surface.setSize(300, 200);
surface.setLocation(300,300);
}
//first pattern
void draw() {
stroke(255,0,255);
for (int x = 0; x < 1000; x += 30) {
for (int y = 0; y < 1000; y += 30) {
u = u + 0.1;
v = v + 0.11;
float n = noise(u) * 500;
float m = noise(v) * 500;
strokeWeight(random(3,5));
point(n, m);
}
}
}
No problem. I will look into it some more as time allows and see what I can learn. As I mentioned, the function noise(u,v) are texture coordinates and not screen. So, I’ll have to see if there is a way to map them to screen x,y coordinates to fit the arbitrary quad. I still think a matrix should work but perhaps I don’t have the coding right yet. I’ll see why setLocation isn’t working as that should be pretty straight-forward to do.
