# PressDo or keyPressed Error

**URL:** <https://discourse.processing.org/t/pressdo-or-keypressed-error/43688>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [January 13, 2024, 11:09am UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688 "2024-01-13T11:09:33Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![elifworks](https://avatars.discourse-cdn.com/v4/letter/e/f6c823/32.png) [@elifworks](https://discourse.processing.org/u/elifworks)\
**Post date:** [January 13, 2024, 11:09am UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688/1 "2024-01-13T11:09:33Z")

</div>

Hello everyone,  
I developed a sketch on interactive typography. I wanted to create a keyboard-sensitive interaction with PressDo in the work whose codes I share with you below. However, “ArrowUp” and “ArrowDown” do not work and all commands work with “ArrowRight” and “ArrowLeft”.  
What I want to do:  
ArrowUp to increase the number of circles, ArrowDown to decrease the number of circles.  
ArrowRight to increase the circle size and ArrowDown to decrease the circle size.  
Can you help me with this?  
\<  
import { createNoise4D } from ‘[https://cdn.skypack.dev/simplex-noise@4.0.0](https://cdn.skypack.dev/simplex-noise@4.0.0)’  
import { mountFlex } from “[https://cdn.jsdelivr.net/npm/p5.flex@0.0.0/src/p5.flex.mjs](https://cdn.jsdelivr.net/npm/p5.flex@0.0.0/src/p5.flex.mjs)”  
import { PressDo } from “./Control.js”

mountFlex(p5)

let font;  
let points = ;  
const speed = 0.02;  
const CIRCLE\_RADIUS = 200;  
let amount = 200;  
let circleSize = 2;  
let circleCount = 10;  
let isCurve = true;  
let isShowCircle = true;  
let angleOffset;

new p5((p) =\> {  
const simplexNoiseSeed = p.random()  
const noise4D = createNoise4D(()=\>simplexNoiseSeed)

```
p.preload = () => {
    font = p.loadFont('NotoSansThin.ttf');
}

p.setup = () => {
    p.createCanvas(600, 600)
    p.pixelDensity(4)
    p.stroke(255)
    p.noFill()

    let fontSize = 500;
    p.textFont(font);
    p.textSize(fontSize);
    let message = "A";
    let txtPoints = font.textToPoints(message, p.width / 4, p.height / 1.5, fontSize, {
        sampleFactor: 0.1
    });
		  let averageX = 0;
    let averageY = 0;
    for (let i = 0; i < txtPoints.length; i++) {
    averageX += txtPoints[i].x;
    averageY += txtPoints[i].y;
    }
    averageX /= txtPoints.length;
    averageY /= txtPoints.length;

    for (let i = 0; i < txtPoints.length; i++) {
        points.push(p.createVector(txtPoints[i].x - averageX, txtPoints[i].y - averageY));
    }

    angleOffset = p.PI / 1.5;
    
    PressDo("c", () => { isCurve = !isCurve })
    PressDo("s", () => { isShowCircle = !isShowCircle })
    PressDo("ArrowUp", () => { circleSize = p.max(1, circleSize + 1) });
    PressDo("ArrowDown", () => { circleSize = p.max(1, circleSize - 1) });
    PressDo("ArrowRight", () => { circleCount += 1 });
    PressDo("ArrowLeft", () => { circleCount = p.max(1, circleCount - 1) });
    p.flex()
}

p.draw = () => {
    const t = p.frameCount * speed;
    p.background(0);
    const noiseWeight = p.map(p.mouseX, 0, p.width, -100, 100, true);
    const angle = p.map(p.mouseY, 0, p.height, -p.PI, p.PI, true) + angleOffset;
    
    p.push();
    p.translate(p.width / 2, p.height / 2);
    //p.rotate(angle);

    drawNoboFromPoints(points, CIRCLE_RADIUS, noiseWeight, amount, circleSize, circleCount, t);
    p.pop();
}

const drawNoboFromPoints = (points, radius, noiseWeight, amount, circleSize, t) => {
    p.push();
    p.beginShape();
    for (let i = 0; i < points.length; i++) {
        const x = points[i].x;
        const y = points[i].y;
        const nx = noise4D(x + 100, y + 200, p.cos(t), p.sin(t)) * noiseWeight;
        const ny = noise4D(x + 300, y + 400, p.cos(t), p.sin(t)) * noiseWeight;
        if (isCurve) p.curveVertex(x + nx, y + ny);
        else p.vertex(x + nx, y + ny);
        if (isShowCircle) p.ellipse(x + nx, y + ny, circleSize, circleSize);
    }
    p.endShape();
    p.pop();
}

```

});

>

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 13, 2024, 5:11pm UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688/2 "2024-01-13T17:11:00Z")

</div>

There is a demo here which might be helpful:  
[https://p5js.org/reference/#/p5/keyPressed](https://p5js.org/reference/#/p5/keyPressed)

I was unable to get the posted code to run.

The following source code demonstrates using the arrow keys in instance mode:

```auto
const s = p => {
  let x = 100;
  let y = 100;
  let value = 85;
  
  p.setup = function() {
    p.createCanvas(400, 400);
    p.background(209);
  };

  p.draw = function() {    
    p.fill(value);
    p.rect(x, y, 50, 50);
  };
  
  p.keyPressed = function(){
    if (p.keyCode === p.LEFT_ARROW) {
    value = 255;
  } else if (p.keyCode === p.RIGHT_ARROW) {
    value = 0;
  } else if (p.keyCode === p.UP_ARROW) {
    value = 150;
  } else if (p.keyCode === p.DOWN_ARROW) {
    value = 100;
  }
  }
  
};

new p5(s); // invoke p5

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 13, 2024, 6:47pm UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688/3 "2024-01-13T18:47:22Z")

</div>

> [@svan](#):
>
> I was unable to get the posted code to run.

Any JS file which includes either keywords [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) or [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) must be loaded as a [module](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type#module) within a `<script>` tag or imported from another file.

## “index.html”:

```auto
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script type=module src=sketch.mjs></script>

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 13, 2024, 8:42pm UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688/4 "2024-01-13T20:42:48Z")

</div>

Thanks. p5.js WebEditor likes src and type in double quotes. I recopied/pasted his post again (can you edit his formatting?) and made the additions to index.html. I’m left with this error:

 ![err](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/0/c0da442d33c0dcb4cfb40a1f3b530b8cd6e0c51f.png)

> [@GoToLoop](#):
>
> Any JS file which includes either keywords [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) or [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) must be loaded as a [module](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type#module) within a `<script>` tag or imported from another file.

Do they really expect someone to copy/paste his entire post into the index.html??

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 13, 2024, 10:11pm UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688/5 "2024-01-13T22:11:42Z")

</div>

> [@svan](#):
>
> (can you edit his formatting?)

Only moderators and up can do that, sorry.

> [@svan](#):
>
> Do they really expect someone to copy/paste his entire post into the “index.html”?

Sorry, I guess my quote was not well written. 😖  
I’ve meant inside the `<script>` tag itself via its attribute _type_, not its body:

> [@GoToLoop](#):
>
> `<script type=module src=sketch.mjs></script>`

> [@svan](#):
>
> p5.js WebEditor likes _src_ and _type_ in double quotes.

Well, just add them! 🤷‍♂️ I’ve omitted them for simplicity & b/c browsers do well w/o them.  
Take a look at this “js.html” file as an example of loading a JS module via `<script>`:  
[https://GoToLoop.PyScriptApps.com/ramer-douglas-peucker/latest/js.html](https://GoToLoop.PyScriptApps.com/ramer-douglas-peucker/latest/js.html)  
[https://PyScript.com/@gotoloop/ramer-douglas-peucker](https://PyScript.com/@gotoloop/ramer-douglas-peucker)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 13, 2024, 10:14pm UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688/6 "2024-01-13T22:14:33Z")

</div>

Can you run his code? I only mentioned the quotes for the next person who has the same problem.

None of those pyscript references work for me; obviously something I don’t know/understand.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 13, 2024, 10:18pm UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688/7 "2024-01-13T22:18:25Z")

</div>

> [@svan](#):
>
> Can you run his code?

We don’t have dependence module: “Control.js”

> [@elifworks](#):
>
> import { PressDo } from ‘./Control.js’

For a project w/ multiple files and/or assets, it’s better to use a hosting service.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 13, 2024, 10:20pm UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688/8 "2024-01-13T22:20:47Z")

</div>

> [@svan](#):
>
> None of those PyScript references work for me;

Check if there’s any ad-blocking addon playing out.  
Make sure to be using an up-to-date browser.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 13, 2024, 10:57pm UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688/9 "2024-01-13T22:57:32Z")

</div>

The demo now sort of runs with one error: ‘noise4D is not defined’. Just see a black screen. Had to use a different font (Inconsolata.otf). Ripped out PressDo and added p.keyPressed as described in the example I posted. For certain ‘instance mode’ is an advanced topic as the Reference states. If this is ‘homework’ they didn’t start with something easy.

**Addendum:**  
Adding _p.keyPressed_ as shown in a previous post does indeed allow trapping of **all** the arrow keys, not just left and right as indicated in the initial post. This should be the solution.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 13, 2024, 11:04pm UTC](https://discourse.processing.org/t/pressdo-or-keypressed-error/43688/10 "2024-01-13T23:04:46Z")

</div>

> [@svan](#):
>
> For certain ‘instance mode’ is an advanced topic as the Reference states.

Not advanced but an added nuisance of requiring `p.` to access all p5js API.

Example: Rather than just `background(0)` or `mouseX` we need `p.background(0)` or `p.mouseX`.