# Updating the code of a running p5js sketch

**URL:** <https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048>\
**Category:** Coding Questions\
**Created:** [December 7, 2022, 11:00am UTC](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048 "2022-12-07T11:00:02Z")\
**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:** [December 7, 2022, 11:00am UTC](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048/1 "2022-12-07T11:00:02Z")

</div>

Hi

I am curious about how to run p5.js code within a running sketch, so the code changes as the program runs? The code should come from a user input (like a text field) or from a function (like an api-call to GPT-3 or similar). I looked at `eval()` and `new Function()` but can’t get them to work interactively + both seem somewhat dangerous to use…

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [December 7, 2022, 11:33am UTC](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048/2 "2022-12-07T11:33:04Z")

</div>

Hi Andreas! Nice to see you here 🙂 I’m not sure but maybe it would help to check how [p5.widget](https://toolness.github.io/p5.js-widget/) does it? Thanks to @davepagurek for reminding me of the name of that tool.

---

<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:** [December 7, 2022, 11:45am UTC](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048/3 "2022-12-07T11:45:55Z")

</div>

Hi Raphaël!  
Oh cool, that is a nice tool. However, what I am looking for is slightly different (and sorry if it was not clear from my original question). Essentially want to take a string of text containing p5js code (for instance outputted by GPT-3) and run that code from within the script itself.

As an example, I would ask GPT-3 to make me a beautiful pattern of circles in p5.js, and instead of manually copy-pasting the output into my code editor, I want to directly run the code outputted by GPT-3. If that makes sense?

---

<div class="post-metadata">

**Author:** ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)\
**Post date:** [December 7, 2022, 12:09pm UTC](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048/4 "2022-12-07T12:09:20Z")

</div>

I see! Yes it does make sense. I’ll let more knowledgeable people chime in as I’m not a professional web developper.

In case you don’t get a suitable answer here, you might want to try the [p5.js discord](https://discord.gg/JjrBR7Cfua)… or ask ChatGPT for a solution 😛

---

<div class="post-metadata">

**Author:** ![davepagurek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davepagurek/32/17535_2.png) [@davepagurek](https://discourse.processing.org/u/davepagurek)\
**Post date:** [December 7, 2022, 1:10pm UTC](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048/5 "2022-12-07T13:10:36Z")

</div>

I think you might still be able to do that with that widget! It looks like the widget [exports a function you can call to convert new p5 script tags into editors.](https://github.com/toolness/p5.js-widget/blob/master/lib/p5-widget.ts#L219) So you can add the exported code to your page by doing this:

```nohighlight
const scriptTag = document.createElement('script')
scriptTag.setAttribute('type', 'text/p5')
scriptTag.innerHTML = yourSourceCodeHere
document.body.appendChild(scriptTag)

// Turn the tag into an editor widget:
window.p5Widget.replaceScript(scriptTag)

```

```auto

```

---

<div class="post-metadata">

**Author:** ![davepagurek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/davepagurek/32/17535_2.png) [@davepagurek](https://discourse.processing.org/u/davepagurek)\
**Post date:** [December 7, 2022, 1:20pm UTC](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048/6 "2022-12-07T13:20:05Z")

</div>

Also it’s probably worth mentioning that it’s still somewhat dangerous to run arbitrary code without looking at it. The widget works by creating an `<iframe>` tag with a page that runs your code, so it’s at least isolated from the rest of your page and is probably more secure than `eval()`ing the code directly, but proceed with caution still 🙂

---

<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:** [December 25, 2022, 6:43pm UTC](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048/7 "2022-12-25T18:43:16Z")

</div>

Sorry for the late reply. I don’t want to use the widget if possible. Essentially want to take a string of text containing p5js code (for instance outputted by GPT-3) and run that code from within the script itself. Any ideas?

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [December 26, 2022, 10:11pm UTC](https://discourse.processing.org/t/updating-the-code-of-a-running-p5js-sketch/40048/9 "2022-12-26T22:11:37Z")

</div>

> [@AndreasRef](#):
>
> The code should come from a user input (like a text field) or from a function (like an api-call to GPT-3 or similar). I looked at `eval()` and `new Function()` but can’t get them to work interactively + both seem somewhat dangerous to use…

Actually, you can collect and execute code interactively, but as you and @davepagurek have noted, that could be dangerous.

The following uses `prompt()` to accumulate code that can be typed or pasted in:

```auto
let codeToExecute = "";
function setup() {
  createCanvas(200, 200);
}

function draw() {
  // accumulate code to execute during each call to draw()
  let newCode = prompt("Additional code to accumulate (Cancel to stop draw() cycling): ");
  if (newCode === "" || newCode == null) {
    noLoop();
  } else {
    codeToExecute += newCode;
    eval(codeToExecute);
  }
}

```

This code was pasted in at the prompt to produce the image that follows below it:

```auto
rectMode(CENTER);
ellipse(width / 2, height / 2, width - 10, height - 50);
rect(width / 2, height / 2, width - 40, height - 90);

```

![eval](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/7/17f1f9da5712434bd122160d979af51eebd51727.png)

Whether this is dangerous depends upon how much the source of the code can be trusted. When a user is free to enter code to be executed, it’s time to get nervous. 🫢