This repository was archived by the owner on Dec 5, 2018. It is now read-only.
This repository was archived by the owner on Dec 5, 2018. It is now read-only.
Rounding a stroked rectangle shifts its location #219
Description
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.
Activity
Pomax commented on Dec 13, 2015
yep, that certainly look like a bug. thanks for reporting it.
Pomax commented on 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 commented on Jan 18, 2016
https://GitHub.com/Khan/live-editor/issues/519
kaizensoze commented on Feb 18, 2016
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 commented on Feb 18, 2016
nice find!