Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angled Booleans #17

Closed
tjvr opened this issue Jun 11, 2013 · 19 comments

Comments

Projects
None yet
5 participants
@tjvr
Copy link
Member

commented Jun 11, 2013

Boolean blocks are currently rounded (border-radius) as the CSS for triangular ends is tricky. example

joooni has a working example using images and JS. The JS is doable, but I don't want to use images as I'd need 14 colour variations...

@tjvr

This comment has been minimized.

Copy link
Member Author

commented Sep 1, 2013

I can add angles to empty boolean slots easily enough, because they have a fixed height.

See the angles branch: 9687949

@mathfreak231

This comment has been minimized.

Copy link

commented Sep 17, 2013

I don't really like joooni's example; it leaves too much space between the pointed end of the outside one and the inside one.

What I mean is that the images take space that doesn't look at all like the original Scratch.

Sorry if I'm being unclear...

@tjvr

This comment has been minimized.

Copy link
Member Author

commented Sep 17, 2013

@mf Agreed. I'm sure that can be tweaked. But we don't really want to use images anyhow.

@tjvr

This comment has been minimized.

@tjvr

This comment has been minimized.

Copy link
Member Author

commented Sep 24, 2013

@mathfreak231 Would it make sense to have angled empty boolean slots, but not predicates (boolean reporters)?

You might like to ask the wiki guys about this.

@mathfreak231

This comment has been minimized.

Copy link

commented Sep 26, 2013

@blob8108 I'll do so most likely tomorrow, when I finally get some free time in Computers. Right now our teacher is showing us all these websites where we can select books that we've read, make a profile, put it on our websites, etc. and we haven't gotten much free time. :P

@pjrader1

This comment has been minimized.

Copy link

commented Jan 2, 2014

I'm just throwing this out there, but couldn't you use % values to set three of the borders on the ends of the boolean? When you use three of border's -left -right -top or -bottom, then it turns into a triangle: http://css-tricks.com/snippets/css/css-triangle/

Personally, I'm not sure how to implement it into the script, but it might be an option.

@tjvr

This comment has been minimized.

Copy link
Member Author

commented Jan 2, 2014

@gp1 Yeah, I looked into that. Sadly we also need borders, which makes things more complicated.

@pjrader1

This comment has been minimized.

Copy link

commented Jan 2, 2014

@blob8108 Hmmmmmm. Well, it isn't the most efficient way of doing it, and it would need to be cleaned up a bit, but it looks similar to a border effect. I did a similar thing in my LWJGL 2D Java game. Here is the CSS triangle thing with a border: http://jsfiddle.net/cakeisajoke/eSz3C/
Isn't too complicated, just used some Pythagorean Theorem.

P.S. Hope you aren't using IE. :-P
In all seriousness, IE does support the triangle borders and the rotating line. You just have to add a little extra CSS to make it work (like, one extra line. I just didn't add it just because I was whipping it together real fast).

@tjvr

This comment has been minimized.

Copy link
Member Author

commented Jan 2, 2014

@gp1 Doesn't seem to be variable-height.

@pjrader1

This comment has been minimized.

Copy link

commented Jan 2, 2014

@blob8108 Oh, oh, oh, oh, oh, I get it now. It won't work because CSS triangles have to be a 45, 45, 90 triangle. Sorry, I wasn't understanding that earlier. :-/

@tjvr

This comment has been minimized.

Copy link
Member Author

commented Jan 2, 2014

@gp1 The angle isn't an issue, it's the size. The width needs to scale with the height.

@xt449

This comment has been minimized.

Copy link

commented Mar 24, 2014

So, you are not going to add angled ends to the boolean reporters?

@tjvr

This comment has been minimized.

Copy link
Member Author

commented Mar 25, 2014

@xt449 No, sorry.

@xt449

This comment has been minimized.

Copy link

commented Mar 25, 2014

</3

@mrjacobbloom

This comment has been minimized.

Copy link

commented Apr 28, 2015

I threw something together: http://jsfiddle.net/Airhogs777/4tan9wmL/

@tjvr

This comment has been minimized.

Copy link
Member Author

commented Apr 28, 2015

Nice! That's pretty similar to what I came up with. But it has problems like needing to set height, as you've pointed out in your description.

@mrjacobbloom

This comment has been minimized.

Copy link

commented Apr 28, 2015

I found a way to set the height (I tried to explain this in the fiddle) I set min-width and min-height to the value I wanted and had the pseudo-elements inherit that. The part I've been struggling with is moving the triangles left and right so they line up with the edge of the block

@tjvr tjvr modified the milestone: v3.0 Mar 28, 2016

@tjvr tjvr referenced this issue Apr 3, 2016

Merged

SVG renderer #94

@tjvr

This comment has been minimized.

Copy link
Member Author

commented Apr 9, 2016

Fixed via #94 :D

@tjvr tjvr closed this Apr 9, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.