# Making a program without a window border (and no background, just the shape)

**URL:** <https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260>\
**Category:** Coding Questions\
**Created:** [March 13, 2023, 7:05am UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260 "2023-03-13T07:05:30Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![ctremblay](https://avatars.discourse-cdn.com/v4/letter/c/e495f1/32.png) [@ctremblay](https://discourse.processing.org/u/ctremblay)\
**Post date:** [March 13, 2023, 7:05am UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/1 "2023-03-13T07:05:30Z")

</div>

ok, I was wondering if there a way to make a program using processing let say I’m making a stick figure, but I want the figure to appear on my screen instead of in the display box.  
what usually happens

 ![screen](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/c/dc4d429511afb51f8e9f63edf7f9055ac9785b85.png)

what i want to happen

 ![screen](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/0/109f74af632acc0fbc07de43046bf4bac62820b3.jpeg)

yes i messed up with the pics but you should get the idea

---

<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:** [March 13, 2023, 11:06am UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/2 "2023-03-13T11:06:35Z")

</div>

You can try fullScreen() with the surface settings, if you want a transparent background, im not sure if its possible, cant quite remember

```auto
void setup(){
  fullScreen();
  surface.setSize(300,300);
  surface.setLocation(displayWidth/2-(width/2),displayHeight/2-(height/2));
}

void draw(){
  background(0);
}

```

---

<div class="post-metadata">

**Author:** ![ctremblay](https://avatars.discourse-cdn.com/v4/letter/c/e495f1/32.png) [@ctremblay](https://discourse.processing.org/u/ctremblay)\
**Post date:** [March 14, 2023, 9:58pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/3 "2023-03-14T21:58:44Z")

</div>

If I use fullScreen then I need to be able to view my screen I want the program to appear on my screen

---

<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:** [March 14, 2023, 10:11pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/4 "2023-03-14T22:11:16Z")

</div>

Yeah, thats why you use surface.setSize() makes it full screen then shrinks it down, try my code example

---

<div class="post-metadata">

**Author:** ![ctremblay](https://avatars.discourse-cdn.com/v4/letter/c/e495f1/32.png) [@ctremblay](https://discourse.processing.org/u/ctremblay)\
**Post date:** [March 14, 2023, 10:14pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/5 "2023-03-14T22:14:27Z")

</div>

I tried your code and got black box on my screen i want the stick figure to show up with no background just the stick figure.

---

<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:** [March 14, 2023, 10:18pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/6 "2023-03-14T22:18:02Z")

</div>

I thought you just wanted the screen without a border, all I used was a background of black hence the black box, as I said, im not sure if transparent backgrounds are a thing anymore, pretty sure they used to be in older versions, maybe using JFrame or something more advanced

---

<div class="post-metadata">

**Author:** ![ctremblay](https://avatars.discourse-cdn.com/v4/letter/c/e495f1/32.png) [@ctremblay](https://discourse.processing.org/u/ctremblay)\
**Post date:** [March 14, 2023, 10:20pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/7 "2023-03-14T22:20:07Z")

</div>

I want to create a program that looks like the character is actually on your screen. No background no boaders.

---

<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:** [March 14, 2023, 10:25pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/8 "2023-03-14T22:25:43Z")

</div>

All my code does is remove the border, hope someone can help with the background

---

<div class="post-metadata">

**Author:** ![ctremblay](https://avatars.discourse-cdn.com/v4/letter/c/e495f1/32.png) [@ctremblay](https://discourse.processing.org/u/ctremblay)\
**Post date:** [March 14, 2023, 10:36pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/9 "2023-03-14T22:36:33Z")

</div>

Thanks I’ll make something to give better example. I’m pretty sure i’m not clear enough.  
Here is a better example. I totally forgot why I started this lol.  
You can see the stick figure aka the program is moving but you dont see boarders or background. I was thinking using fullscreen then somehow get the screen every frame, but is there an easier way.

[![](https://img.youtube.com/vi/mJbO3uyv9b4/hqdefault.jpg "screen") ](https://www.youtube.com/watch?v=mJbO3uyv9b4)

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [March 15, 2023, 2:25pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/10 "2023-03-15T14:25:33Z")

</div>

Hi @ctremblay,

you can also do it like this by set undecorated and apply any shape for the frame …  
(for simplicity just used a round rectangle)

Cheers  
— mnse

```auto
import javax.swing.*;
import processing.awt.*;
import java.awt.geom.*;

JFrame frame;

void setup() {
  size(400,400);
  frame=(JFrame) ((PSurfaceAWT.SmoothCanvas)getSurface().getNative()).getFrame();  
  frame.dispose();
  frame.setUndecorated(true);
  frame.setShape(new RoundRectangle2D.Double(0, 0, width, height, 50, 50));
  frame.setVisible(true);
  textSize(50);
  textAlign(CENTER);
}

void draw() {
  background(255,0,255);
  fill(0,0,255);
  text("Hello World!",width/2,height/2);    
}

```

![dummyframe](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/6/461c2075a6358d2d4b7e0b97f322d3f31b9ccc9a.png)

a bit more complex your window could also look like this … 🙂

 ![dummyframe2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/a/1aeefe03cc93d66612c37695577e9e4619d0e821.png)

PS: any shape mentioned above implied also your sticky man …

---

<div class="post-metadata">

**Author:** ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)\
**Post date:** [October 13, 2023, 11:36am UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/11 "2023-10-13T11:36:12Z")

</div>

Hey, I have one question!  
Now in your code, the way to move the window is removed! I have tried to use a function i saw on the forum `surface.setLocation(x, y);` and offsetting the x & y by `pmouseX-mouseX` that kinda works, but jitters around when dragged. Is there a better way to do this?

-Libby

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [October 13, 2023, 2:58pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/12 "2023-10-13T14:58:05Z")

</div>

Hi @Noodlybanan,

Yes! I also know that jittering when using the processing mouse functions. If you do that approach by using MouseEvent Listeners from java it works like a charm. Unfortunately, I’m not on my box currently so I can’t show the code on how to do now…

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)\
**Post date:** [October 13, 2023, 10:01pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/13 "2023-10-13T22:01:39Z")

</div>

Hey, i will be looking into that and if i get anything working, i’ll share it here obviously, so everyone can use it!

-Libby

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [October 14, 2023, 6:55am UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/14 "2023-10-14T06:55:01Z")

</div>

Hi @Noodlybanan,

Always a good idea to try to solve things on your own, before choosing the easy way. 👍

In case you still need help … 🙂

> **... take a look here**
>
> ```auto
> import java.awt.event.MouseEvent;
> import java.awt.event.MouseListener;
> import java.awt.event.MouseMotionListener;
> 
> import processing.awt.*;
> import javax.swing.*;
> import java.awt.geom.*;
> 
> MouseHandler mouseHandler;
> 
> void setup() {
> size(400,400);  
> PSurfaceAWT.SmoothCanvas canvas = (PSurfaceAWT.SmoothCanvas) surface.getNative();  
> JFrame frame = (JFrame) canvas.getFrame();  
> frame.dispose();
> frame.setUndecorated(true);
> frame.setShape(new RoundRectangle2D.Double(0, 0, width, height, 50, 50));
> mouseHandler = new MouseHandler(frame); 
> canvas.addMouseMotionListener(mouseHandler);
> canvas.addMouseListener(mouseHandler);
> frame.setLocationRelativeTo(null);
> frame.setVisible(true);
> textSize(50);
> textAlign(CENTER);
> }
> 
> void draw() {
> background(255,0,255);
> fill(0,0,255);
> text("Hello World!",width/2,height/2);    
> }
> 
> class MouseHandler implements MouseListener, MouseMotionListener {
> JFrame frame;  
> PVector mouse;
> 
> public MouseHandler(JFrame f) {
> frame=f;
> mouse = new PVector();
> }
> 
> @Override public void mousePressed(MouseEvent e) {
> mouse.set(e.getX(), e.getY());
> }
> 
> @Override public void mouseReleased(MouseEvent e) {
> mouse.mult(0);
> }
> 
> @Override public void mouseDragged(MouseEvent e) {       
> frame.setLocation(floor(frame.getLocation().x + (e.getX() - mouse.x))
> ,floor(frame.getLocation().y + (e.getY() - mouse.y)));
> }
> 
> @Override public void mouseMoved(MouseEvent e) {
> }
> 
> @Override public void mouseClicked(MouseEvent e) {
> }
> 
> @Override public void mouseEntered(MouseEvent e) {
> }
> 
> @Override public void mouseExited(MouseEvent e) {
> }
> }
> 
> ```

Cheers  
— mnse

![14-10-2023_08-45-49](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/7/07ac1edb7d624cb7e241ee93ec31b96411ecc9b7.gif)

---

<div class="post-metadata">

**Author:** ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)\
**Post date:** [October 14, 2023, 11:56pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/15 "2023-10-14T23:56:05Z")

</div>

Hi! That is really cool! Now one can create an application which uses multiple different windows 🙂 Thanks for the cool code.  
-Libby

---

<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:** [October 15, 2023, 4:07pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/16 "2023-10-15T16:07:33Z")

</div>

Hello @ctremblay,

> [@ctremblay](#):
>
> i want the stick figure to show up with no background just the stick figure.

I was able to adapt this code to display an image with a transparent background with a custom shape in foreground and move it around the windows screen with mouse:

> <https://stackoverflow.com/questions/21581671/how-to-make-jframe-background-and-jpanel-transparent-with-only-image-showing>

_PGraphics_ were used to create the image with the circle.

I also added a button!

Have fun!

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/1/01f4274f1289de0e30365856524779cf283ee5da.png)

`:)`

---

<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:** [October 15, 2023, 9:16pm UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/17 "2023-10-15T21:16:40Z")

</div>

> [@ctremblay](#):
>
> I want to create a program that looks like the character is actually on your screen. No background no boaders.

A simplified example using an image from a URL:

```auto
// 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.org/wikipedia/commons/thumb/c/cb/Processing_2021_logo.svg/240px-Processing_2021_logo.svg.png";
  try
    {
    bimg = ImageIO.read(new URL(url));
    img = new ImageIcon(bimg); // BufferedImage from url
    }
  catch(IOException ex)
    {
    String imgPath = sketchPath() + "/data/test.png"; // Backup image
    img = new ImageIcon(imgPath);
    }
    
  frame = new JFrame();
  frame.setPreferredSize(new Dimension(img.getIconWidth(), img.getIconHeight()));  
    
  frame.add(new JLabel(img));
  frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  frame.setUndecorated(true);
  frame.setBackground(new Color(0, 0, 0, 0));
  frame.pack();
  frame.setVisible(true); 
  }

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/f/2f49d54405038bea9f7f93340711d5b59e8f3402.png)

You can create your own image and modify code as necessary.

`:)`

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [October 16, 2023, 7:28am UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/18 "2023-10-16T07:28:55Z")

</div>

Hi,

@glv’s example slightly modified…

Cheers  
— mnse

> **Code**
>
> ```auto
> // 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.
> 
> // slightly modified @mnse ;)
> 
> import processing.awt.*;
> import java.awt.*;
> import javax.swing.*;
> import java.awt.image.BufferedImage;
> import javax.imageio.ImageIO;
> import java.net.URL;
> 
> import java.awt.event.KeyEvent;
> import java.awt.event.KeyListener;
> import java.awt.event.MouseEvent;
> import java.awt.event.MouseListener;
> import java.awt.event.MouseMotionListener;
> 
> ImageIcon img;
> BufferedImage bimg;
> 
> MouseAndKeyHandler mouseAndKeyHandler; // moving by mouse and exit on ESC key
> 
> void setup() {
> surface.setVisible(false);
> PSurfaceAWT.SmoothCanvas canvas = (PSurfaceAWT.SmoothCanvas) surface.getNative();
> JFrame frame = (JFrame) canvas.getFrame();
> frame.dispose();
> String imgPath = dataPath("hand.gif"); // you can use also an animated gif :)
> img = new ImageIcon(imgPath);
> frame = new JFrame();
> frame.setPreferredSize(new Dimension(img.getIconWidth(), img.getIconHeight()));
> frame.add(new JLabel(img));
> mouseAndKeyHandler = new MouseAndKeyHandler(frame);
> frame.addMouseListener(mouseAndKeyHandler);
> frame.addMouseMotionListener(mouseAndKeyHandler);
> frame.addKeyListener(mouseAndKeyHandler);
> frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
> frame.setUndecorated(true);
> frame.setBackground(new Color(0, 0, 0, 0));
> frame.pack();
> frame.setLocationRelativeTo(null);
> frame.setVisible(true);
> }
> 
> class MouseAndKeyHandler implements MouseListener, MouseMotionListener, KeyListener {
> JFrame frame;
> PVector mouse;
> 
> public MouseAndKeyHandler(JFrame f) {
> frame=f;
> mouse = new PVector();
> }
> 
> @Override public void mousePressed(MouseEvent e) {
> mouse.set(e.getX(), e.getY());
> }
> 
> @Override public void mouseReleased(MouseEvent e) {
> mouse.mult(0);
> }
> 
> @Override public void mouseDragged(MouseEvent e) {
> frame.setLocation(floor(frame.getLocation().x + (e.getX() - mouse.x))
> , floor(frame.getLocation().y + (e.getY() - mouse.y)));
> }
> 
> @Override public void mouseMoved(MouseEvent e) {
> }
> 
> @Override public void mouseClicked(MouseEvent e) {
> }
> 
> @Override public void mouseEntered(MouseEvent e) {
> }
> 
> @Override public void mouseExited(MouseEvent e) {
> }
> 
> @Override public void keyPressed(KeyEvent e) {
> }
> @Override public void keyTyped(KeyEvent e) {
> }
> @Override public void keyReleased(KeyEvent e) {
> if (e.getKeyCode() == KeyEvent.VK_ESCAPE) {
> frame.dispose();
> }
> }
> }
> 
> ```
> 
> hand.gif (to download, right click and save as): ![hand.gif](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/f/7ffb75287996456ecf2fc2a6faf0f64738434d62.gif)

![16-10-2023_09-22-54](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/e/5e844196528e50a82cd6bdf7e0087d118ce001a9.gif)

---

<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:** [January 25, 2026, 2:31am UTC](https://discourse.processing.org/t/making-a-program-without-a-window-border-and-no-background-just-the-shape/41260/19 "2026-01-25T02:31:05Z")

</div>

Hello folks!

Update to solution for Processing 4.4.10 on W10 that creates an image to use:

> [@How to make a program windowless/frameless?](https://discourse.processing.org/t/how-to-make-a-program-windowless-frameless/22321/13):
>
> Hello folks! This will work on W10 and Processing 4.4.10 in a Swing window: /\* Processing Educational Sketch: ----------------------------- This sketch demonstrates how to: 1. Load an image (locally or from the web) for use in Swing. 2. Display it in a floating, undecorated JFrame overlay. Key Teaching Points: - Processing is used only to launch the application; all rendering happens in Swing - JFrame is a top-level Swing window - BufferedImage stores the image in memory - Image…

You can substitute your own image if desired:

You can download image first and use locally:  
_[https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Processing\_2021\_logo.svg/240px-Processing\_2021\_logo.svg.png](https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Processing_2021_logo.svg/240px-Processing_2021_logo.svg.png)_

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/3/d3597ace9e8dce4192baa66395c84c73e12a4fd0.png)

`:)`