# Run p5ks sketch in specific div from string

**URL:** <https://discourse.processing.org/t/run-p5ks-sketch-in-specific-div-from-string/19999>\
**Category:** Beginners\
**Created:** [April 21, 2020, 11:01am UTC](https://discourse.processing.org/t/run-p5ks-sketch-in-specific-div-from-string/19999 "2020-04-21T11:01:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon57009815](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@anon57009815](https://discourse.processing.org/u/anon57009815)\
**Post date:** [April 21, 2020, 11:01am UTC](https://discourse.processing.org/t/run-p5ks-sketch-in-specific-div-from-string/19999/1 "2020-04-21T11:01:56Z")

</div>

Hello and good day.

I am currently acessing a string of a small p5js project and I want to use it to run a new project in a specific div. Any quick help with this?

```auto
/** small project multiline string */ 

function setup() { 
  createCanvas(400, 400);
}

function callback() {
  background(200); 
}

/** running new p5js sketch like this is not very efficient if I want to add custom functions in the used string */ 

let sketch = function(p) {
    p.setup = function(){
      eval("p." + variable_with_setup);
      eval("p." + variable_with_callback);
    }
  };
  new p5(sketch, div);

```

---

<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:** [April 21, 2020, 11:08am UTC](https://discourse.processing.org/t/run-p5ks-sketch-in-specific-div-from-string/19999/2 "2020-04-21T11:08:37Z")

</div>

[p5js.org/reference/#/p5.Element/parent](http://p5js.org/reference/#/p5.Element/parent)  
`createCanvas(400, 400);` -\> `createCanvas(400, 400).parent(your_divs_id_name_here);`

---

<div class="post-metadata">

**Author:** ![anon57009815](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@anon57009815](https://discourse.processing.org/u/anon57009815)\
**Post date:** [April 21, 2020, 11:19am UTC](https://discourse.processing.org/t/run-p5ks-sketch-in-specific-div-from-string/19999/3 "2020-04-21T11:19:04Z")

</div>

That is for the first specific function. Can rest of the code will run there? Also, how do I run this with eval()?

An example code would help your example!

Thanks

---

<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:** [April 21, 2020, 11:31am UTC](https://discourse.processing.org/t/run-p5ks-sketch-in-specific-div-from-string/19999/4 "2020-04-21T11:31:56Z")

</div>

> **[eval()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval)**
>
> The eval() function evaluates JavaScript code represented as a string.

---

<div class="post-metadata">

**Author:** ![anon57009815](https://avatars.discourse-cdn.com/v4/letter/a/f19dbf/32.png) [@anon57009815](https://discourse.processing.org/u/anon57009815)\
**Post date:** [April 21, 2020, 12:16pm UTC](https://discourse.processing.org/t/run-p5ks-sketch-in-specific-div-from-string/19999/5 "2020-04-21T12:16:35Z")

</div>

Yes I know where the MDN web docs are…