3

I'm looking for a simple application for drawing shapes like this one on Khan academy:

enter image description here

I want to be able to use a simple language (javascript ideally) to draw shapes and test algorithms. My preference would be a windows desktop app but a web app will also be ok. I'd like to be able to share the code/drawing with other people too.
I would be mainly using the application for 2d spatial geometry.

3

You mention Khan academy, which seems to a be a neat resource providing examples using a wrapper around the processing.js library. To quickly be able to draw examples and stuff using this library I would suggest using jsFiddle, which both allows for drawing and testing of algorithms, and sharing of code and/or drawing with other people.

The following two main sections are one displaying a basic setup of jsFiddle for usage with processing.js, and one with some different resources which you might find helpful.

Setup of basic processing.js fiddle

In the four subsections below I provide the setup for this basic example of a jsfiddle providing access to the commands from Khan Academy, which you can fork into other examples.

For starters change the draw function to your liking, and hit the run button in the toolbar to see your changes.

Frameworks & Extensions

Select "Processing.js 1.0.0" or other suitable version, and in the next dropdown select "No wrap in <body>"

Html (upper left box)

<canvas width="400px" height="400px"></canvas>

Css (upper right box)

Notice the trick to end the style section using &lt;/style&gt; at start, and reverse at end to include a little script snippet to make the javascript box tidier.

</style> 
<script type="text/javascript">
    window.addEventListener('load',function() {
    var scripts = document.body.getElementsByTagName('script');
    var canvases = document.body.getElementsByTagName('canvas');
    new Processing(canvases[0],scripts[0].text);
}, false);
// Here prevent javascript in body from throwing error
</script>
<style>

Javascript (lower left box)

 // Setup the Processing Canvas
 void setup(){
   size( 400, 400 );
 }

 // Main draw loop
 void draw(){

  rect(10, 20, 100, 150);
  rect(90, 140, 30, 30);
  ellipse(130, 130, 100, 200);
  ellipse(130, 130, 110, 110);
  line(0, 200, 100, 0);

 }

Some other resources

Whilst looking for alternatives for you question, I found some resources which I'll recommend for further reading:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.