# Draw line on image?

**URL:** <https://discourse.processing.org/t/draw-line-on-image/14587>\
**Category:** Coding Questions\
**Created:** [October 10, 2019, 9:36pm UTC](https://discourse.processing.org/t/draw-line-on-image/14587 "2019-10-10T21:36:57Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![darinb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/darinb/32/3792_2.png) [@darinb](https://discourse.processing.org/u/darinb)\
**Post date:** [October 10, 2019, 9:36pm UTC](https://discourse.processing.org/t/draw-line-on-image/14587/1 "2019-10-10T21:36:57Z")

</div>

This maybe be the most newbie question of the day. 🙂

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 10, 2019, 9:39pm UTC](https://discourse.processing.org/t/draw-line-on-image/14587/2 "2019-10-10T21:39:29Z")

</div>

the oder of drawing

Image first then line

---

<div class="post-metadata">

**Author:** ![darinb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/darinb/32/3792_2.png) [@darinb](https://discourse.processing.org/u/darinb)\
**Post date:** [October 10, 2019, 9:54pm UTC](https://discourse.processing.org/t/draw-line-on-image/14587/3 "2019-10-10T21:54:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 10, 2019, 11:04pm UTC](https://discourse.processing.org/t/draw-line-on-image/14587/4 "2019-10-10T23:04:37Z")

</div>

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](https://www.processing.org/tutorials/transform2d/)

Just to start try to understand thefollowing code:

```auto
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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 11, 2019, 4:44am UTC](https://discourse.processing.org/t/draw-line-on-image/14587/5 "2019-10-11T04:44:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![darinb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/darinb/32/3792_2.png) [@darinb](https://discourse.processing.org/u/darinb)\
**Post date:** [October 11, 2019, 6:19am UTC](https://discourse.processing.org/t/draw-line-on-image/14587/6 "2019-10-11T06:19:18Z")

</div>

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. 🙂

Thanks for the comments.

–Darin

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 11, 2019, 7:03am UTC](https://discourse.processing.org/t/draw-line-on-image/14587/7 "2019-10-11T07:03:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![darinb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/darinb/32/3792_2.png) [@darinb](https://discourse.processing.org/u/darinb)\
**Post date:** [October 11, 2019, 7:18am UTC](https://discourse.processing.org/t/draw-line-on-image/14587/8 "2019-10-11T07:18:32Z")

</div>

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! 🙂

–Darin

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 11, 2019, 7:35am UTC](https://discourse.processing.org/t/draw-line-on-image/14587/9 "2019-10-11T07:35:10Z")

</div>

That sounds very slow…

I mean it’s in setup but still…

Did you look at my idea?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 11, 2019, 8:53am UTC](https://discourse.processing.org/t/draw-line-on-image/14587/10 "2019-10-11T08:53:43Z")

</div>

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()?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 11, 2019, 11:56am UTC](https://discourse.processing.org/t/draw-line-on-image/14587/11 "2019-10-11T11:56:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![darinb](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/darinb/32/3792_2.png) [@darinb](https://discourse.processing.org/u/darinb)\
**Post date:** [October 11, 2019, 9:08pm UTC](https://discourse.processing.org/t/draw-line-on-image/14587/12 "2019-10-11T21:08:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [October 11, 2019, 9:37pm UTC](https://discourse.processing.org/t/draw-line-on-image/14587/13 "2019-10-11T21:37:53Z")

</div>

@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.