# Halftone dots patterns

**URL:** https://discourse.processing.org/t/halftone-dots-patterns/36948
**Category:** Coding Questions
**Created:** [May 18, 2022, 8:54pm UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948 "2022-05-18T20:54:57Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [May 18, 2022, 8:54pm UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/1 "2022-05-18T20:54:57Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/0/00c018e2f9b5f4d825c7ff7d889052eb7f4579be.jpeg)

```auto
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));
}
}
}

```

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [May 19, 2022, 12:15am UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/2 "2022-05-19T00:15:53Z")

</div>

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?

```auto
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);

  
}
}

```

---

<div class="post-metadata">

### Author: ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)
#### Post date: [May 23, 2022, 9:28am UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/3 "2022-05-23T09:28:28Z")

</div>

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

```auto
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);
  }
}

```

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [May 23, 2022, 12:34pm UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/4 "2022-05-23T12:34:24Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)
#### Post date: [May 23, 2022, 1:01pm UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/5 "2022-05-23T13:01:55Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)
#### Post date: [May 23, 2022, 1:10pm UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/6 "2022-05-23T13:10:28Z")

</div>

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

```auto
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;
}

```

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [May 23, 2022, 1:40pm UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/7 "2022-05-23T13:40:55Z")

</div>

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

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [May 27, 2022, 12:38am UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/8 "2022-05-27T00:38:12Z")

</div>

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?

```auto
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);
  }
}

```

---

<div class="post-metadata">

### Author: ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)
#### Post date: [May 27, 2022, 2:25am UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/9 "2022-05-27T02:25:29Z")

</div>

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

```auto
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);
  }
}

```

---

<div class="post-metadata">

### Author: ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)
#### Post date: [May 27, 2022, 2:32am UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/10 "2022-05-27T02:32:45Z")

</div>

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

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [May 27, 2022, 3:28am UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/11 "2022-05-27T03:28:29Z")

</div>

> [@humano](#):
>
> 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?

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/5/b576effcb33d14b76d0ba42ca18adf21e6d84ec8.jpeg)

Reference:

> **[noiseSeed() / Reference](https://processing.org/reference/noiseSeed_.html)**
>
> Sets the seed value for noise(). By default, noise() produces different results each time the program is run. Set the value parameter to a constant to return the same pseudo-rando…

`:)`

---

<div class="post-metadata">

### Author: ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)
#### Post date: [May 27, 2022, 3:42am UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/12 "2022-05-27T03:42:52Z")

</div>

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

---

<div class="post-metadata">

### Author: ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)
#### Post date: [May 28, 2022, 2:33am UTC](https://discourse.processing.org/t/halftone-dots-patterns/36948/13 "2022-05-28T02:33:49Z")

</div>

Amazing! Thank you again for all
