Styling a rectangle in p5.js: Tips and tricks

In my p5.js code, I created a rectangle using rect():

rect(10, 10, 10, 10);

Now, I want to add some style to it with a box-shadow effect:

box-shadow: 20px 20px 50px #00d2c6,
-30px -30px 60px #00ffff;

However, when I tried to apply the style using the documentation's method:

let testSquare = rect(10, 10, 10, 10);
testSquare.style('box-shadow: 20px 20px 50px #00d2c6,');
testSquare.style('-30px -30px 60px #00ffff;') ;

I encountered an error:

platformer.js:7 
Uncaught TypeError: testSquare.style is not a function
    at draw (platformer.js:7)
    at p5.redraw (p5.js:49679)
    at p5.<anonymous> (p5.js:44342)
    at p5.<anonymous> (p5.js:44236)
    at new p5 (p5.js:44525)
    at _globalInit (p5.js:46308)

If anyone knows how to solve this issue and successfully style the rectangle, please share your insights.

javascriptcssp5.js

Answer №1

I concur with the feedback provided, it's not possible to alter the style completely. However, there are alternative methods that can be used, although they may not achieve the exact same outcome.

  1. Create a dark rectangle slightly shifted (depending on the direction of light)
  2. Overlay the original rectangle on top at its initial position.

For example, with light emanating from the top-left:

fill(100,100,100); //A shade of dark grey
rect(10 + 5, 10 + 5, 10, 10);  //Slight offset
fill(original color);
rect(10,10,10,10);

Answer №2

Modifying the appearance of the shape created using rect() is not possible. The function simply adds a visual element to the canvas without affecting any underlying (DOM) object. It's akin to painting on a digital image.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue in Chrome where hover state does not persist after clicking, occurring sporadically

It's surprising that I couldn't find any information about this on Google. This bug is really annoying, and I'm not sure if it can be fixed without an update from Google for their browser. Description of the issue: When clicking on an eleme ...

htmlcssgoogle-chrome

Unable to utilize object functions post-casting操作。

I've encountered an issue while trying to access some methods of my model object as it keeps returning an error stating that the function does not exist. Below is the model class I have created : class Expense { private name: string; private ti ...

javascriptangularjstypescript

Store the information retrieved from an Ajax call regarding an artist on the page, ensuring that it is only saved once for that

I have been working on a single-page application that utilizes the Spotify REST API and JQuery to enable users to search for an artist and display their information on the page. However, I want to ensure that the app saves details about each artist only ...

javascriptjqueryajaxapispotify

Tips for inserting an HTML table into a div element using JQuery/JavaScript

I currently have a navigation bar with only two items. While I may potentially add more items in the future, for now I am content with just these two. Upon opening the page, my goal is to display the content of the first item in the navigation bar. Each it ...

javascriptjqueryhtmlcss

I'm struggling to figure out why the CSS isn't working properly

i found this markup like shown here i am curious why it appears that lines 12 & 13 .notes:link span, .notes:visited span { ... seems to be functioning .comments span, background-position: -16px -16px; } .permalink:link span, .permalink:visited sp ...

css

What is the best way to create separate positions for items within a single div?

https://i.sstatic.net/FQRY4.jpgAfter looping through various names and accessing them from a single div using {{item}}, I encountered an issue. All the names are within one parent element. This is the code snippet: <div :style="image" cl ...

javascripthtmlcssvue.jsflexbox

Pagination does not refresh when conducting a search

HTML Code: The following HTML code displays a table with a search filter. . . <input type="search" ng-model="search.$" /> <table class="table table-striped table-bordered"> <thead> <tr> <th><a href ...

javascriptangularjspaginationangularjs-ng-repeatangular-ui-bootstrap

What is the best way to create a dynamic icon using React and TypeScript?

Excuse me, I am new to using React and TypeScript. I'm having trouble getting the icon to change based on the status in AppointmentType. The body color is working fine, but the icons are not changing. Can someone please help me solve this issue? const ...

javascriptreactjstypescripticonsmaps

Encountering problems when trying to mock values with Jest

I'm currently integrating Jest into an existing project that is already utilizing enzyme and jasmine. Although I have installed the jest packages and configured them initially, I am facing an issue where the mock data is not being supplied correctly. ...

javascriptreactjsunit-testingjestjsenzyme

Spacious width that doesn't require a horizontal scrollbar for navigation

My dilemma is with the width of my body and background image. I set the body width to 1920px to match the background-image for the header. However, since I have a narrower wrapper inside the body, the header background's width gets cut off by the wrap ...

css

The functionality in the React Native code that uploads images to an S3 bucket is currently failing to initiate the network request

I have been using a redux-observable epic to upload images to my AWS S3 bucket through react-native-aws3. It has been functioning smoothly for quite some time. However, recently it seems to have stopped entering the .map and .catch blocks of code. I suspec ...

javascriptreact-nativeamazon-s3react-native-iosredux-observable

Inconsistencies in date formatting between Javascript and PHP yield varying results

While working with PHP, I noticed this: echo date("Y/m/d",786668400); The output is 1994/12/06 However, when I tried the same thing in JavaScript: console.log(new Date(786668400*1000).getDate() + "." + (new Date(786668400*1000).getMonth() + ...

javascriptphpdatetime

Encountering deployment problems with React and TypeScript involving router on Github Pages

After successfully running locally, I encountered a 404 error when deploying the website using "npm run deploy." My application is built with React and TypeScript, utilizing react-router-dom BrowserRouter for navigation between pages. I've spent 7 h ...

javascriptreactjstypescriptreact-routergithub-pages

the mobile website is not properly aligned on a horizontal axis

As I work on creating a mobile version of my website, I've come across a challenge: The entire site fits perfectly on the computer at a browser width of 480px, but when viewed on my mobile phone (regardless of the browser used), it leaves space on the ...

javascripthtmlcssmobileweb

Encoding a string in JSON that contains the "#" symbol along with other special characters

The client side javascript code I have is as follows: <html> <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(document).ready(function() { //var parameters = "a=" + JSON.stringify( ...

javascriptjsonnode.jsencoding

Unable to find the matching closing parenthesis ')" before reaching the end

I've been struggling to create a regular expression that can identify strings like the ones below: var p1=@VAL([Test1Q1].[Bandwidth]) var p2=@VAL([Test1Q1].[Usages (KB)]) The criteria is to find strings starting with @VAL( and ending before the firs ...

javascriptjqueryregex

The functionality of displaying one div while hiding another upon click seems to be malfunctioning

Can anyone lend a hand? I'm having trouble with my code - the section isn't showing up after clicking the button. <script> $("#img1").on('click', function() { $("#div1").fadeIn(); $("#div2,#div3,#div4").fadeOut(); }); $(" ...

jquerycssshow-hide

No longer will popups be blocked

I've been trying to work with jQuery to create a popup. But I'm facing an issue where my code is being blocked by Google. Here is the code snippet: <script type="text/javascript"> $(document).ready(function () { var flag = true; ...

javascriptjquery

"Unlock the secrets to commanding respect in the web form layout by mastering the art

I have a fieldset that includes a legend with potentially long text content. I need the legend to only take up 50% of the width of the fieldset. Currently, when the legend is too lengthy, it still occupies 50% of the space but causes the entire fieldset ...

htmlcssfieldset

How can I anchor a div Banner saying "Get 50% off our products" to the Navbar directly above it?

Bootstrap Question: How can I attach the div Banner ("50% off of our products") to the Navbar directly above it? The structure looks like this: <Navbar> </Navbar> <div> <span>Discount: 50% off of our products </span </di ...

javascriptcssfrontendbootstrap-5react-fullstack