I'd like to use saveFrame() to record frames from a controlWindow created with controlp5. By default saveFrame() records only the main window of the sketch.
Is there a way to specify which window saveFrame() pulls from?
Are there any alternate ways to extract the buffer drawn to the controlWindow every frame?
Windows in Java are typically JFrames. I haven't tested, but you should be able to do something like this:
import java.awt.Component;
import java.awt.image.BufferedImage;
//get to the java.awt.Component
Component window = yourP5ControlWindow.component();
//make a BufferedImage to store pixels into
BufferedImage snapshot = new BufferedImage(window.getWidth(),window.getHeight(),BufferedImage.TYPE_INT_RGB);
//take a snapshot
window.paint( snapshot.getGraphics() );
//create a PImage out of the BufferedImage
PImage image = new PImage(snapshot);
//save,etc.
image.save("yourComponent.png");
HTH
PApplet.saveImage() is essentially a wrapper around PImage.save().
If you want to capture only a part of the screen, you should render it to a PImage() and then call PImage.save(). PImage.save(), however, requires you to specify your own filename -- it will not auto-increment for you like PApplet.saveImage() does.
It doesn't appear simple to draw ControlP5 content into a separate buffer (PImage), but you can grab an arbitrary rectangle from the main graphics context and save that.
PImage screengrab = createImage(controlWindow.width, controlWindow.height, RGB);
screengrab.loadPixels();
loadPixels();
for (int i=0; i<screengrab.width*screengrab.height; i++) {
// loop thru pixels and copy into screengrab.pixels...
// i'll leave the math here as a fun exercise for you.
}
screengrab.updatePixels();
updatePixels();
screengrab.save("screengrab.png");
Related
The thing what I want to make is similar to paint program.
The problem is when I draw some lines(Not just lines. Whole things I drew are included in this case.), those lines only drawn back of a image I put in before I draw that.
At first, I thought it was just problem of code's order. But it wasn't.
I just want draw some lines on the image like paint program.
Like this:enter image description here
You can paint into a separate "layer" using PGraphics.
Once you initialise an instance you can use the typical drawing methods within beginDraw() / endDraw() (as the reference example suggests).
The only thing left is to save the final image which is simple enough using save()
Here's a modified example of Examples > Basics > Image > LoadDisplay which uses a separate PGraphics instance to draw into as the mouse is dragged and saves the final image when the s key is pressed:
/**
* Based on Examples > Basics > Image > Load and Display
*
* Images can be loaded and displayed to the screen at their actual size
* or any other size.
*/
PImage img; // Declare variable "a" of type PImage
// reference to layer to draw into
PGraphics paintLayer;
void setup() {
size(640, 360);
// The image file must be in the data folder of the current sketch
// to load successfully
img = loadImage("moonwalk.jpg"); // Load the image into the program
// create a separate layer to draw into
paintLayer = createGraphics(width,height);
}
void draw() {
// Displays the image at its actual size at point (0,0)
image(img, 0, 0);
// Displays the paint layer
image(paintLayer,0,0);
}
void mouseDragged(){
// use drawing commands between beginDraw() / endDraw() calls
paintLayer.beginDraw();
paintLayer.line(mouseX,mouseY,pmouseX,pmouseY);
paintLayer.endDraw();
}
void keyPressed(){
if(key == 's'){
saveFrame("annotated-image.png");
}
}
My question is related to this previous question. What I want to achieve is to stack images (they have transparency), write a string on top, and save the photomontage / photocollage with full resolution.
#Override
protected void beforeMain(Form f) {
Image photoBase = fetchResourceFile().getImage("Voiture_4_3.jpg");
Image watermark = fetchResourceFile().getImage("Watermark.png");
f.setLayout(new LayeredLayout());
final Label drawing = new Label();
f.addComponent(drawing);
// Image mutable dans laquelle on va dessiner (fond blanc)
Image mutableImage = Image.createImage(photoBase.getWidth(), photoBase.getHeight());
drawing.getUnselectedStyle().setBgImage(mutableImage);
drawing.getUnselectedStyle().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FIT);
// Paint all the stuff
paints(mutableImage.getGraphics(), photoBase, watermark, photoBase.getWidth(), photoBase.getHeight());
// Save the collage
Image screenshot = Image.createImage(photoBase.getWidth(), photoBase.getHeight());
f.revalidate();
f.setVisible(true);
drawing.paintComponent(screenshot.getGraphics(), true);
String imageFile = FileSystemStorage.getInstance().getAppHomePath() + "screenshot.png";
try(OutputStream os = FileSystemStorage.getInstance().openOutputStream(imageFile)) {
ImageIO.getImageIO().save(screenshot, os, ImageIO.FORMAT_PNG, 1);
} catch(IOException err) {
err.printStackTrace();
}
}
public void paints(Graphics g, Image background, Image watermark, int width, int height) {
g.drawImage(background, 0, 0);
g.drawImage(watermark, 0, 0);
g.setColor(0xFF0000);
// Upper left corner
g.fillRect(0, 0, 10, 10);
// Lower right corner
g.setColor(0x00FF00);
g.fillRect(width - 10, height - 10, 10, 10);
g.setColor(0xFF0000);
Font f = Font.createTrueTypeFont("Geometos", "Geometos.ttf").derive(220, Font.STYLE_BOLD);
g.setFont(f);
// Draw a string right below the M from Mercedes on the car windscreen (measured in Gimp)
g.drawString("HelloWorld",
(int) (848 ),
(int) (610)
);
}
This is the saved screenshot I get if I use the Iphone6 skin (the payload image is smaller than the original one and is centered). If I use the Xoom skin this is what I get (the payload image is still smaller than the original image but it has moved to the left).
So to sum it all up : why is the saved screenshot with Xoom skin different from the one I get with Iphone skin ? Is there anyway to directly save the graphics on which I paint in the paints method so that the saved image would have the original dimensions ?
Thanks a lot to anyone that could help me :-)!
Cheers,
You can save an image in Codename one using the ImageIO class. Notice that you can draw a container hierarchy into a mutable image using the paintComponent(Graphics) method.
You can do both approaches with draw image on mutable or via layouts. Personally I always prefer layouts as I like the abstraction but I wouldn't say the mutable image approach is right/wrong.
Notice that if you change/repaint a lot then mutable images are slower (this will not be noticeable for regular code or on the simulator) as they are forced to use the software renderer and can't use the GPU fully.
In the previous question it seems you placed the image with a "FIT" style which naturally drew it smaller than the containing container and then drew the image on top of it manually... This is problematic.
One solution is to draw everything manually but then you will need to do the "fit" aspect of drawing yourself. If you use layouts you should position everything based on the layouts including your drawing/text.
I'm trying to do a simple thing. I have a binary image and all I want is to overlay the binary image on a color image, but the white pixels in the binary image should be red, and the black transparent.
I'm quite used to JavaFx but I'm stuck with this one. I know I could achieve it by iterating through all pixels with a PixelReader, but I'm sure there is an easier way. I tried to use some sort of Blend-effect but no luck so far.
I think it should be similar to this:
How to Blend two Image in javaFX
I came up with this:
Image image = new Image("/circle.jpg", false);
ImageView iv = new ImageView(image);
Image mask = new Image("/mask.jpg", false);
ImageView ivMask = new ImageView(mask);
Rectangle r = new Rectangle(mask.getWidth(), mask.getHeight());
r.setFill(Color.RED);
r.setBlendMode(BlendMode.MULTIPLY); // sets the white area red
Group g = new Group(ivMask, r); // sets the white area red
// this is not working as expected
iv.setBlendMode(BlendMode.DIFFERENCE);
Group g2 = new Group(iv, g);
Thanks for any suggestions!
If you think, processing pixel-wise is faster than just creating an overlay, please let me know.
Solution by pixel-reader would be:
Pane root = new Pane();
// read the underlaying image
root.getChildren().add(new ImageView(new Image("/src.jpg")));
Image mask = new Image("/mask.jpg");
PixelReader pixelReader = mask.getPixelReader();
Canvas resultCanvas = new Canvas();
root.getChildren().add(resultCanvas);
GraphicsContext resultLayer = resultCanvas.getGraphicsContext2D();
for (int y = 0; y < mask.getHeight(); y++) {
for (int x = 0; x < mask.getWidth(); x++) {
if( pixelReader.getColor(x, y).equals(Color.WHITE) ){
resultLayer.fillRect(x, y, 1.0, 1.0);
}
}
}
Cheers!
What you are Doing Wrong
The difference operator isn't a binary difference based on whether a pixel is set instead it is a difference in the RGB components, so instead of a solid red overlay, you will get a multi-colored overlay because the difference in the RGB components of the blended images differs between pixels.
Background
You are trying to do something similar to a masked bit-blit operation with blend modes (basically, an OR then an AND of pixel data based on a white on black mask). It is possible though a little tricky with the built-in blends in JavaFX 8.
You could create a feature request for additional support in the blend API for bit-blt style basics as well as exposing a full porter duff compositing implementation like Swing has so that the underlying blend engine has a bit more power and is possibly a little easier to use.
Alternatives
The preferred thing to do would be to pre-process your mask in an image editor like photoshop to convert the black part to an alpha channel - then you can just layer your mask on top of your original and the default compositing mode will take of it.
To make your alpha enabled mask red, you could just use mask.setBlendMode(BlendMode.RED) (or you could pre-color the mask in an image editor before using it in your program).
Another alternative is the PixelReader solution you have in your question (which I think is fine if you are unable to pre-convert your mask to use alpha).
The blend operations can be hardware accelerated on appropriate hardware. So potentially using a blend could be faster if you are doing it very often (but you would have to have many blends being run very quickly on large images to really notice any kind of performance difference).
Sample Solution Using Blend Operations
Sample Output
Input Images
original.jpg
stencil.jpg
Code
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.effect.BlendMode;
import javafx.scene.image.*;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class Blended extends Application {
#Override
public void start(Stage stage) {
Image original = new Image(
getClass().getResourceAsStream("original.jpg")
);
Image stencil = new Image(
getClass().getResourceAsStream("stencil.jpg")
);
// first invert the stencil so that it is black on white rather than white on black.
Rectangle whiteRect = new Rectangle(stencil.getWidth(), stencil.getHeight());
whiteRect.setFill(Color.WHITE);
whiteRect.setBlendMode(BlendMode.DIFFERENCE);
Group inverted = new Group(
new ImageView(stencil),
whiteRect
);
// overlay the black portions of the inverted mask onto the image.
inverted.setBlendMode(BlendMode.MULTIPLY);
Group overlaidBlack = new Group(
new ImageView(original),
inverted
);
// create a new mask with a red tint (red on black).
Rectangle redRect = new Rectangle(stencil.getWidth(), stencil.getHeight());
redRect.setFill(Color.RED);
redRect.setBlendMode(BlendMode.MULTIPLY);
Group redStencil = new Group(
new ImageView(stencil),
redRect
);
// overlay the red mask on to the image.
redStencil.setBlendMode(BlendMode.ADD);
Group overlaidRed = new Group(
overlaidBlack,
redStencil
);
// display the original, composite image and stencil.
HBox layout = new HBox(10);
layout.getChildren().addAll(
new ImageView(original),
overlaidRed,
new ImageView(stencil)
);
layout.setPadding(new Insets(10));
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch();
}
}
I am using Processing under Fedora 20, and I want to display an image of the extending tracks of objects moving across part of the screen, with each object displayed at its current position at the end of the track. To avoid having to record all the co-ordinates of the tracks, I usesave("image.png"); to save the tracks so far, then draw the objects. In the next frame I use img = loadImage("image.png"); to restore the tracks made so far, without the objects, which would still be in their previous positions.. I extend the tracks to their new positions, then usesave("image.png"); to save the extended tracks, still without the objects, ready for the next loop round. Then I draw the objects in their new positions at the end of their extended tracks. In this way successive loops show the objects advancing, with their previous positions as tracks behind them.
This has worked well in tests where the image is the whole frame, but now I need to put that display in a corner of the whole frame, and leave the rest unchanged. I expect that createImage(...) will be the answer, but I cannot find any details of how to to so.
A similar question asked here has this recommendation: "The PImage class contains a save() function that exports to file. The API should be your first stop for questions like this." Of course I've looked at that API, but I don't think it helps here, unless I have to create the image to save pixel by pixel, in which case I would expect it to slow things down a lot.
So my question is: in Processing can I save and restore just part of the frame as an image, without affecting the rest of the frame?
I have continued to research this. It seems strange to me that I can find oodles of sketch references, tutorials, and examples, that save and load the entire frame, but no easy way of saving and restoring just part of the frame as an image. I could probably do it using Pimage but that appears to require an awful lot of image. in front of everything to be drawn there.
I have got round it with a kludge: I created a mask image (see this Processing reference) the size of the whole frame. The mask is defined as grey areas representing opacity, so that white, zero opacity (0), is transparent and black, fully opaque (255) completely conceals the background image, thus:
{ size (1280,800);
background(0); // whole frame is transparent..
fill(255); // ..and..
rect(680,0,600,600); // ..smaller image area is now opaque
save("[path to sketch]/mask01.jpg");
}
void draw(){}
Then in my main code I use:
PImage img, mimg;
img = loadImage("image4.png"); // The image I want to see ..
// .. including the rest of the frame which would obscure previous work
mimg = loadImage("mask01.jpg"); // create the mask
//apply the mask, allowing previous work to show though
img.mask(mimg);
// display the masked image
image(img, 0, 0);
I will accept this as an answer if no better suggestion is made.
void setup(){
size(640, 480);
background(0);
noStroke();
fill(255);
rect(40, 150, 200, 100);
}
void draw(){
}
void mousePressed(){
PImage img =get(40, 150, 200, 100);
img.save("test.jpg");
}
Old news, but here's an answer: you can use the pixel array and math.
Let's say that this is your viewport:
You can use loadPixels(); to fill the pixels[] array with the current content of the viewport, then fish the pixels you want from this array.
In the given example, here's a way to filter the unwanted pixels:
void exportImage() {
// creating the image to the "desired size"
PImage img = createImage(600, 900, RGB);
loadPixels();
int index = 0;
for(int i=0; i<pixels.length; i++) {
// filtering the unwanted first 200 pixels on every row
// remember that the pixels[] array is 1 dimensional, so some math are unavoidable. For this simple example I use the modulo operator.
if (i % width >= 200) { // "magic numbers" are bad, remember. This is only a simplification.
img.pixels[index] = pixels[i];
index++;
}
}
img.updatePixels();
img.save("test.png");
}
It may be too late to help you, but maybe someone else will need this. Either way, have fun!
I'm new to easeljs and was wondering how would you split an image into a given number of pieces. From what I've gathered so far, I'm supposed to use SpriteSheets to accomplish this. However, the only tutorials I've seen are ones with multiple images in one Spritesheet, not one image divided into multiple images and put into a SpriteSheet.
This is my code so far (I know that the variable frames is undefined since I cannot properly access the spriteSheet array yet):
var data = {
images: ["/images/teemo.png"],
frames: {width:50, height:50}
};
var spriteSheet = new createjs.SpriteSheet(data);
console.log(spriteSheet);
console.log(spriteSheet[frames]);
var frames = spriteSheet[frames];
console.log(frames);
for (var i=0; i<frames.length; i++){
var bmp = new createjs.Bitmap(SpriteSheet[frames][i]);
}
A spritesheet is an interesting way (although not really the intent of the class). Your usage is wrong though.
Create a Spritesheet
Create Sprite instances (called BitmapAnimation in EaselJS 0.6.1 and earlier), each pointing at the same SpriteSheet instance
Use sprite.gotoAndStop(frame) to have each instance show a different piece
Here is an example:
for (var i=0; i< numberOfImages; i++) {
var sprite = new createsjs.Sprite(spriteSheetData);
sprite.gotoAndStop(i);
stage.addChild(sprite);
// Other stuff
}
You can also crop out a piece of an image using a Bitmap and the sourceRect property, which takes a Rectangle to define the crop area. This ends up being roughly the same as the above approach, but might be more work to determine each Rectangle dimensions.
Cheers.