Draw line on image?

Processing Coding Questions
1

This maybe be the most newbie question of the day. :slight_smile:

The boiled down version: I want to display a photograph. Before I display it I want to draw a line, top to bottom, through the image. The line won’t be changing. Then I want to rotate the image 9with the line still there, rotating with the image but not updating otherwise).

I can’t get the line to draw on the image–I can get it to draw on the background but not the image. I think I have some fundamental misunderstanding of loadPixels/updatePixels…or something…

Would someone mind sharing a brief bit of code to do this?

Many thanks,

–Darin

2

the oder of drawing

Image first then line

1 Like
3

Just to make my needs a little more “real world”–I actually need to draw many lines, perhaps hundreds, and so I think I should be doing this in the setup section(?). Likewise, since I will rotate the image I’m worried that this line drawing process will be visible to the viewer and will take up computer resources if I do it in the draw loop. So basically I need to prepare the image ahead of time.

But I’m not asking someone to write my code for me! :). I just need need to figure out the basic task of drawing a line on the image and making it part of the image rather than having to update that same, unmoving line each time.

1 Like
4

Hi Darin.
It’s still not clear to me what you want.
You want fixed (not rotating) lines on a rotating image?
That would be like Chrisir said, first image than line, in draw().
I recommend to study following text here

Just to start try to understand thefollowing code:

PImage img;

void setup() { 
  size(400, 400); 
  img = loadImage("myImage.png");  
  imageMode(CENTER);
} 

void draw() { 
  if (frameCount % 10 == 0) { 
    pushMatrix();
    rotate(radians(frameCount * 2 % 360)); 
    image(img,0,0);
    popMatrix();
    line(width/2, 0, width/2, height);
  }
}
1 Like
5

I think you want a PShape

You can put the image in and the lines, all in setup () and then display it all in one go in draw using shape command

See reference

1 Like
6

Oh my. I figured it out. I was using the set command without referencing the PImage…that is I wrote:

set (x + (width - image.width) / 2, y, theColor);

When I should have written

image.set (x + (width - image.width) / 2, y, theColor);

This took me hours and hours to figure out. Please have pity on me. :slight_smile:

Thanks for the comments.

–Darin

1 Like
7

@darinb Just curious. You were talking about lines. Are you setting pixels to form lines?

2 Likes
8

I’m used two nested for loops to change the pixels one-by-one to form the lines. At least I got that part right on the first try! :slight_smile:

–Darin

9

That sounds very slow…

I mean it’s in setup but still…

Did you look at my idea?

1 Like
10

Hi @Chrisir
How to draw lines within a shape with image texture?
Wouldn’t it be easier to draw the image then lines and then get() the image in setup()?

1 Like
11

continued here : https://discourse.processing.org/t/how-to-draw-an-image-file-as-pshapes

1 Like
12

Yes, I looked at it and googled a bit, seeing if it would work fo my needs. In the end I was worried about it having to redraw each iteration–in my project I might have to draw 2000 lines per photo and might have six or more photos going on at the same time–seems like I would just be asking for trouble doing it in the draw loop.

–Darin

13

@darinb You know Chrisir actually meant PGraphics and not PShape don’t you? This confused me a lot. So at the end, do you need a rotating image with still standing lines like I coded above, or are the lines on the images rotating along? In the last case, as Chrisir suggested you can use PGraphics in the setup() that is actually build for this. I don’t think that the computer’s processor will have any trouble to handle this.

1 Like