8000 Rounding a stroked rectangle shifts its location · Issue #219 · processing-js/processing-js · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
This repository was archived by the owner on Dec 5, 2018. It is now read-only.

Rounding a stroked rectangle shifts its location #219

Open
lgto4 opened this issue Dec 12, 2015 · 5 comments
Open

Rounding a stroked rectangle shifts its location #219

lgto4 opened this issue Dec 12, 2015 · 5 comments
Labels
bug

Comments

@lgto4
Copy link
Contributor
lgto4 commented Dec 12, 2015

See the simple demonstrtion at https://www.khanacademy.org/computer-programming/wat3/6754888494743552

If you specify a fifth argument to rect, the location of the rendered rectangle is shifted, even when the value of the fifth argument is zero.
@Pomax Pomax added the bug label Dec 13, 2015
@Pomax
Copy link
Member
Pomax commented Dec 13, 2015

yep, that certainly look like a bug. thanks for reporting it.

@lgto4 lgto4 changed the title Rounding a rectangle shifts its location Rounding a stroked rectangle shifts its location Dec 13, 2015
@Pomax
Copy link
Member
Pomax commented Jan 18, 2016

Some information that can help reduce the "where is this going wrong", it looks like with a numeric argument, placement is correct, so: this works

/* Draw a larger rectangle using scaling. */
var largerRect = function(x, y, w, h, r1) {
    pushMatrix();
    scale(40);
    rect(x, y, w, h, 3);
    popMatrix();
};

but this does not:

/* Draw a larger rectangle using scaling. */
var largerRect = function(x, y, w, h, r1) {
    pushMatrix();
    scale(40);
    rect(x, y, w, h, r1);
    popMatrix();
};

The source as is used will breaks in real Processing, as there is a call to largerRect with only four arguments on line 20, but in JavaScript we can deal with that just fine.

@GABBAR1947 The rect function already filters on that undefined value, moving to roundedRect$2d if it sees a fifth (or more) argument, so that's probably where things are going wrong. Have a look at https://github.com/processing-js/processing-js/blob/master/src/Processing.js#L8458 for the rect code, and then you should be able to follow the function calls quite easily.

@GoToLoop
Copy link
Contributor

https://GitHub.com/Khan/live-editor/issues/519

@kaizensoze kaizensoze mentioned this issue Feb 18, 2016
Open
@kaizensoze
Copy link

The reason the implicit roundedRect is unexpectedly translated is due to a translate(0.5, 0.5), which, with a scale of 40, translates the rect 20 pixels over in each direction.

https://github.com/processing-js/processing-js/blob/master/src/Processing.js#L8424-L8427

@Pomax
Copy link
Member
Pomax commented Feb 18, 2016

nice find!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Pomax @kaizensoze @lgto4 @GoToLoop
0