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

Shubham · February 3, 2021, 1:26pm

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:

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?

josephh · February 8, 2021, 7:12pm

Hi,

The p5js website source code is hosted on GitHub here :

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. Please feel free to edit src/math/calculation.js and issue a pull request!

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

github.com

processing/p5.js/blob/1.1.9/src/math/calculation.js#L561


      
          */
          p5.prototype.min = function(...args) {
           p5._validateParameters('min', args);
           if (args[0] instanceof Array) {
             return Math.min.apply(null, args[0]);
           } else {
             return Math.min.apply(null, args);
           }
          };
          
          /**
          * Normalizes a number from another range into a value between 0 and 1.
          * Identical to map(value, low, high, 0, 1).
          * Numbers outside of the range are not clamped to 0 and 1, because
          * out-of-range values are often intentional and useful. (See the example above.)
          *
          * @method norm
          * @param  {Number} value incoming value to be normalized
          * @param  {Number} start lower bound of the value's current range
          * @param  {Number} stop  upper bound of the value's current range
          * @return {Number}       normalized number

Shubham · February 8, 2021, 7:49pm

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?

josephh · February 8, 2021, 9:19pm

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

You can check out the CSS files on GitHub : p5.js-website/src/assets/css at main · processing/p5.js-website · GitHub

Topic		Replies	Views
Animating maths in p5.js Gallery	2	2163	August 18, 2021
Processing code to p5.js Coding Questions	5	726	January 5, 2019
Processing X P5JS (image quality on canvas) Coding Questions	7	720	December 26, 2021
Data Visualizations in p5.js Project Guidance	1	1319	March 29, 2021
Processing code to p5.js code Coding Questions	2	233	August 8, 2022

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

Related topics