# Image to random circles conversion (PNG Problem) Java

**URL:** <https://discourse.processing.org/t/image-to-random-circles-conversion-png-problem-java/39167>\
**Category:** Coding Questions\
**Created:** [October 8, 2022, 1:34pm UTC](https://discourse.processing.org/t/image-to-random-circles-conversion-png-problem-java/39167 "2022-10-08T13:34:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hanna](https://avatars.discourse-cdn.com/v4/letter/h/b3f665/32.png) [@Hanna](https://discourse.processing.org/u/Hanna)\
**Post date:** [October 8, 2022, 1:34pm UTC](https://discourse.processing.org/t/image-to-random-circles-conversion-png-problem-java/39167/1 "2022-10-08T13:34:55Z")

</div>

Newbie here!  
I have been working with some code from the internet and modified it to work from JS into Java. I have actually adapted everything so that the code works on its own.

My assumption was that when I use a PNG I only get dots on the non-transparent parts. Unfortunately, I get dots everywhere, even in places where the image is not. Transparent areas turn white and everything without an image turns black.

Does anyone have an idea how I can make it so that only the non-transparent part of the PNG gets the effect?

```auto
PImage shark;

void setup() {
  size(1000, 1000);
  stroke(255);
  noFill();
  shark = loadImage("shark_smal.png");
}

void draw() {
  //background(0);
  for (int j = 0; j<200; j++) {
    for (int i = 0; i < 100; i++) {
      int x = int(random(width));
      int y = int(random(height));
      int col = shark.get(x, y);
      noStroke();
      fill(red(col), green(col), blue(col), 190);
      float diameter = map(brightness(col), 0, 255, 5, 30);

      circle(x, y, diameter);
      println(i);
    }
  }
}

```

 ![shark_smal](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/f/7fee789186223b475c1fdbf6e56405659d4501aa.png)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 8, 2022, 1:50pm UTC](https://discourse.processing.org/t/image-to-random-circles-conversion-png-problem-java/39167/2 "2022-10-08T13:50:20Z")

</div>

> [@Hanna](#):
>
> how I can make it so that only the non-transparent part of the PNG gets the effect?

Take notice that the main canvas of a sketch is 100% opaque!

There are 2 workarounds for it I can think of:

Create a separate off-canvas via **createGraphics()** which can have transparent pixels:

> **[createGraphics() / Reference](https://processing.org/reference/createGraphics_.html)**
>
> Creates and returns a new PGraphics object. Use this class if you need to draw into an offscreen graphics buffer. The first two parameters define the width and height in pixels. The third, opti…

Or check the **alpha()** component of a `color` and skips drawing it if it’s 0 (or less than some threshold):

> **[alpha() / Reference](https://processing.org/reference/alpha_.html)**
>
> Extracts the alpha value from a color.

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [October 8, 2022, 2:41pm UTC](https://discourse.processing.org/t/image-to-random-circles-conversion-png-problem-java/39167/3 "2022-10-08T14:41:19Z")

</div>

Hi  
Some hints

[![](https://img.youtube.com/vi/WEBOTRboXBE/maxresdefault.jpg "Rasterize 3D (Processing Tutorial)") ](https://www.youtube.com/watch?v=WEBOTRboXBE)

[https://funprogramming.org/151-Convert-an-image-into-a-3D-grid-of-boxes.html](https://funprogramming.org/151-Convert-an-image-into-a-3D-grid-of-boxes.html)