How do I take output of textbox to manipulate JS?

Question

1.00/5 (3 votes)

See more:

Okay so in the "What have you tried?" is the code I currently have. I was wondering if anyone could help me make it so a text box appears and when you paste a processing.js code it outputs a drawing. If that makes sense.

Basically,

fill(255, 255, 0);
ellipse(200, 200, 200, 200);
noFill();
stroke(0, 0, 0);
strokeWeight(2);
arc(200, 200, 150, 100, 0, PI);
fill(0, 0, 0);
ellipse(250, 200, 10, 10);
ellipse(153, 200, 10, 10);

would be a function that takes the output of textbox and runs the output of that text box.

So a text box would open up and you could type in...

ellipse(200, 200, 200, 200);

and a circle would appear on a click. PLEASE someone write this or help that would be great. IDK if you need like jquery but that might break the

What I have tried:

<!DOCTYPE html>

var sketchProc = function(processingInstance) {
with (processingInstance) {
size(400, 400);
frameRate(30);

// This is what I want to be able to change by a text box

fill(255, 255, 0);
ellipse(200, 200, 200, 200);
noFill();
stroke(0, 0, 0);
strokeWeight(2);
arc(200, 200, 150, 100, 0, PI);
fill(0, 0, 0);
ellipse(250, 200, 10, 10);
ellipse(153, 200, 10, 10);

//End of what I want to change with a text box

}};

var canvas = document.getElementById("mycanvas");
constructor.
var processingInstance = new Processing(canvas, sketchProc);

Posted 7-Apr-17 6:26am

Member 13113452

Updated 12-Apr-17 12:31pm

Add a Solution

Comments

SrikantSahu 10-Apr-17 5:31am

Can you paste the full html code.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nick_3141592654 · Answer 1 · 2017-04-12T12:31:00

Your question isn't very clear. It seems that you want to create a web page containing a text box and a Canvas. You want a user to be able to type some text that happens to be javascript code into the text box, and for that JS code to execute. It also happens to be the case that the JS of interest will paint into the Canvas.

Assuming that my interpretation is right, you can achieve this using the standard JS function eval. For example:

var command = "fill(255, 255, 0); \
ellipse(200, 200, 200, 200); \
noFill(); stroke(0, 0, 0); \
strokeWeight(2); \
arc(200, 200, 150, 100, 0, PI); \
fill(0, 0, 0); \
ellipse(250, 200, 10, 10); \
ellipse(153, 200, 10, 10);";

eval(command);

should achieve roughly what you want, but of course you'll need to get the "command" string from your text box and pass this to the eval command, and set-up the Canvas.