# Transparent Background/Window with Opaque Objects

**URL:** <https://discourse.processing.org/t/transparent-background-window-with-opaque-objects/46502>\
**Category:** Coding Questions\
**Created:** [June 4, 2025, 2:21am UTC](https://discourse.processing.org/t/transparent-background-window-with-opaque-objects/46502 "2025-06-04T02:21:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![YellowGTM](https://avatars.discourse-cdn.com/v4/letter/y/a87d85/32.png) [@YellowGTM](https://discourse.processing.org/u/YellowGTM)\
**Post date:** [June 4, 2025, 2:21am UTC](https://discourse.processing.org/t/transparent-background-window-with-opaque-objects/46502/1 "2025-06-04T02:21:18Z")

</div>

Hello Everyone,

Long time, no write. I’m attempting to write some code that utilizes a transparent  
window/background, but need opaque objects to be imposed over the Desktop image.

This code works for the transparent window, but I can’t seem to get the objects to  
appear. From what I gather, " frame.setOpacity(0.0f); " over-rides any fill(), tint(),  
alpha() command in the draw() function.

I also need to refresh the draw() function (ie: clear()?) , but if I add:

background (0, 0);  
or  
background (0, 0, 0, 0);

The window background goes solid black.

Any tips. links, hints, code suggestions would be appreciated!

Thank you!

> 

```auto
  import processing.awt.PSurfaceAWT;
  import javax.swing.JFrame;
  import javax.swing.*;
  
  JFrame frame;
  
  void setup() {
   fullScreen(SPAN);
    frame = getJFrame();
    frame.removeNotify();
    frame.setUndecorated(true);
    frame.getRootPane().setWindowDecorationStyle(JRootPane.FRAME);
    frame.setLocationRelativeTo(null);
    frame.setOpacity(0.2f);
    frame.addNotify();
  }
  
  void draw() {
    tint(255);
    alpha(255);
    fill(255);
    rect(50, 50, 50, 50);
  } 
  
  
  
  JFrame getJFrame() {
    PSurfaceAWT surf = (PSurfaceAWT) getSurface();
    PSurfaceAWT.SmoothCanvas canvas = (PSurfaceAWT.SmoothCanvas) surf.getNative();
    return (JFrame) canvas.getFrame();
  }

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [June 4, 2025, 1:39pm UTC](https://discourse.processing.org/t/transparent-background-window-with-opaque-objects/46502/2 "2025-06-04T13:39:17Z")

</div>

Try adding something like _background(255,0,255);_ to draw() if you want to see the rectangle.

**Output:**

 ![tnspnt](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/2/724650f34ced6c28a85f66e01c18539c3d1828d9.png)

---

<div class="post-metadata">

**Author:** ![YellowGTM](https://avatars.discourse-cdn.com/v4/letter/y/a87d85/32.png) [@YellowGTM](https://discourse.processing.org/u/YellowGTM)\
**Post date:** [June 4, 2025, 2:20pm UTC](https://discourse.processing.org/t/transparent-background-window-with-opaque-objects/46502/3 "2025-06-04T14:20:39Z")

</div>

Tried, it thanks.

I can’t have the background showing a red tint, and the rectangle is not prominent enough.

I’ve seen this done, and apparently Processing is able to have completely opaque  
objects floating on a transparent window.

I thought maybe changing the frame.visible(false) would just take away the background/frame,  
but it also removes the rectangle.

Soooo close…right? 😕

 ![backTransparency](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/6/769084272d8e51c2219d8cad8698f2160d49f8ff.png)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [June 4, 2025, 4:05pm UTC](https://discourse.processing.org/t/transparent-background-window-with-opaque-objects/46502/4 "2025-06-04T16:05:46Z")

</div>

> [@YellowGTM](#):
>
> I can’t have the background showing a red tint

Then just make it background(255); you can control the color of the background. My opinion is that you may have trouble getting the graphics to be opaque. It seems to me that anything you stick in a transparent window is going to be transparent (but I could be wrong about that).

---

<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:** [June 4, 2025, 8:43pm UTC](https://discourse.processing.org/t/transparent-background-window-with-opaque-objects/46502/5 "2025-06-04T20:43:56Z")

</div>

> [@YellowGTM](#):
>
> I’ve seen this done, and apparently Processing is able to have completely opaque  
> objects floating on a transparent window.

Related:

> [@Making a program without a window border (and no background, just the shape)](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/17):
>
> A simplified example using an image from a URL: // Display an image without window border and transparent background // Author: glv // Date: 2023-10-15 // Insight gleaned from various sources; seek and you shall find. import java.awt.\*; import javax.swing.\*; import java.awt.image.BufferedImage; import javax.imageio.ImageIO; import java.net.URL; JFrame frame; ImageIcon img; BufferedImage bimg; void setup() { surface.setVisible(false); String url = "https://upload.wikimedia.…

`:)`

---

<div class="post-metadata">

**Author:** ![YellowGTM](https://avatars.discourse-cdn.com/v4/letter/y/a87d85/32.png) [@YellowGTM](https://discourse.processing.org/u/YellowGTM)\
**Post date:** [June 4, 2025, 10:43pm UTC](https://discourse.processing.org/t/transparent-background-window-with-opaque-objects/46502/6 "2025-06-04T22:43:37Z")

</div>

That’s really cool! I’m learning quite a bit about this new library.

However…it doesn’t solve the draw() function dilemma. I’ll need a dynamic, continuous  
application.

I found some code from one of our members that might work. Still testing. I’ll post as  
soon as all aspects are verified.

Until then, keep it rollin’. I should probably hang around this forum a bit more! 😎

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [June 5, 2025, 1:43am UTC](https://discourse.processing.org/t/transparent-background-window-with-opaque-objects/46502/7 "2025-06-05T01:43:03Z")

</div>

> [@YellowGTM](#):
>
> it doesn’t solve the draw() function dilemma

An alternate approach is to use your own JFrame and add a JPanel for drawing with java’s calls. The following code will display opaque graphics in a transparent window.

```processing
//https://kodejava.org/how-do-i-create-undecorated-frame/

  /* Disables or enables decorations for the frame. By setting undecorated to true we
   * will remove the frame's title bar including the maximize, minimize and close icons. 
   * After the frame's title bar has been removed we need to close out the frame with
   * our own button (may also use cmd-Q). Drawing is achieved by adding a panel component.
  */
  
import javax.swing.*;
import java.awt.*;

int radius = 50;

class GPanel extends JPanel {
  GPanel() {
  }
    void paintComponent(Graphics g) {
    super.paintComponent(g);
    g.setColor (Color.BLACK);
    g.fillOval(getWidth()/2 - radius, getHeight()/2 - radius, radius * 2, radius * 2);
  }
}

void setup() {
  surface.setVisible(false);
  JFrame frame = new JFrame();
  frame.setBounds(0,0,displayWidth,displayHeight);
  frame.setLayout(null);
  frame.setUndecorated(true);
  frame.setBackground(new Color(0,0,0,0));
  frame.getRootPane().putClientProperty("apple.awt.draggableWindowBackground", true);

// ***Button*** //
  JButton btn = new JButton("Close Me");
  btn.setBounds(200,30,100,30);
  btn.addActionListener(e -> System.exit(0));
  frame.add(btn);
// ***Panel*** //
  JPanel panel = new GPanel();
  panel.setBounds(80, 60, 250, 250);
  panel.setBackground(new Color(0,0,0,0));
  panel.setBorder(BorderFactory.createEmptyBorder());
  frame.add(panel);
// ***Label*** //
  JLabel label = new JLabel("Drag Me");
  label.setBounds(310,30,150,30);
  frame.add(label);
  frame.setVisible(true);
}

```

**Output:**

 ![panel](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/b/5bb62588a79cbb02a99ab59c9466114716d867ad.png)

---

<div class="post-metadata">

**Author:** ![YellowGTM](https://avatars.discourse-cdn.com/v4/letter/y/a87d85/32.png) [@YellowGTM](https://discourse.processing.org/u/YellowGTM)\
**Post date:** [June 5, 2025, 11:37am UTC](https://discourse.processing.org/t/transparent-background-window-with-opaque-objects/46502/8 "2025-06-05T11:37:30Z")

</div>

That’s essentially what I found in another thread. I’ll link/post it here and edit my OP so that others can learn.

This library has several functions, and just seeing more from what you posted.

I’ll just need to test with mouse behaviours. There’s a library called Mouse Listener that I’ve searched. As long as the objects can be manipulated with the mouse, this seems like the solution!

```processing
//Import Libraries
import processing.serial.*;
import processing.video.*;
import java.io.IOException;
import processing.awt.PSurfaceAWT;
import javax.swing.JPanel;
import javax.swing.JFrame;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseMotionListener;
import java.awt.event.MouseEvent;
import java.awt.MouseInfo;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;

```

The above may, or may not be needed depending on the task.

Thank you all for contributing. 😍