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
what i want to happen
yes i messed up with the pics but you should get the idea
You can try fullScreen() with the surface settings, if you want a transparent background, im not sure if its possible, cant quite remember
void setup(){
fullScreen();
surface.setSize(300,300);
surface.setLocation(displayWidth/2-(width/2),displayHeight/2-(height/2));
}
void draw(){
background(0);
}
If I use fullScreen then I need to be able to view my screen I want the program to appear on my screen
Yeah, thats why you use surface.setSize() makes it full screen then shrinks it down, try my code example
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.
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
I want to create a program that looks like the character is actually on your screen. No background no boaders.
All my code does is remove the border, hope someone can help with the background
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.
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
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);
}
a bit more complex your window could also look like this … 
PS: any shape mentioned above implied also your sticky man …
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
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
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
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 …
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
Hi! That is really cool! Now one can create an application which uses multiple different windows Thanks for the cool code.
-Libby
Hello @ctremblay,
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:
PGraphics were used to create the image with the circle.
I also added a button!
Have fun!
:)
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.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);
}
You can create your own image and modify code as necessary.
:)
Hi,
@glv’s example slightly modified…
Cheers
— mnse
// 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): 
