p5.js

p5.js copied to clipboard

Processing has a shapeMode() function that lets you set the draw position to be CENTER, CORNER or CORNERS This is missing from P5 and means that extra work is needed when defining a shape.

• [x] New feature request

Most appropriate sub-area of p5.js?

• [x] shape https://github.com/processing/p5.js/blob/0.7.3/src/core/shape

New feature details:

shapeMode() function that lets you set the draw position to be. shapeMode(CENTER) shapeMode(CORNER) shapeMode(CORNERS)

Really cool feature :+1: Would like to work on this. Although I am not free this weekend, would implement the feature on Monday.

Hello, What I found out was there is no shape() function in p5, but the support for .OBJ files is via model(), while there is no native support for .SVG files, but can be added via image(), which has the same imagemode(). Well, I don't see the need for the shapemode() feature, but something on the lines of modelmode() can be implemented, but I don't know about the .SVG, and custom shapes, which has to be implemented first.@hellonearthis @stalgiag Can you please present your views on this?

I was asking about shapeMode() in relation to beginShape() used in making custom shapes. Even having access to it's width and height would help. SVG would be a different story.

Hi @sanketsingh24 I believe the requested feature is an equivalent to rectMode for custom shapes made with beginShape() in the 2D renderer. @hellonearthis I think that making this would present a number of challenges because there currently is not an equivalent to PShape in p5. See this discussion for an explanation of the challenges involved in creating this.

I think your over complexing it. Yes, it would be an equivalent of rectMode. It would not be an SVG related thing as far as I can tell. It would be an attribute of beginShare().
Maybe I should have said it was beginShapeMode( CORNER || CORNERS || RADIUS || CENTER )

I don't see an easy way to do it as a p5 custom shape doesn't built/record it's width or height as it's being constructed. So a sketch like this means the user has to do extra coding to build that data themselfs.

Is there a way that shapeBegin() could be an object, like let my-shape = beginShape() so that things like my-shape.width my-shape.height be accessed and (off topic) have that shape drawn using another function like paint(my-shape,x,y). Sorry digressed, just knowing the width and height so CENTER would help rotating custom shapes.

I agree this is separate from SVG support, but the requested feature would suggest a p5.Shape class that stores and updates info about the bounds and mode so that it can shift drawing accordingly.

Ok, so it should be only for custom shapes made by beginshape() ? I would start to work on this now.

@stalgiag i would like to work on this issue

Hi @devashish1099 I am not sure if we have a consensus on this feature yet.

I will add the discussion label to attract opinions on whether the community is in favor of adding a p5.Shape class.

Has there been any progress? I'm working on visualising some 3D shapes made out of cubes and it would be very nice if I could create a custom shape to eliminate the lines between the cubes.

Closing this one as there have been a lot of changes in the area. We have p5.Geometry for 3D and na internal p5.Shape that could be considered to be made public, so if someone is interested to make a new issue about that, they are welcome to do so in the p5.js 2.x board!