Controlling CSS values with mouse in p5.js

p5.js Coding Questions
1

Hi

I have a question about controlling css values with p5.js - for instance setting them according to some interactive input like mouse position.

If I have a (variable) font with css settings I can set using css like so:

   <style>
            @font-face {
                font-family: NoordzijCube;
                src: url(NoordzijCubeGX.woff2);
            }

            .noordzij {
                font-family: NoordzijCube;
                font-size: 200px;
                font-variation-settings: "wght" 30, "cont" 250, "strk" 10;
            }
	</style>

How would I then be able to access for instance the “wght” value of font-variation-settings using p5js and for instance set it with my mouse position? I think I would know how to set the font-size, but since “wght” is a sub-setting(?) of font-variation-settings, I’m not sure how to access that?

Best
Andreas

2

Figured it out thanks to a friend, solution here in case anybody has a similar issue at some point:
https://codepen.io/andreasref/pen/bMZbjB

3

@AndreasRef – thank you for sharing your solution!

The code snippet you shared shows a sine wave update of CSS, but doesn’t actually demonstrate mouse control with input – for example, from mouseX or mouseMoved().

For example, adding this doesn’t work in the CodePen:

function mouseMoved() {
  paragraph.elt.style['font-variation-settings'] = `"wght" ${mouseX}, "wdth" ${100}, "opsz" ${10}`;
}

Is that a limitation of CodePen, or specific to you using noCanvas() – so there aren’t any mouse coordinates – or does the variable mapping work differently?

4

Ooops, wrong link: This codePen does it with the mouse: https://codepen.io/andreasref/pen/bMZbjB

5

Thanks again! Yes, that sketch much more sense as an example of working mouse control…

1 Like
6

hi @AndreasRef, just to be sure, did you mean CSS at the title of your post?

7

Yes I did. Not sure what you mean?

8

It said “CCS” (not CSS) in the title and in the first line of your post. Dan edited the title so it now says CSS, and was confirming the change.

You should also edit your first line :grinning: