Shadows for p5

[TanviKumar]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Most appropriate sub-area of p5.js?

• Color
• Core/Environment/Rendering
• Data
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

New feature details:

Currently p5.js does not have any support for shadows. It's one of the very few things missing and should be relatively easy to implement too! This links to the documentation about shadows.

It would be great if a method could be added to allow the user to create shadows with ease. Perhaps multiple methods could be created to change specific properties of the shadows, though I'm unsure as to how useful that might truly be. Hoping this issue can be a space for discussion about this.

In case the community believes that this would be a useful addition, I've written some code for a method for creating shadows, hopefully that can be a good start!

[lmccart]

I'm not seeing a lot of response around this one right now and I think it may be beyond the scope of the library for now. It is possible to call these methods natively on the canvas object, so I'm not sure a wrapper of these is necessary. Let's revisit in the future if others express the same need. Thanks @TanviKumar

[lekmao]

@TanviKumar
Do you have an example of using "drop shadows" in 2D art?
New to p5.js and working on an assignment. I would like to add depth to it. Any help?
Thanks!

[flomerboy]

An example in the documentation would be very helpful - I don't know how to "call these methods natively on the canvas object" and I would expect the average p5js user to not be familiar with it either.

[lmccart]

@jatin33 maybe you'd like to look at this one?

[Pedroxam]

Adding shadow to objects is easy :

var context = drawingContext; // or p5.drawingContext
context .shadowOffsetX = 5;
context .shadowOffsetY = -5;
context .shadowBlur = 10;
context .shadowColor = '#FFF';

[8o8inCodes]

Adding shadow to objects is easy :

var context = drawingContext; // or p5.drawingContext
context .shadowOffsetX = 5;
context .shadowOffsetY = -5;
context .shadowBlur = 10;
context .shadowColor = '#FFF';

Here is a documentation
https://p5js.org/reference/#/p5/drawingContext

[nnmrts]

Yeah drawing a line without p5 on a canvas is "easy" too:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();       // Start a new path
ctx.moveTo(30, 50);    // Move the pen to (30, 50)
ctx.lineTo(150, 100);  // Draw a line to (150, 100)
ctx.stroke();

That's not the point of the issue though. Saying "I'm not sure a wrapper of these is necessary" would imply that 90% of p5.js is not necessary, most of it is just a wrapper around canvas stuff.

But I guess it's not in the scope of a creative coding library to add more accessible support for shadows.