# Controlling CSS values with mouse in p5.js

**URL:** <https://discourse.processing.org/t/controlling-css-values-with-mouse-in-p5-js/156>\
**Category:** Coding Questions\
**Created:** [May 20, 2018, 12:46pm UTC](https://discourse.processing.org/t/controlling-css-values-with-mouse-in-p5-js/156 "2018-05-20T12:46:12Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [May 20, 2018, 12:46pm UTC](https://discourse.processing.org/t/controlling-css-values-with-mouse-in-p5-js/156/1 "2018-05-20T12:46:12Z")

</div>

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](https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts/) with css settings I can set using css like so:

```auto
   <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

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [May 20, 2018, 6:38pm UTC](https://discourse.processing.org/t/controlling-css-values-with-mouse-in-p5-js/156/2 "2018-05-20T18:38:15Z")

</div>

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](https://codepen.io/andreasref/pen/bMZbjB)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 21, 2018, 5:55pm UTC](https://discourse.processing.org/t/controlling-css-values-with-mouse-in-p5-js/156/3 "2018-05-21T17:55:43Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [May 21, 2018, 6:09pm UTC](https://discourse.processing.org/t/controlling-css-values-with-mouse-in-p5-js/156/4 "2018-05-21T18:09:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 21, 2018, 7:02pm UTC](https://discourse.processing.org/t/controlling-css-values-with-mouse-in-p5-js/156/5 "2018-05-21T19:02:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [May 31, 2018, 12:22am UTC](https://discourse.processing.org/t/controlling-css-values-with-mouse-in-p5-js/156/6 "2018-05-31T00:22:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AndreasRef](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/andreasref/32/133_2.png) [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Post date:** [May 31, 2018, 8:36am UTC](https://discourse.processing.org/t/controlling-css-values-with-mouse-in-p5-js/156/7 "2018-05-31T08:36:15Z")

</div>

Yes I did. Not sure what you mean?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 31, 2018, 7:50pm UTC](https://discourse.processing.org/t/controlling-css-values-with-mouse-in-p5-js/156/8 "2018-05-31T19:50:08Z")

</div>

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 😀