# Want to make some styling changes in images/visualization in p5.js sub-area of math

**URL:** <https://discourse.processing.org/t/want-to-make-some-styling-changes-in-images-visualization-in-p5-js-sub-area-of-math/27565>\
**Category:** Development\
**Created:** [February 3, 2021, 1:26pm UTC](https://discourse.processing.org/t/want-to-make-some-styling-changes-in-images-visualization-in-p5-js-sub-area-of-math/27565 "2021-02-03T13:26:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shubham](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@Shubham](https://discourse.processing.org/u/Shubham)\
**Post date:** [February 3, 2021, 1:26pm UTC](https://discourse.processing.org/t/want-to-make-some-styling-changes-in-images-visualization-in-p5-js-sub-area-of-math/27565/1 "2021-02-03T13:26:09Z")

</div>

Hi, I am new to the p5.js codebase and found some styling error in some math sub-area images, but I couldn’t find where these images/visualization is being rendered. I want to change some text alignment and image size in these images/visualization.

For example:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/22df57eaea4d79a3a6b027a5b9f6766579ad03d9.png)

I want to know from where these images/visualizations are being rendered, and if I want to change, for example, its text alignment or font size, how can I do it?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 8, 2021, 7:12pm UTC](https://discourse.processing.org/t/want-to-make-some-styling-changes-in-images-visualization-in-p5-js-sub-area-of-math/27565/2 "2021-02-08T19:12:06Z")

</div>

Hi,

The p5js website source code is hosted on GitHub here :

> **[GitHub - processing/p5.js-website: p5.js website built using Node.js, Grunt,...](https://github.com/processing/p5.js-website)**
>
> p5.js website built using Node.js, Grunt, YAML and Assemble - GitHub - processing/p5.js-website: p5.js website built using Node.js, Grunt, YAML and Assemble

But I had trouble to search for this particular example of the `norm()` function.

I saw that at the bottom of the reference page for the function, you have a link to the source file :

> Notice any errors or typos? [Please let us know.](https://github.com/processing/p5.js/issues) Please feel free to edit [src/math/calculation.js](https://github.com/processing/p5.js/blob/1.1.9/src/math/calculation.js#L561) and issue a pull request!

**But the example is not hosted on the p5js website repository, it’s in the source code!!** 😉

> <https://github.com/processing/p5.js/blob/1.1.9/src/math/calculation.js#L561>

---

<div class="post-metadata">

**Author:** ![Shubham](https://avatars.discourse-cdn.com/v4/letter/s/85e7bf/32.png) [@Shubham](https://discourse.processing.org/u/Shubham)\
**Post date:** [February 8, 2021, 7:49pm UTC](https://discourse.processing.org/t/want-to-make-some-styling-changes-in-images-visualization-in-p5-js-sub-area-of-math/27565/3 "2021-02-08T19:49:10Z")

</div>

Hi @josephh, Thank you so much for the reply 🙏, but I actually want to know more about these images generated by this code. For example, suppose if I want to change the size of these images or change the background color from grey to something else or any CSS styling if I want to apply. Can I able to make these changes?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 8, 2021, 9:19pm UTC](https://discourse.processing.org/t/want-to-make-some-styling-changes-in-images-visualization-in-p5-js-sub-area-of-math/27565/4 "2021-02-08T21:19:05Z")

</div>

> [@Shubham](#):
>
> I want to change the size of these images or change the background color from grey to something

For the background, it’s in the example code : `background(200)`.

For the size, it’s the size defined in the `createCanvas()` function but in the source file, you can’t see it.

I searched on the repository but it seems that they are automatically inserting the `setup()` function and I didn’t find it!

It’s not written on a README, can someone tell us where it is? @lmccart

* * *

> [@Shubham](#):
>
> any CSS styling if I want to apply

You can check out the CSS files on GitHub : [p5.js-website/src/assets/css at main · processing/p5.js-website · GitHub](https://github.com/processing/p5.js-website/tree/main/src/assets/css)