Im new to Processing. I would like to put a .jpg or .png over curves and ellipses, so that they can see only where the image is transparent.
My code is below. The problem with it is that the transparent area is not fully transparent, but transparent white and the not-transparent parts have also decreased opacity.
PImage img;
void setup() {
size(300,500);
frameRate(30);
strokeWeight(4);
img = loadImage("sziluettmeret.jpg");
}
void draw() {
background(0, 50, 70);
stroke(0,70,90);
noFill();
beginShape();
curveVertex(-100, -100);
curveVertex(10, 10);
curveVertex(250, 250);
curveVertex(300, 300);
endShape();
fill(255);
ellipse(20 ,20,15,15);
noFill();
tint(255, 100);
image(img, 0, 0);
}
UPDATE:
I have this in my code:
loadPixels();
for(int i=0; i < img.pixels.length; i++) {
tmpColor = img.pixels[i];
tmpRed = red(tmpColor);
tmpGreen = blue(tmpColor);
tmpBlue = green(tmpColor);
tmpAlpha = 255 - ((tmpRed + tmpGreen + tmpBlue)/3);
img.pixels[i] = color(2*tmpRed,tmpGreen/2,tmpBlue,0);
if(0xFFFFFF == tmpColor)
}
updatePixels();
The picture does not become transparent. (But it becomes purple, so the loop runs on every pixel for sure)
tint() doesn't do greenscreening. It'll recolor your image (if you use a non-neutral colour), and set the mix transparancy, so with tint(255,100), you effective gave the image an opacity of (approximately) 0.39
If you want to do greenscreening (or in your case, whitescreening), you want to run through the image's pixels when you load the image, then set opacity to 0 whenever r/g/b are 255, effectively "removing" all your white pixels.
Related
I tried to make a simple 3d spinning cube in processing.
int size = 100;
float angle = 0;
void setup() {
size(500, 500, P3D);
}
void draw() {
lights();
translate(width/2, height/2, 0);
rotateY(angle);
rotateX(angle);
background(0);
box(size);
angle+=0.05;
}
When i run it, i got a nice spinning cube but there is some problem in rendering.
Found a similar thread with no answer:-
Processing P3D Animation leaving artifacts behind
Image Depicting the problem
Although I could not found the reason for this weird effect. But here is a quick hack which worked out for me.
Instead of using the background function to fill the background, simply draw a filled rectangle every frame.
int size = 100;
float angle = 0;
void setup() {
size(500, 500, P3D);
}
void draw() {
//black
fill(0);
//rectangle to fill the canvas
rect(0,0,width,height);
lights();
fill(255);
translate(width/2, height/2, 0);
rotateY(angle);
rotateX(angle);
box(size);
angle+=0.05;
}
I want to compare two images (same size) fr a presentation with a shifting line. On the left side of this line the one image is should be displayed while on the right side the other picture should stay visible.
This is what I tried (bitmap and ch are the images)
PImage bitmap;
PImage ch;
int framerate = 1000;
void setup() {
size(502, 316);
bitmap = loadImage("bitmap_zentriert.jpg"); // Load an image into the program
ch = loadImage("Karte_schweiz_zentriert.jpg"); // Load an image into the program
frameRate(40); //framerate
}
void draw() {
background(255);
image(ch, 10, 10); // the one image in the back
image(bitmap, 10, 10, bitmap.width, bitmap.height, 10, 10, mouseX, bitmap.height); //show part of the second image in front
rect(mouseX, 10, 1, bitmap.height-1); //make line
}
But the image "bitmap" is the whole image distorted.
How can I do that?
I'd recommend using a PGraphics buffer, which is essentially "Another sketch" that also acts as an Image for drawing purposes, and most definitely not looping at "a thousand frames per second". Only draw something when you have something new to draw, using the redraw function in combination with mouse move events:
PImage img1, img2;
PGraphics imagebuffer;
void setup() {
size(502, 316);
imagebuffer = createGraphics(width, height);
img1 = loadImage("first-image.jpg");
img2 = loadImage("second-image.jpg");
noLoop();
}
void mouseMoved() {
redraw();
}
void draw() {
image(img1, 0, 0);
if (mouseX>0) {
imagebuffer = createGraphics(mouseX, height);
imagebuffer.beginDraw();
imagebuffer.image(img2, 0, 0);
imagebuffer.endDraw();
image(imagebuffer, 0, 0);
}
}
In our setup we load the image and turn off looping because we'll be redrawing based on redraw, and then in response to mouse move events, we generate a new buffer that is only as wide as the current x-coordinate of the mouse, draw our image, which gets cropped "for free" because the buffer is only limited width, and then we draw that buffer as if it were an image on top of the image we already have.
There are many ways to do it, one thing I suggest is to create a 3rd image with the same width and height, then you load the two images pixels and insert in your 3rd image part of image1 pixels and then second part from image2, I wrote this code to test it out, works fine:
PImage img1, img2, img3;
void setup() {
size(500, 355);
img1 = loadImage("a1.png"); // Load an image into the program
img2 = loadImage("a2.png"); // Load an image into the program
img3 = createImage(width, height, RGB); //create your third image with same width and height
img1.loadPixels(); // Load the image pixels so you can access the array pixels[]
img2.loadPixels();
frameRate(40); // frame rate
}
void draw() {
background(255);
// Copy first half from first image
for(int i = 0; i < mouseX; i++)
{
for (int j = 0; j < height ; j++) {
img3.pixels[j*width+i] = img1.pixels[j*width+i];
}
}
// Copy second half from second image
for(int i = mouseX; i < width; i++)
{
for (int j = 0; j < height ; j++) {
img3.pixels[j*width+i] = img2.pixels[j*width+i];
}
}
// Update the third image pixels
img3.updatePixels();
// Simply draw that image
image(img3, 0, 0); // The one image in the back
// Draw the separation line
rect(mouseX, 0, 0, height); // Make line
}
Result :
I'm trying a simple masking of an image with a circle shape on top of it.
I don't understand why it is not working. The image gets printed correctly, but not a sing of a mask. This is my code:
PImage lion;
PGraphics mask;
void setup() {
size(720, 380);
lion = loadImage("lion.jpg");
mask = createGraphics(720, 380);
mask.beginDraw();
mask.ellipse(0, 0, 150, 150);
mask.fill(0, 0, 0);
mask.endDraw();
mask.mask(lion);
}
void draw() {
image(lion, 0, 0);
}
The lion image is just random image from google.
You have to apply the mask to the lion image and not to apply the lion image as a mask to the mask.
The first 2 parameters of the ellipse() are the x and y center coordinates of the ellipse.
Fill the entire mask with a black background and then draw a white ellipse to center of the mask:
void setup() {
size(720, 380);
lion = loadImage("lion.jpg");
int w = lion.width;
int h = lion.height;
mask = createGraphics(w, h);
mask.beginDraw();
mask.background(0);
mask.fill(255);
mask.ellipse(w/2, h/2, w, h);
mask.endDraw();
lion.mask(mask);
}
void draw() {
background(0);
image(lion, 0, 0);
}
I am tinkering with Processing and cannot figure out how to write text over an image I created using the image buffer (rotating squares)...when the square becomes smaller than the text, the changing digits wrote on top of each other. Cannot use resetting the bkg as a solution because that erases the overlapping images. Still having a hard time understanding this area...
Question: How to get the text to appear on top of the rotating squares without resetting the bkg and without the text writing over itself
Code below
Thank you!
float rotateAmount;
int boxColorR = 255;
int boxColorG = 255;
int boxColorB = 255;
int boxW = 480;
void setup () {
size(640,480);
rectMode(CENTER);
}
void drawText() {
//translate(width/2,height/2);
textAlign(LEFT, CENTER);
fill(255, 255, 255);
textSize(32);
text("RED: " + boxColorR,width/2,height/2);
text("GREEN: " + boxColorG,width/2,height/2+30);
text("BLUE: " + boxColorB,width/2,height/2+60);
text("Box Width: " + boxW,width/2,height/2+90);
}
void drawBox() {
translate(width/2,height/2);
rotateAmount += 12;
if (boxColorR <= 0) {
boxColorG--;
}
if (boxColorG <= 0) {
boxColorB--;
}
boxColorR--;
boxW--;
rotateAmount += .05;
rotate(rotateAmount);
fill(boxColorR,boxColorG,boxColorB);
rect(0,0,boxW,boxW);
resetMatrix();
}
void draw() {
//rect(width/2,height/2,640,480); //this solves the text overlapping but erases the cool effect
drawBox();
drawText();
}
Most Processing sketches use a call to the background() function as the first line in the draw() function. This clears out anything drawn in previous frames.
However, you want to keep the stuff drawn in previous frames, so you don't want to clear them out. The problem with this is that since your text isn't cleared out either, your text ends up looking garbled.
The solution to this is to use the PGraphics class to create an off-screen buffer. You draw the squares to the buffer instead of to the screen. Then you draw the buffer to the screen, and finally, you draw the text on top of the buffer.
Since you draw the buffer to the screen each frame, it clears away the old text, but the squares you've previously drawn are maintained in the buffer.
Code speaks louder than words:
float rotateAmount;
int boxColorR = 255;
int boxColorG = 255;
int boxColorB = 255;
int boxW = 480;
//create a buffer to draw boxes to
PGraphics buffer;
void setup () {
size(640, 480);
buffer = createGraphics(640, 480);
}
void drawText() {
//translate(width/2,height/2);
textAlign(LEFT, CENTER);
fill(255, 255, 255);
textSize(32);
text("RED: " + boxColorR, width/2, height/2);
text("GREEN: " + boxColorG, width/2, height/2+30);
text("BLUE: " + boxColorB, width/2, height/2+60);
text("Box Width: " + boxW, width/2, height/2+90);
}
//draw boxes to buffer
void drawBox() {
buffer.beginDraw();
buffer.rectMode(CENTER);
buffer.translate(width/2, height/2);
rotateAmount += 12;
if (boxColorR <= 0) {
boxColorG--;
}
if (boxColorG <= 0) {
boxColorB--;
}
boxColorR--;
boxW--;
rotateAmount += .05;
buffer.rotate(rotateAmount);
buffer.fill(boxColorR, boxColorG, boxColorB);
buffer.rect(0, 0, boxW, boxW);
buffer.resetMatrix();
buffer.endDraw();
}
void draw() {
//draw the boxes to the buffer
drawBox();
//draw the buffer to the screen
image(buffer, 0, 0);
//draw the text on top of the buffer
drawText();
}
I am working on a robotics project in which I have to some image processing in order to recognize blue colored objects, red colored obstacles, and green colored destination. I am using java for Image Processing.
Right now, I have been able to locate Red, Green, and Blue colored objects using Blobscanner library. But the difficulty is that, my algorithm only works fine when the background is pure Black. Because I am using RGB color model, and in RGB, black is represented as 0,0,0 and white as 255,255,255 and gray color also has some red component in it, so it also gets detected by the algorithm. I don't know the algorithm which exactly pinpoints the red color ignoring others.
Please help me detect only red color (and its other shades) in any image.
Well, while #geotheroy were posting I also gave this a try, it works and also is cool to see :) so I'm posting it anyway... Same base idea thought...
drag vertically to set the threshold, any key to view original.
PImage original, result;
float t = 0.9;
void setup() {
//image linked from this question in processing forum
//http://forum.processing.org/topic/help-random-distribution-of-non-overlapping-circles#25080000001787197
original = loadImage("http://24.media.tumblr.com/tumblr_lzi0y7OpsC1r87izio1_1280.png");
if (original != null) {
size(original.width, original.height);
result = createImage(original.width, original.height, RGB);
result = original.get(0, 0, original.width, original.height);
}
else
{
println("unable to load the image. Are you connected?");
exit();
}
}
void draw() {
if (keyPressed) {
image (original, 0, 0);
}
else {
image(result, 0, 0);
}
}
void mouseDragged() {
t = map(mouseY, 0, height, 0, 1);
findReds(original, t);
}
void findReds(PImage orig, float thresh) {
result = orig.get(0, 0, orig.width, orig.height);
result.loadPixels();
for (int i = 0; i < result.pixels.length; i++) {
color c = result.pixels[i];
float r = c >> 16 & 0xFF;
float g = c >> 8 & 0xFF;
float b = c & 0xFF;
float limitR = r - r*thresh;
if ( g < limitR && b < limitR) {
result.pixels[i] = color(255);
}
}
result.updatePixels();
}
Does this help give you some ideas:
PImage moog;
void setup() {
String url = "http://bananamondaes.files.wordpress.com/2013/02/the-moog.jpg";
moog = loadImage(url, "jpg");
size(moog.width, moog.height);
noStroke();
strokeWeight(10);
textSize(18);
textAlign(CENTER);
}
void draw() {
image(moog, 0, 0);
color c = moog.pixels[mouseY*width + mouseX];
fill(c);
ellipse(450,285,30,17);
ellipse(430,250,50,30);
ellipse(400,200,70,40);
ellipse(360,120,320,60);
fill(0);
text("Red: "+int(red(c))+", Green: "+int(green(c))+", Blue: "+int(blue(c)),360,125);
text("Check out Moog's ears..", 300, 50);
if(red(c)>200 & green(c)<100 & blue(c)<100) {
noFill();
stroke(c);
rect(5,5,width-10,height-10);
noStroke();
}
}