Click here to Skip to main content
15,882,893 members
Please Sign up or sign in to vote.
1.00/5 (3 votes)
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>



<canvas id="mycanvas">





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
Updated 12-Apr-17 12:31pm
Comments
SrikantSahu 10-Apr-17 5:31am    
Can you paste the full html code.

1 solution

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.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900