Halftone dots patterns

Processing Coding Questions
1

Hi there!

I am experimenting with pointillism as you can see on my code. I have done a pattern with random sizes of dots but I actually would like to imitate a halftone patterns, where size of dots depends on nears dots. How coud I start doing something like that?

halftone-pattern-set-of-dots-dotted-texture-on-white-background-overlay-grunge-template-distress-linear-design-2B6KRNP
halftone-pattern-set-of-dots-dotted-texture-on-white-background-overlay-grunge-template-distress-linear-design-2B6KRNP1300Ă—1390 433 KB 

size(1000,1000);
background(255);
strokeCap(ROUND);


//firs pattern

stroke(255,0,255,127);
for (int y = -500; y < 1500; y += 10) {
for (int x = -500; x < 1500; x += 10) {
point(x, y);
if(random(1)>0.6){
  strokeWeight(random(7,10));
}  
else if(random(1)>0.4){
  strokeWeight(random(3,6));
}
else{
  strokeWeight(random(2));
}
}
}
2

As I have read, maybe noise is the function that I need. Could be?

I am trying to use it but I don’t have results after reading some tutorials. Could you please help me?

size(1000,1000);
background(255);
strokeCap(ROUND);
float v = 0;


//firs pattern

stroke(255,0,255,127);
for (int y = -500; y < 1500; y += 10) {
for (int x = -500; x < 1500; x += 10) {
v = v + 0.1;
float n = noise(v) * width;
strokeWeight(v);
point(x, y);

  
}
}
3

Hi, for starters, you are calculating the noise n but not using it in strokeWeight, also you’re using 1d noise, 2d noise is what you need, you also need to translate to the center of the window if you want to draw at negative x and y so i replaced your noise function with noise(x/100, y/100) * 15, the 15 being the max strokeweight, and the 100 at the x and y values being a smoothness to the noise, how fast the values shift between dots.

Hope this helps

Edit: not very good with noise lol, so play around with it, i noticed my example is symetrical, add some offsets

size(1000, 1000);
background(255);
strokeCap(ROUND);
float v = 0;

//firs pattern
translate(width/2,height/2); // translate to the center
stroke(255, 0, 255, 127);
for (int y = -500; y < 1500; y += 10) {
  for (int x = -500; x < 1500; x += 10) {
    v = v + 0.1;
    float n = noise(x/100.0,y/100.0)*15; // play with these values
    strokeWeight(n); // added n here
    point(x, y);
  }
}
1 Like
4

Thank you so much, that is brilliant! We can do It not symetrical removing translate

1 Like
5

Cool then mate, can you mark it as solved, only new here today so not sure if thats a thing

1 Like
6

Cleaned it up for you and animated it just to give you an idea how to animate through the Z direction of the noise

float z;

void setup() {
  size(1000, 1000);
}

void draw() {
  background(0);
  stroke(255);
  for (int y = 0; y <= width; y += 10) {
    for (int x = 0; x <= height; x += 10) {
      float n = noise(x/100.0, y/100.0, z)*10;
      strokeWeight(n);
      point(x, y);
    }
  }
  z += 0.01;
}
1 Like
7

That It is amazing, thank you so much my friend.

1 Like
8

Hi again! I am using this code trying to make another halftone dot pattern with a different design but second pattern is exactly the same than the first one. Do you know how could I change the second one?

size(1000, 1000);
background(255);
strokeCap(ROUND);
float v = 0;
float w = 0;

//first pattern
stroke(255, 0, 255);
for (int y = -500; y < 1500; y += 10) {
  for (int x = -500; x < 1500; x += 10) {
    v = v + 0.1;
    float n = noise(x/100.0,y/100.0)*15; // play with these values
    strokeWeight(n); // added n here
    point(x, y);
  }
}


//second pattern
stroke(255, 255, 0);
for (int a = -500; a < 1500; a += 10) {
  for (int b = -500; b < 1500; b += 10) {
    w = w + 0.3;
    float m = noise(a/100.0,b/100.0)*15; 
    strokeWeight(m); 
    point(a, b);
  }
}
9

Yeah mate, not an issue, just add an offset to the noise, i made a small offset to make it look like shadow but make a bigger offset to make it entirely different, theres probably a better solution to using noise but i dont know it lol, hope that helps

float offset = 0.1; // the bigger this value the more different it will be

//second pattern
stroke(255, 255, 0);
for (int a = -500; a < 1500; a += 10) {
  for (int b = -500; b < 1500; b += 10) {
    w = w + 0.3;
    float m = noise(a/100.0 + offset,b/100.0 + offset)*15;  // added offset here
    strokeWeight(m); 
    point(a, b);
  }
}
1 Like
10

If you think of noise as a field, the two values determine what part of the field you’re looking at, dividing by the 100 means you’re looking at points pretty close which gives you a smoothing effect that you were originally looking for, adding an offset just shifts the part of that field you’re looking at. if you put something like 500 for an offset, you’d be looking at a completely different part of the noise for the second pattern

11 
size(1000, 1000);
background(255);
strokeCap(ROUND);
float v = 0;
float w = 0;

noiseSeed(1);
//first pattern
stroke(0);
for (int y = -500; y < 1500; y += 10) {
  for (int x = -500; x < 1500; x += 10) {
    v = v + 0.1;
    float n = noise(x/100.0,y/100.0)*15; // play with these values
    strokeWeight(n); // added n here
    point(x, y);
  }
}

noiseSeed(0);
//second pattern
stroke(0, 255, 0);
for (int a = -500; a < 1500; a += 10) {
  for (int b = -500; b < 1500; b += 10) {
    w = w + 0.3;
    float m = noise(a/100.0,b/100.0)*15; 
    strokeWeight(m); 
    point(a, b);
  }
}

image
image1002Ă—1032 412 KB

Reference:

:)

2 Likes
12

Oh, forgot about the seed lol, was trying to give them an intuitive way to think about the noise field, seed would completely change the values of the field

2 Likes
13

Amazing! Thank you again for all

1 Like