How add a parameter for the line thickness to my function myOwnRect made with point

Hi everybody, I was doing this exercise:

/** Program description: 27. Make a function myOwnRect(topLeftX, topLeftY, bottomRightX, bottomRightY)
 that only uses point() as output function (i.e. not line() or rect() etc.). 
 Add a parameter for the line thickness.
 */

but I am stuck in the last part. Can someone help me?

void setup()
{
  size(600, 600);
  background(#ff9999);
  stroke(#0000ff);
  noLoop();
}

void myOwnRect(int tx, int ty, int bx, int by, int thickness)//(topLeftX, topLeftY, bottomRightX, bottomRightY(topLeftX, topLeftY, bottomRightX, bottomRightY)
{
  for (int i=tx; i<=bx; i++)   
  {
    for (int j=ty; j<=by; j++)
    {
      if (i==tx || i==bx || j==ty || j==by)
      { 
        point(i, j);
      }
    }
  }
}
void draw()
{
  myOwnRect(10, 10, 20, 20, 1);
  myOwnRect(10, 100, 250, 250, 3);
  myOwnRect(200, 200, 350, 350, 6);
  stroke(#00ff00);
}

Answers

  • What do you think about this idea below? That is how I would do thickness.

    Kf

    void setup(){
      size(200,200);
       fill(0);
       stroke(0); 
       textSize(22);
    textAlign(CENTER,CENTER);
    }
    
    void draw(){
      background(160);
      text("No Bold",width/2,50);
    
      text("Now is Bold",width/2,150);
      text("Now is Bold",width/2+1,150+1);
    }
    
  • Honestly, I think it's in some way wrong. Or there is a misunderstanding. In myOwnRect(10, 100, 250, 250, 3); the number "3" should be the thickness for the rect of point itself.And the thickness in the rect's border should change when I change that parameter. And it should be very easy like I should use only loop (for and while, normal or nested), if, logical operator or relational expressions (like &&,|| ect. and <,>,=> ect.) ...simple things. And I don't need the function "text or textAlign".

  • Answer ✓

    It was more of an idea of how thickness could be implemented.

    in your case, if thickness was 3 then:

    point(i-1, j);
    point(i, j);
    point(i+1, j);
    

    but then you can replace the previous statements with a for loop to work with different thicknesses. One think to check is if strokeWeight affects the results of the point() function. If it is so, then you can discard my previous ide and instead, call strokeWeight() at the beginning of your function.

    Kf

  • edited March 2017 Answer ✓
    void setup() {
      size(500, 400);
      noLoop();
      stroke(#0000ff);
    }
    
    void draw() {
      background(#ffa0a0);
    
      myOwnRect(10, 10, 20, 20, 1);
      myOwnRect(10, 100, 250, 250, 3);
      myOwnRect(200, 200, 350, 350, 6);
    }
    
    void myOwnRect(int tx, int ty, int bx, int by, int thick) {
      pushStyle();
      strokeWeight(thick);
    
      for (int x=tx; x<=bx; ++x)  for (int y=ty; y<=by; ++y)
        if (x==tx || x==bx || y==ty || y==by)  point(x, y);
    
      popStyle();
    }
    
  • With all due respect I think you're better of sticking to existing functions purely due to performance reasons. They work in a different manner. No point in reinventing the wheel.

  • Goodmorning! Thank you all of you. GoToLoop made the best answer because I can change thickness's parameter when I change int thickness (in number), I was looking for something like it, Thank you a lot! (now I must study this solution) but even Kfrajer (even if it's not correct) is interesting because he show me a different way to do thickness, so thank you. ps. Lord_of_the_Galaxy I can understand more or less what you mean but I don't know how to do it. Any suggestion?

  • Answer ✓

    Lord_of_the_Galaxy is questioning the task that has been given to you. But I don't think we can't criticize that.

    You need 4 or 2 independent for loops.

    Obviously point seems to use strokeWeight

    Otherwise make a new function pointWithDiameter and male a double/ nested for-loop for thickness kfrajer said

  • edited March 2017 Answer ✓

    There are of course many different solutions to this (in my opinion) pointless and performance reducing task. And all these solutions seem to have (in my opinion, again) a glaring problem - there's no use at all of the fill color. Does the task (somewhere else, perhaps) specify to ignore the fill color, or is that a mistake on your (the OP's) part? If so, there is (once again in my opinion) no point in something like "line thickness". Otherwise, the task at hand is clearly more complicated (you need to access the variable fillColor(if my memory serves me right) of the internal variable g of PApplet class (which is the base class of every sketch, so to speak) and use it as the new stroke, besides some other concerns). I believe now you understand why I criticised the task as such.

  • @Chrisr You say -

    But I don't think we can't criticize that.

    Was the double negative intended or just a typo?

  • edited March 2017

    We can't criticize your criticism! ;-)

    Probably a typo.

    The task is a given and can hardly be ignored in our school system.

    It teaches you a few things though:

    • make a function with multiple parameters; understanding how line() internally works; understand for loops; understand the coordinate system...
  • edited March 2017 Answer ✓

    step 1: doing only two sides; also with strokeWeight()

    void setup() {
      size(500, 400);
      noLoop();
      stroke(#0000ff);
    }
    
    void draw() {
      background(#ffa0a0);
    
      myOwnRect(10, 10, 20, 20, 1);
      myOwnRect(10, 100, 250, 250, 3);
      myOwnRect(200, 200, 350, 350, 6);
    }
    
    void myOwnRect(int tx, int ty, 
      int bx, int by, 
      int thick) {
      pushStyle();
      strokeWeight(thick);
    
      {
        int y=ty;
        for (int x=tx; x<bx; x++) { 
          point(x, y);
        }
      }
    
      {
        int x=tx;
        for (int y=ty; y<by; y++) {
          point(x, y);
        }
      }
    
      popStyle();
    }
    
  • edited March 2017 Answer ✓

    step 2: without using strokeWeight() : solution for the horizontal part with offset:

    void setup() {
      size(500, 400);
      // noLoop();
      stroke(#0000ff);
    }
    
    void draw() {
      background(#ffa0a0);
    
      myOwnRect(10, 10, 20, 20, 1);
      myOwnRect(10, 100, 250, 250, 3);
      myOwnRect(200, 200, 350, 350, 6);
    }
    
    void myOwnRect(int tx, int ty, 
      int bx, int by, 
      float thick) {
    
      pushStyle();
    
      { // ----> right 
        int y=ty;
        for (float offset=-thick/2.0; offset<thick/2.0; offset+=0.2) 
          for (int x=tx; x<bx; x++) { 
            point(x, y+offset);
          }
      }
    
      { // | down 
        int x=tx;
        for (int y=ty; y<by; y++) {
          point(x, y);
        }
      }
    
      popStyle();
    }
    
  • It's possible use the fill color's function (answering to Lord_of_the_Galaxy), and Chris: your step "1: doing only two sides; also with strokeWeight()" is really interesting (event the number "2"). I will try to add some loop in order to make even the others sides (and complete the rectangle). ps. I am very sorry for the delay of my answer.

  • Then indeed one must create a more complex algorithm. I leave that to you, since this is just a way for you to learn and otherwise serves no purpose. Nonetheless, I'll give you a small hint, with an extra, larger hint guaranteed tomorrow followed by the solution the next day.

    Hint

    You'll need to use three things - pushStyle(), popStyle() and stroke(g.fillColor) in order for the function to work properly.

  • (Besides, I must insist upon your using int data type for thickness as well. I ask that you trust me in my judgment upon this matter.)

  • Answer ✓

    I brought in float here to compensate for smooth() or whatever

  • Lord_of_the_Galaxy you are right, I am just trying to understand in order to learn. Thank you for the hint. I would love to ask you guys, can be these rectangles that we drew 2D graphical shape? Then I was thinking to create a function that draw an ellipse using only point() as output function (i.e. not line(), not rect(), etc.) too. And I start with this thinking: 1) I can define circle's center xy and the define the distance r (ray) from where I should draw the point. Or 2) Define again circle's center cx,cy , use the function dist and tell to the function to draw from dist xy. What would you think?

  • Answer ✓

    Ellipse:

    Possible with your approach (1) :

    use radius multiply cos (angle) for x

    And same with sinus for y.....

    Gives you a circle

    Use a different radius for both to get ellipse I think

  • edited March 2017

    Yes, you use different "radii" for x and y to get an ellipse.

    But I already told you - don't bother to create this large bunch of your own functions that just do the same thing as already existing functions. Unless your "school" tells you specifically, don't waste your time. Processing, Java (I have no idea what graphics language JAVA2D uses) and OpenGL have already done the job, and have also "optimised" them to be vary fast. Instead, use your time to create something artistic. Try to make nice looking 2D shapes using only point(), rect(), line(), ellipse() and triangle().

  • edited March 2017

    Now for your next hint (this took some time, creating hints is tougher than just getting the solution) -

    • You need to do the inside part (the "fill") first to make it easier.
    • You may use two pushStyle()/popStyle(), one for the full function and enclosing only the "fill" part in order not to lose the current stroke. Or you could go about it by storing the stroke in a variable before changing the stroke so that you can change it back - that's your choice. (For the latter, you need to store g.strokeColor, as you probably guessed).
    • It will be much easier if you also use strokeWeight(thick).
    • First try getting the outline part (the "stroke") right, then the inside part is easier. Use two for loops.
    • Lastly, this is a line from my solution. You may use it - for(int x = tx + th; x < bx; x += th){ (I renamed thick to th.
  • (If someone can make that no break HTML tag to work in my comment, please do help)

  • Hi Lord_of_the_Galaxy unfortunately I don't know how to help you. But thank you again for your help. Thank you too Chris, I am trying both the approaches

  • If you can get your answer in 6 hrs, pls post here. After that, I shall post my own solution. Best of luck!

  • Thank you. Just to be sure: are you talking about the last question about draw an ellipse using only point() as output function?

  • edited March 2017

    I'm just talking about the original question. The rectangle. You've done that already?

    And besides, I've already insisted that you don't waste your time reinventing the wheel. What you're doing is try to carve out a crude stone wheel when we already have good rubber ones (not a very nice comparison, is it?).

  • ok! About the original I think GoToLoop made already a sort of good answer the 15th of March but I am open to different solutions and anyway I need to try to make one by myself. So I will try again. For the circle I know what you mean but I think it can be important to understand how it can work.

  • edited March 2017 Answer ✓

    I thought you were working on getting the fill also working? Right now there is no fill in the rectangle, just a big single coloured rectangle.

    And perhaps you haven't yet learnt it, but there is this thing called "shape" in processing. Read about them here - https://processing.org/reference/beginShape_.html, and then you can attempt something atleast more worthwhile than a plain circle.

  • I agreed with you. No more circle. Thanks

  • So you got it? I hope you did, because I'm about to post my own answer -

    void myOwnRect(int tx, int ty, int bx, int by, int th){
       //to make it easier to understand, I've just made up a function without the extra optimisations I could add
       pushStyle();
       strokeWeight(th);
       int scolor_temp = g.strokeColor;
       stroke(g.fillColor);
       for(int x = tx + th; x < bx; x += th){
          for(int i = 0; i < by - ty; i++){
             point(x, ty + i);
          } 
       }
       stroke(scolor_temp);
       for(int i = 0; i < bx - tx; i++){
          point(tx + i, ty);
          point(tx + i, by);
       }
       for(int i = 0; i < by - ty; i++){
          point(tx, ty + i);
          point(bx, ty + i);
       } 
       popStyle();
    }
    
  • Hi Lord_of_the_Galaxy thank you for your post! My computer crashed and I lost my last exercises (it was incomplete anyway). I am answering from my mobile phone. I try again after the weekend and I will post my solution. If it's too hard I 'll tell you. What do you think?

  • edited March 2017 Answer ✓

    Ok. Best of luck. BTW I did my own coding on an iPad. Fully. Never even tested on a computer. But it will still work. If you're using a mobile/tablet, you can use one of the unofficial Processing apps (search on your AppStore).

    Also note that I used push/pop style only once, because I realised that using it will cause more performance penalty. I should've made it to use none, but didn't have the time to research extra.

  • edited April 2017

    Lord_of_the_Galaxy I have downloaded the unofficial Processing apps, some of them works others don't but thanks (I will test them). I tried your last solution and it works too, it's great. I didn't finish the color's goal but I can share this one:

    void setup()
    {
      size(500,500);
      noLoop();
    }
    
    // With the thickness parameter
    void myOwnRect(int topLeftX,int topLeftY,int bottomRightX,int bottomRightY,int lineT)
    {
      if (lineT<1) lineT=1;
      for(int i=topLeftX;i<=bottomRightX;i++)
      {
        for(int v=topLeftY;v<=bottomRightY;v++)
        {
          if((i==topLeftX||i==bottomRightX)||(v==topLeftY||v==bottomRightY))
          {
            point(i,v);
            for(int t=0;t<lineT;t++)
            {
              point(i+t,v+t);
              point(i+t,v-t);
              point(i-t,v-t);
              point(i-t,v+t);
            }
          }
        }
      }
    }
    
    void draw()
    {
      // With thickness
      myOwnRect(15,20,240,200,5);
      myOwnRect(50,60,350,350,3);
      myOwnRect(175,300,400,400,1);
    }
    

    ps. Then I should honestly say that I didn't get really why you chose to use push/pop style.

  • For the strokeWeight.

Sign In or Register to comment.