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

MirielLind

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

kfrajer

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

MirielLind

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

kfrajer

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

GoToLoop

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();
}

Lord_of_the_Galaxy

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.

MirielLind

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?

Chrisir

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

Lord_of_the_Galaxy

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.

Lord_of_the_Galaxy

@Chrisr You say -

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

Was the double negative intended or just a typo?

Chrisir

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

Chrisir

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();
}

Chrisir

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();
}

MirielLind

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.

Lord_of_the_Galaxy

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.

Lord_of_the_Galaxy

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

Chrisir

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

MirielLind

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?

Chrisir

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

Lord_of_the_Galaxy

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

Lord_of_the_Galaxy

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.

Lord_of_the_Galaxy

(If someone can make that no break HTML tag to work in my comment, please do help)

MirielLind

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

Lord_of_the_Galaxy

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

MirielLind

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

Lord_of_the_Galaxy

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

MirielLind

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.

Lord_of_the_Galaxy

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.

MirielLind

I agreed with you. No more circle. Thanks

Lord_of_the_Galaxy

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();
}

MirielLind

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?

Lord_of_the_Galaxy

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.

MirielLind

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.

Lord_of_the_Galaxy

For the strokeWeight.