Patricjs - object orientated JavaScript


Originally patricjs was created as a web tool for drawing and making objects to use with programming languages like javascript, jquery and raphael js. Following on from this the aim was to make it a web based program for creating graphics either by defining the graphics on the screen from the RH menu and/or programming the graphics from the LH menu. It has developed into a particularly useful tool for teaching students the basics of programming. Spectacular graphics can be created and then exported as a .png file from the RH menu. In any language the three main programming constructs are sequence, selection and repetition, Examples of each are shown below;


Sequence the primary programming construct, is where a series of line are executed one after another just once.

And example of selection is;

#fill_r=200;
#fill_b=0;
#opacity=25;
move 100,200;
pentagon 60;

Try the above code and see what it does. Make it draw a 20 pixel triangle on top of the pentagon.

Repetition is where a series of statements are only executed the number of times specified in the loop statement;

An example of repetition is;

loop 30;
    hexagon 50;
next;

 

Selection is where a series of statements are only ececuted if the selection condition is true.

An example of selection is;

loop 3;
      a +=1;
      b =50*Math.random() +       20 * Math.min(b,25);
      if a == 1||a==2;
          dodecagon      50 + b ;
      end if;
      hexagon 50;
next;


Easily build your program by typing your code into the green box.

This is the content for Layout P Tag

   
     

Adding Buttons and graphics

Quickly add buttons to your page by using the button component in the right hand menu. You can also add graphics to your output page with the features from the same menu.

Adding Control Arrays

These can be added manually from the right hand menu or can be added dynamically; created with program code.









Code for the background

#fill_r=200;
#fill_b=0;
#opacity=8;
loop 50;
    pentagon 40;
    nonagon 60;
next;
#fill_r=255;
#fill_g=215;
#opacity=50;
loop 100;
    star 5;
next;

 


Copyright © 2016 · All Rights Reserved · patric.co.uk