How do you constrain a continuous line on background image?

edited September 2014 in How To...

Hello, I am new to processing and working on a class assignment. I am trying to create a continuous line that stays on only one part of my background image. The problem I'm having is when I upload my background image I can no longer draw anything..the line doesn't stay continuous. Also I would like to be able to constrain the drawing area to only be on one part of my background and I thought I could do this by adding a noFill() rectangle but it's not working. Can someone take a look at my code and help me out? Should I make it into a class? Please and thank you for your time!

PImage img;

void setup() { img = loadImage("bg.png"); size(800,600); }

void draw() { image(img,0,0); stroke(255); if (mousePressed == true) { line(mouseX, mouseY, pmouseX, pmouseY); } }

Answers

  • Hello there haleyhat! I have found the problem in you're sketch. What you need to do is put the image in the setup() function and take it out the the draw();

    Like this:

    PImage img;
    
    void setup() { 
    img = loadImage("bg.png"); size(800,600); 
      image(img,0,0); 
    }
    
    void draw() {
      stroke(0);
      if (mousePressed == true) {
        line(mouseX, mouseY, pmouseX, pmouseY); 
    } 
    }
    

    Hope this helps, RywesTech.

    www.rywestech.com

  • Oh, almost forgot! If you want it to be on only one portion, just create a if statement and a few variables, then use the if statement to say "if the X and Y values are bigger than Bla bla bla, then don't draw there" if you need help on that just ask.

    -RywesTech

    www.rywestech.com

  • Awesome thanks so much! I'll try it out

    Screen Shot 2014-09-28 at 11.37.36 AM

    Is there a simpler way to do this? Also, how would I get the drawing to reset after a minute? Sorry for all the questions but thank you for your help!

  • edited September 2014 Answer ✓

    1st of all, a potential bug warning: 8-X
    Always place size() as the 1st statement within setup()! There are tech problems by not doing so!

    Here's a re-tweaked version. But next time, please post a text code formatted w/ CTRL+K:

    // forum.processing.org/two/discussion/7349/
    // how-do-you-constrain-a-continuous-line-on-background-image
    
    void setup() {
      size(800, 600, JAVA2D);
    
      frameRate(60);
      smooth(4);
      strokeWeight(2);
    
      set(0, 0, loadImage("bg.png"));
    }
    
    void draw() {
      if (mouseX<345 | mouseY>375)  noStroke();
      else                          stroke(-1);
    
      if (mousePressed)  line(mouseX, mouseY, pmouseX, pmouseY);
    }
    

    P.S.: Some online examples: :D

  • I did what you suggested but the drawing isn't going away after a minute..Can I set it up with an array like in your last example? But I'd like to have the line disappear slower than what is in the example. Thanks so much for your time and help!

    PImage img;
    
        void setup() {
          size(800,600);
          frameRate(60);
          smooth(4);
          strokeWeight(2);
          set(0,0,loadImage("bg.png"));
    
        }
    
        void draw() {
           stroke(255);
           if(mouseX<350 | mouseY>365) noStroke();
             else stroke(-1);
          if(mousePressed)  line(mouseX,mouseY,pmouseX,pmouseY);
          }
    
  • edited September 2014

    I did what you suggested but the drawing isn't going away after a minute...

    I didn't modify what your program was doing. Merely re-organized the code lines! /:)

    Can I set it up with an array like in your last example?

    Well, why don't you try to modify it yourself in order to do what you want it to? O:-)

    But I'd like to have the line disappear slower than what is in the example.

    At the very top, there is a constant which determines the arrays' capacity and colors available called NUM. :-B

Sign In or Register to comment.