Tutorial 2: Elements of Code

Comments

Comments are ignored by the computer when it runs a program, but they are important for people to understand what your code is doing. Because code often takes a lot of effort to read and understand, it is important that you document your code as you write it. Comments allow you to leave notes about your code so that (a) other people can understand what it does, and (b) you can understand what your code does when you come back to it. Processing supports two different styles of comments; single line comments and multiple line comments. In the Processing editor, you can tell that something is a comment because it is coloured grey.

Single Line Comments

Single line comments are denoted by two forward slashes:

    // This is a single line comment

    All of the text following the two forward slashes on the same line are part of the comment and ignored by the computer when it runs the program.

    Notice that there are no spaces between the forward slashes. If you put a space between the forward slashes, like this / /, it does not indicate a comment and will cause an error, i.e., the computer will interpret the first of these forward slashes to mean that you want to divide a number by another and then raise an error when it can't find any numbers.

    A single line comment doesn't have to be the only thing on a line, you can put code before the forward slashes and the computer will execute it. This can be very handy for making a quick note about a line of code without making you're program longer, e.g.:

      size(200, 200); // Set the size of the window to be 200 x 200 pixels

      Naturally, it is possible to have many single line comments within a program, allowing blocks of comments to be formed, e.g.:

        // This is a single line comment.
        // This is another single line comment.
        // This is a third single line comment.

        This is one way to write long comments in a piece of code, i.e., you don't have to include all of your comment on one line. It is also important to note that you can "comment out" one or more lines of code using this technique so that they aren't executed, e.g., the following code will be ignored:

          // size(200, 200);
          // background(0); // Fill the window with black
          // line(50, 50, 150, 150); // Draw a diagonal line across the window

          Notice that it doesn't matter if there is already a single line comment in the code.

          Multiple Line Comments

          Multiple line comments are denoted by a forward slash followed by an asterisk (star) at the beginning of the comment, and an asterisk followed by a forward slash at the end of the comment.

            /*
               This comment runs over multiple lines of code.
               This style of comment can be handy for writing
               long descriptions about what a sketch does.
            */

            Another use for multiple line comments is to "comment out" long pieces of code, e.g., when debugging a program. The following code would be ignored because it has been commented out with a multiple line comment:

              /*
              size(200, 200);
              background(0); // Fill the window with black
              line(50, 50, 150, 150); // Draw a diagonal line across the window
              */

              Notice that it is OK to have single line comments within a multiple line comment like this. Be careful when using this technique to comment out code that there aren't any existing multiple line comments in the code that you're trying to comment out, as these will cause problems, e.g.:

                /*
                size(200, 200);
                /*
                  Fill the window with black
                */
                background(0);
                line(50, 50, 150, 150); // Draw a diagonal line across the window
                */

                Notice that the multiple line comment ends with the first */ not the second one, so the lines background(0) and line(50, 50, 150, 150); are still going to be executed by the computer, however, the second */ will cause Processing to report an error because it will try to interpret this as a multiplication sign followed by a division sign. (We'll get to the mathematical signs used in Processing soon.)

                As noted above, you may prefer to use single line comments for both descriptions and commenting out code. There is no requirement to use multiple line comments when writing your code.

                Documentation Comments

                There is one other style of comment that you may see in Processing code. It is used for officially documenting code and it is a variant of the multiple line comments we've already seen. Documentation comments begin with a forward slash followed by two asterisks, i.e., /**, and ends (just like a normal multiple like comment) with an asterisk followed by a forward slash */.

                The important thing about documentation comments is that while they are ignored by the computer when running the program, they can be extracted by other programs to produce documentation about the code. Documentation comments include descriptions of parts of code and often include special terms like @author, @since or @returns that indicate who wrote the code, when they first wrote it, and aspects of what the code does etc. When you use code written by other people, especially libraries, they will often come with documentation that has been generated this way.

                Both Processing.js and Peep define a small number of directives that may appear at the beginning of a sketch to affect how the browser displays the sketch and/or the sketch code (in the case of Peep). We'll introduce you to these directives as we continue through the unit of study.

                For the moment, the only directives that you'll need to know about is the @peep sketch and @peep sketchcode directives that tell Peep that you want it to either automatically run sketch code that you have embedded in a Portfolio post or show the code but allow someone to run the code by clicking on "show sketch". You'll need this for the first assignment, but we'll post more information about using the portfolio system soon. In the meantime, here's an example of using the @peep sketch directive:

                • Show Code
                /** @peep sketch */
                size(200, 200);
                background(0);

                And an example of using the @peep sketchcode directive:

                • Show Sketch
                /** @peep sketchcode */
                size(200, 200);
                background(0);

                Expressions and Statements

                An expression is like a phrase in English: an expression always has a value, determined by evaluating its contents. Some expressions can achieve complex results, but an expression can be as simple as a single number. Here are some examples of some expressions, with their values:

                  |             Expression    Value                  |
                  |                      5    5                      |
                  |            122.3 + 3.1    125.4                  |
                  |    ((3 + 2) * -10) + 1    -49                    |
                  |"jack" + " & " + "jill"    "jack & jill"          |
                  |                  6 > 3    true                   |
                  |                54 < 50    false                  |

                  Statements

                  A set of expressions create a statement, the programming equivalent of a sentence. Every statement ends with a terminator, the programming equivalent of a full stop / period. In the Processing language, the statement terminator is a semicolon ;. You have to use a semicolon at the end of every statement that you make in Processing.

                  There are different types of statements, e.g., a statement can declare a variable, assign a value to a variable, run a function or construct an object.

                    int x; // Declares a new variable called x
                     
                    x = 102; // Assigns the value 102 to the variable x
                     
                    size(200, 200); // Runs the size() function
                     
                    // The following statement does three things:
                    // 1. It declares a new variable called img;
                    // 2. It constructs a PImage object; and,
                    // 3. It assigns the PImage object to the img variable
                    PImage img = new PImage();

                    Using Functions

                    Functions are a fundamental building block in computer programming, they are fragments of code that achieve a significant task. Processing comes with many functions already written, which makes it much quicker and easier to achieve common tasks. In Processing, functions allow you to draw shapes, set colours, calculate numbers, and to execute many other types of actions.

                      // Draw a line from (50, 50) to (150, 150)
                      line(50, 50, 150, 150);
                       
                      // Set the colour to fill shapes to white
                      fill(255);
                       
                      // Calculate the sine of 2.67
                      sin(2.67);

                      A function's name is often a single word followed by parentheses, i.e., round brackets, that contain any data that the function needs to accomplish its task. The data to be passed to a function is included as a comma-seperated list of elements between the parentheses. When data is passed to a function in this way it is called a set of parameters. Some functions have no parameters and others have many.

                        // The smooth function does not take any parameters
                        smooth();
                         
                        // The 3D bezier function takes many parameters
                        bezier(0, 0, 0, 100, 0, 50, 0, 100, 50, 100, 100, 100);

                        Parameters have to be listed in the same order that the function expects them to be in. For example, the size function takes two parameters. The first sets the width of the display window and the second sets the height:

                          // Set the size of the display window to 200 x 200 pixels
                          size(200, 200);

                          Some functions appear to take different numbers and types of parameters. (In fact, there are multiple functions with the same name that take different numbers of parameters, but we can ignore this detail for the moment.) For example, their are multiple versions of the background function that take different numbers of parameters.

                            // This version of the background function has one
                            // parameter. It sets the grey value for the background
                            // of the display window in the range of 0 (black) to
                            // 255 (white)
                             
                            background(102);
                             
                            // This version of the background function has three
                            // parameters. It sets the colour value for the
                            // background of the display window using RGB (or HSB)
                            // colour components
                             
                            background(127, 191, 15);

                            Formatting Code

                            Code that you want a computer to execute needs to be properly formatted for the computer to be able to understand what you want it to do.

                            Case Sensitivity

                            The Processing language is case sensitive; it differentiates between uppercase and lowercase characters such that a variable called name is considered to be different from one called Name. The same is true for functions, so the following code will cause an error because no function with the name Size exists (the correct name is size):

                              Size(200, 200); // Generates an error when run

                              Consequently, you must be careful to match the case of functions and variables in your code. You can check the formatting of functions and variables built-in to Processing in the on-line reference. The authors of Processing have been careful to follow the following convention when naming functions:

                              1. If the variable or function is a single word, use only lowercase characters, e.g., width, size(), background(), line().
                              2. If the function contains multiple words, use lowercase for the first word and then capitalise the first letter of each subsequent word, e.g., frameCount, mouseX, noSmooth(), pushMatrix().

                              Following a coding convention like this is definitely good practice and you should try to follow the convention above when naming your own variables.

                              Whitespace

                              Whitespace characters include spaces, tabs, and new lines. In Processing, you can use as many whitespace characters as you want between code elements. Using space to arrange your code neatly can improve the readability of your code. Whitespace characters cannot be included in variable or function names, so hello kitty is not a valid variable name. A common convention is to use the underscore (_) character in place of the whitespace, e.g., hello_kitty.

                              Console

                              In the desktop Processing development environment, the console is located below the editor in the main window. (It is also where any errors are displayed in red if there are problems running your code.)

                              In the on-line version of Processing that we're using on this web site for tutorials etc. the console is an area that is displayed only when you print to it, or when an error is encountered.

                              Printing to the Console

                              When a computer executes code, it performs operations at a rate too fast to watch it as it runs. A simple way to see what is happening when your code runs is to print information to the console. The functions print() and println() can be used to display messages and data in the console area while a program is running.

                              Enter the following code in the editor to the right to see the console area appear when you run it:

                                size(200, 200);
                                background(0, 0, 255);
                                println("Hello World!");
                                println("This is the console.");

                                The blue square that appears when you run this sketch is your display window. The black area at the bottom of the screen is the console, where you can see the message that we printed.

                                The difference between the functions print() and println() is that print() prints just the text that you provide, whereas println() prints the text and then moves the cursor to the next available line, ready for the next thing to print.

                                Enter the following n the editor to the right and compare what is printed to the console with the previous example:

                                  size(200, 200);
                                  background(0, 0, 255);
                                  print("Hello World!");
                                  print("This is the console.");
                                  println();

                                  This second version of the program prints the two sentences "Hello World!" and "This is the console." on the same line with no space in-between them. Notice that the last line of this example calls println() without any parameters. We do this to force the console to display. Try removing this line from the editor, close the console (using the cross in the top-right corner of the console area) and running the code again. The console area won't open because it stores the results from calls to print() until a println() is received to reduce the amount of printing that it has to do.

                                  Typically, you'll just want to use println() to print a message or some data on its own line, however, if you have a lot of data that you want to format in a specific way then print() can be more appropriate. Just remember to finish printing out your data with a final call to println() to ensure that the console is updated.

                                  Comments

                                    Liam Bray about a year ago
                                    • Show Code
                                    /**@peep sketch */
                                    size(200, 200);
                                    background(0, 0, 255);
                                    println("Hello World!");
                                    println("This is the console.");
                                    Maria Mehr about a year ago

                                    size(100, 80); background(125);

                                    line(10, 30, 50, 60); line(20, 40, 60, 70); line(30, 50, 70, 80);

                                    Last Updated: 9-Mar-2016 11:05 AM
                                    Dan Allen about a year ago

                                    size(200,200); //This size can be varied

                                    /* This is a multiple line comment */

                                    Lauren Choi about a year ago

                                    /** @peep sketchcode */

                                    size(200, 200);

                                    background(0);

                                    Last Updated: 9-Mar-2016 11:25 AM
                                    Michael McCammon about a year ago

                                    /** @peep sketchcode */ size(150,150); //sick window. background(255,40,200);

                                    //single line comment. //Comments are dope af.

                                    Last Updated: 9-Mar-2016 11:27 AM
                                    Amy Cao about a year ago

                                    /** @peep sketchcode */ size(600,300); background (230, 140, 30);

                                    Last Updated: 9-Mar-2016 11:32 AM
                                    Nathan Dagher about a year ago
                                    • Show Sketch
                                    /**@peep sketchcode */
                                    size(200, 200); // window size 
                                    background(0,255,255); // change color to green
                                    println("Hello World!"); 
                                    println("This is the console.");
                                    stroke(255); 
                                    line(40, 40, 150, 150); // diagonal line
                                    /* 
                                    begin shape 
                                    figure diagonal 
                                    design
                                    */ 
                                    fill(250);
                                    rect(150,150,6,6);
                                    rect(120,120,8,8); 
                                    rect(90,90,10,10); 
                                    rect(60,60,15,15); 
                                    rect(30,30,20,20);
                                    Last Updated: 23-Mar-2016 12:43 PM
                                    Jingyi Tang about a year ago
                                    • Show Sketch
                                    /** @peep sketchcode */
                                    //free draw
                                    size(400,400);
                                    background(10,150,240);
                                    beginShape();
                                    int x=10;
                                    int y=200;
                                    noFill();
                                    strokeWeight(0.5);
                                    rect(x,y,20,30);
                                    strokeWeight(1);
                                    rect(x+10,y+10,25,35);
                                    strokeWeight(2);
                                    rect(x+20,y+20,30,40);
                                    strokeWeight(3);
                                    rect(x+30,y+30,35,45);
                                    endShape();
                                    Last Updated: 9-Mar-2016 11:57 AM
                                    Keith Leung about a year ago

                                    /** @peep sketchcode */ size(200, 200); background(0,0,135);

                                    Last Updated: 9-Mar-2016 11:50 AM
                                    Dan Allen about a year ago

                                    this is a heading

                                    Dan Allen about a year ago

                                    Peep;

                                    Yaohui Wang about a year ago

                                    /** @peep sketch */ size(200, 200); background(0);

                                    Yaohui Wang about a year ago

                                    /**@peep sketch */ size(200, 200); background(0, 0, 255);

                                    Yaohui Wang about a year ago

                                    /**@peep sketch */ size(200, 200); background(0, 0, 255);

                                    Dan Allen about a year ago

                                    /**@peep sketch */ size(200, 200); background(0, 0, 255); println("Hello World!"); println("This is the console.");

                                    Sarah Hearne about a year ago
                                    • Show Sketch
                                    /** @peep sketchcode */
                                     
                                    size(200, 200); 
                                    background(210, 110, 100);
                                     
                                    noFill();
                                    quad(45, 55, 115, 35, 35, 160, 105, 145);
                                     
                                    fill(100, 100);
                                    quad(55, 65, 125, 45, 45, 170, 115, 155);
                                     
                                    fill(200, 200);
                                    quad(65, 75, 135, 55, 55, 180, 125, 165);
                                     
                                    fill(300, 300, 300);
                                    quad(75, 85, 145, 65, 65, 190, 135, 175);
                                    Last Updated: 9-Mar-2016 12:56 PM
                                    Daniel Chan about a year ago

                                    forgot to save my code - he's the link: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAAAXNSR0IArs4c6QAAMQNJREFUeAHtnQmYXUWZ99/bt2+vCUkIBAIkEIgRkMWwZYgBQhiCLBPAkRnEkUVlYMQPQeRTxogM4PJ8fGwKyggjILIofgiRNUjYQjCyypKE2BAgQCAQA0l679v3q+q2ub2c22fps1Sd8zvP00/frqpTp+r3vt3/PqfqfU+u6eExJeGAAAQgAAEI+CRQ5bM9zSEAAQhAAAI9BBAQHAECEIAABAIRQEACYeMkCEAAAhBAQPABCEAAAhAIRAABCYSNkyAAAQhAAAHBByAAAQhAIBABBCQQNk6CAAQgAAEEBB+AAAQgAIFABBCQQNg4CQIQgAAEEBB8AAIQgAAEAhFAQAJh4yQIQAACEEBA8AEIQAACEAhEAAEJhI2TIAABCEAAAcEHIAABCEAgEAEEJBA2ToIABCAAAQQEH4AABCAAgUAEEJBA2DgJAhCAAAQQEHwAAhCAAAQCEUBAAmHjJAhAAALREPhoY0meeqFLvvKdZnn4T13RXCSkXqtD6oduIAABCEDAB4FOpQ1NbxRl5Wvd8vKrXfLCX4vStKpbPlxf+riXUz5f+/FnEz8gICZahTFBAAKpIVBSevD2e91KKIqyQgnE8690yQolGmvXdkvjuJzkNxfpGl2S7pz6rma95YScnPfv9XLUnIJUqTKTDwTEZOswNghAwCoC+vHTylVFeUUJhL6jeKmpKG+8WZTq2pzUjhcpjlFqMlak8A8i48eJ5KpK0vWhSNXzOal6X+Tck+vkX4+okWpL/jJbMkyrfIjBQgACKSdQ6fFTS2tJGrdQtw1jS0osRKo/KTJmfyUQteXHUn1oiptEOp9Xdx2rc/IfX6iVkz5XI3VKaGw6EBCbrMVYIQCBWAl4ffyU31LdVSix2Hy0Ht5Qseg/6O5WkY4XRNqbcnLiMTVy+v+pldGNdglH33wQkD4SfIcABDJNIMjjJw2sxiO1UocSjRfV14qcHDu3IN+4oE7Gj7VTOPqmjID0keA7BCCQCQJhPH7yA6qkVsbblqm7jpdycsjMavnfv6yTbSakI4ICAfHjCbSFAASsIRDF4ydfk+8WaV2h1jleyMl+u+flvKvrZafJ6RCOPg4ISB8JvkMAAtYSiPrxky8wagmk7VW1OK52Vn1SCcb3LqmX3ablfXVhS2MExBZLMU4IQEDifvzkF3n7G2qrrhKObcZWyfnn18l+e6b7T2y6Z+fX+rSHAASMIJD44yefFDrWKOF4Nidj8jmZf2adzJlZ8NmDnc0REDvtxqghkBoCRj1+8km184Ne4ahpEZlvSfS4zykO2xwBGRYPlRCAQFgETH/85GeeOnpcr3GIih4/27LocT/zdGuLgLgRoh4CEPBFwLbHT34ml4bocT/zdWuLgLgRoh4CEKhIwObHTxUn5VCRpuhxh+kFLkJAAqPjRAhkh0CaHj/5sVoao8f9zN+tLQLiRoh6CGSIQJofP/kxY5qjx/1wcGuLgLgRoh4CKSWQlcdPvsyXgehxXzxcGiMgLoCohoDtBLL6+MmX3TIUPe6Li0tjBMQFENUQsIUAj5+CWSpr0ePBKDmfhYA4c6EUAkYT4PHTyM2T1ejxkZMr94CAlFnwCQLGEeDxU/gmyXr0eJhEEZAwadIXBAIS4PFTQHA+TiN63Acsj00REI+gaAaBsAjw+Ckskt76IXrcG6cgrRCQINQ4BwIeCPD4yQOkCJsQPR4h3L93jYBEz5grpJwAj5/MMjDR4/HZAwGJjzVXSgEBHj+Za0Six+O3DQISP3OuaAEBHj9ZYKS+IRI93kci9u8ISOzIuaBJBHj8ZJI1fI6F6HGfwMJvjoCEz3RIjw8t6ZRiUWTuAdl4zeUQAIYV/GVFUW7+Q4e81FSUN94sSnVtTmrHqzfLjVF/kcaKFP5BZPw4kVyV+lkdNYaNn+GIED1uhhfkmh7WvzUcURLYde5H0tEpsmzhGKlBQ6JE7anvU7/XLH9a2yX1nxSp3lykqtbTaTQygMCA6PHTsvPucQPQOw6BOxBHLOEVfrC+JA1KNGZvk5Prbm2Xr53IX6vw6Prvqaiely99riijj1XC0eD/fM5IhgDR48lwd7sqAuJGaIT1f3ioQ+btkJMLP12SvW9vl6MPK8i2W1WNsFdOD0rg+WVFKWyGeATlF/d5RI/HTdzf9fhL5o+X79Z33dMhJ+1Yku1HiZy1a0l+eGWr7z44ITwCDz2pniVO5KlteESj6UlHj7ctVl/35eTU2bWy+NbR8sV5NVLNv7zRAA/YKwISEJyX0/76elHWq0dYsyf2tj53d5FXVxblsT93eTmdNhEQWKg2NOS3i6BjugyFgI4eb1sqsumunPzr9Fp5XAnHaV+olTq10YHDPAIISIQ2uev+Tvmiuvuo+rvv1+ZFfrpfSS66vLVnUT3CS9O1A4H3/1aSd9d2S81WDpUUJUpAR4+3PSOy8Y6cHLFjjTzy69Fy7lfrZHQjwpGoYVwujoC4AApa3a2ekixY2CEnTh3Yw2cniewxqtSzoD6whp+iJvDYnzulYZL6g8TfpKhRe+5fR4+3viCy4Xc5mTW+IA/8cpRceGa9jB+LkTxDTLAhTxQjgr/0+S7ZUm24+pSKJxh8XKnuQlhQH0wl+p/vf0LF47D+ET1oL1cgetwLJePbhHoHomMdOHoJ3HVfh5w8xXmxlgX1+L2kb/tuLesf8cPvf0X1K9HWpNY41KOqqZvycssljXLdxY2y0+RQ/xT1vyKfIyQQqtUu+UUbC8TKWG3tJfnjE13yhUGPr/rbkQX1/jSi/8z23egZu11BR4+3LMjJ1m/n5RfnN8hvLh8lu01TC4Mc1hIIVUAmTaySL3+7WS5WW1X1H9GsHg8u7pIZW4tsVV+ZAAvqldlEUcP23SioeutTR4+33pOT0cur5P+q9Y27rxkl++3J03Nv9MxuFaqAHDWnN0/Hxpc75Zgvb5IXX1EJoDJ4LLi3XU7awV1AWVCPzznYvhsf674r6ejxtoU5qV6ak++fUi9/vGG0zJlJLp8+Pmn4HqqAbK52TuyjbklP+0RJfrBrt5x2brNcdUOb6OfPWTl06pLnVLK+Y3bwNmO9oH6jilB/+70MQfKGJrRWbN8NDaWnjnT0eNsjOSk+nJOzj62Tx27eTOYdUvh4O7unTmhkBYFQBUTP+OCDCrLgLZF/2VHkuaNLsuzRDjn+9E2y6q1s/IHsS11S7/EOnQX16H9P2L4bPWN9BaLH4+Fs0lXCF5D9q2XB6t493NuoZHUPzC3JV7Yq9ojIzXeqaKGUH32pS/xMkwV1P7T8t2X7rn9mfs4getwPrXS1DV1Apk3JS0ltrHjpb2VQZ+wqsuSoktx9e5t85ZxmWbsunXcjg1OXlAkM/4kF9eH5jKSW7bsjoTf8uUSPD88nC7WhC4iGNuczBfnD6oH4po0RefLIkhycL8rRaoH93ofTFzQyOHXJQALD/8SC+vB8gtayfTcoucrnET1emU3WaiIRkINnqXWQt4emIsirou9PL8m9h5Tkqp+1yjn/1SIbNrnvVrLBKJVSl/gZOwvqfmh5a8v2XW+cPLVSDw5al6l8VSrtyPR8tdx59Si54rwG2WZCJH9GPA2JRskSiMTyMz5dLcvXibzf5jy5fbYUeX5eSSav75SjTtooTzyjEuJYfgyXusTr1FhQ90rKezu273pnVbEl0eMV0WS9IhIBKagdSDOn5+XeNyvj1buUfjJD5Mb9S/Ldi1qsDz4cLnVJZQpDa1hQH8okaAnbd4OSK59H9HiZBZ+GEohEQPRlDj6wIHc5PMYaPIR/3FbkxWNL0r7c3uBDL6lLBs+70s8sqFci47+c7bv+mfWdQfR4Hwm+D0cgMgGZPaMgi94qSYeHDVdja0RuOcje4EMvqUuGM8LgOhbUBxMJ9jPbd/1zI3rcP7MsnxGZgOio9E9Mysuj73jHa2vwodfUJd5JiLCg7ofW0LZs3x3KZLgSoseHo0NdJQKRCYi+YF9UeqWLO5XbFnzoN3WJ05ydylhQd6LivYztu95YET3ujROtnAlEKyD9otKdL1+51JbgQ7+pSyrPeGgNC+pDmXgtYfvu8KSIHh+eD7XeCEQqIE5R6d6G1dvKhuDDIKlLvDJgQd0rqaHt2L47lIkuIXrcmQulwQhEKiB6SE5R6X6GanLwYdDUJX7mz4K6H1q9bdm+O5QZ0eNDmVAycgKRC0ilqHS/Qzcx+HAkqUv8zJ8FdT+0RL0Vs1MaJqm0B0OTIfjrKA2tiR5PgxWNnUPkAuIWle6HjEnBh2GkLvE6dxbUvZLqbcf2XcWB6HF/TkPrQAQiFxAvUel+R25C8GEYqUv8zJsFdW+02L4rQvS4N1+h1cgJRC4geoheo9L9TCfp4MOwUpd4nTML6t5IZXn7LtHj3nyEVuERiEVA/ESl+51aEsGHYaYu8TNfFtTdaWVx+y7R4+5+QYtoCMQiIEGi0v1MN+7gw7BTl/iZKwvqw9PK0vZdoseH9wVqoycQi4DoaQSJSvc7/biCD6NIXeJ1riyoVyaVle27RI9X9gFq4iUQn4CMICrdD5Kogw+jSl3iZ44sqDvTSvv2XaLHne1OaXIEYhOQkUal+0EUZfBhlKlLvM6RBXVnUmndvkv0uLO9KU2eQGwCoqc60qh0v7iiCD6MMnWJn/mxoD6QVhq37xI9PtDG/GQegVgFJKyodD8Ywww+jCN1iZ+5saBeppWq7btEj5cNyyejCcQqIGFGpfulGkbwYVypS7zOjQX1MqlUbN8lerxsUD5ZQSBWAYkiKt0P5ZEEH8aZusTPnFhQ76Vl+/Zdosf9eD1tTSEQq4DoSUcRle4XZpDgw7hTl3idEwvqIjZv3yV63Kun085EArELSJRR6X4A+w0+jDt1iZ+5ZH1B3cbtu0SP+/Fw2ppKIHYBiToq3S9oL8GHSaUu8TOXLC+o27R9l+hxP15NW9MJxC4gGkgcUel+wLsFHyaZusTrPLK6oG7L9l2ix716Mu1sIpCMgMQUle7HEMMFHyaZusTPHLK4oG769l2ix/14MG1tI5CIgMQZle7XIIODD+96sFOeW1GUY3bw21P87bO4oG7q9l2ix+P3f64YP4FEBERPM+6odD9o+wcfnvPDFvmwxc/ZybbN2oK6adt3iR5P1v+5erwEEhOQJKLS/aLVwYc7jM3JluNy8ukFOXn6fb89JNM+KwvqRm3fJXo8GWfnqokSSExAkoxK90r85fUiHTmRJ/7fZvL1r9XLEQ/l5L+ey0lRRQybfGRlQd2I7btEj5v8q8DYIiaQmIAkHZXuheuvmkTmza2RKiUiRxxckLt+OUoeLuZl/3tysvIjLz0k1yYLC+pJb98lejw5/+bKZhBITED09E2ISq9kBp265ObXcnL0ZwsfN5kwvkr+59JGOeq4OpmpROTqZR9XGfch7QvqSW7fJXrcOHdnQAkRSFRATIlKd2L/yBqRcWrt4xM75IdUf/GYGrnt56Pkf97Ly2ELc/KOoYvsaV5QT2L7LtHjQ34VKMg4gUQFxLSo9P6+cKO++ziypn/RgM9TtquS264ZJbseVCPT78rJb18bUG3MD2ldUI9z+y7R48a4MwMxjECiAqJZmBaVrsfU2iWy4PWS/NMhlQVEt8srel8/uU7++5JG+e6yKjnh0Zx82KFrzDnSuqAex/ZdosfN8WNGYiaB5AXEwKj0O18Xmb5zXrZQj7C8HLt/Mi93qgX22l0Ksvvvc/LHt72cFV+btC2oR719l+jx+HyTK9lNIHEBMTEq/cbXczLviFpflq2rzcn8b9TLD77XICc9mZMzl/beyfjqJKLGaVtQj2r7LtHjETkg3aaWQOICosmaFJX+XqvI0ndFDp1VHcjon9m7Wu6+cbS8Oa5gVPBhmhbUw96+S/R4IFfnJAiIEQJiUlT6rSr24x8/Uy36jiLosdmonFz6/Qbjgg/TsKAe6vZdoseDujjnQaCHgBECYlJU+g2r1O6rw4dfPPfqO6YFH6ZhQT2U7btEj3t1YdpBYFgCRgiIKVHpOnXJ++0iWtDCOkwLPrR9QX2k23eJHg/Ls+kHAmLGIyxtCBOi0vunLgnbOUwJPrR9QT3o9l2ix8P2aPqDgEECknRUulPqkrAdxJTgQ1sX1INs3yV6PGwvpj8IlAkY8QhLDyfpqPThUpeUcY38kynBhzYuqPvZvkv0+Mh9lR4g4EbAGAHRA00yKt0tdYkbSL/1SQcf2rig7mX7LtHjfj2R9hAITsAsAUkoKt1r6pLgmJ3PTDr40KYFdbftu0SPO/sYpRCIkoBRApJUVLrf1CVhGySp4EObFtQrbd8lejxsb6Q/CHgnYJSA6GEnEZUeJHWJd8TeWiYVfGjLgvrg7btEj3vzK1pBIEoCxglI3FHpI01dErZxkgg+tGFB/ePtu0SPh+1y9AeBwASME5C4o9LDSF0SmH6FE+MOPjR9QV1v313zXrcUN4hsuiMnUzfl5RaVQv+6ixtlp8nGuXAFq1IMgfQRMO63L+6o9DBTl4TtHnEGH5q8oL7w8U5pV0kuJ67Jyy/Ob5DfXD5Kdps29E2RYfOnPwhAYHgCxgmIHm5cUelRpC4ZHrf/2riCD01eUP9oY0l+flGD3K3eALnfnuGlmfFvDc6AAAT6E8g1PTxGpZYz6/jbhyU59IQNsvaLIjURSty3nxLZMK1WvnV6nVkAKozmxVeKcu6FLbLv6JL8bP+SjA0n5+OAqx2zKCc7HVArXzvR3/tQBnTCDxCAQCYIRPjnOTi/OKLS40hdEpyA85lxBB/asKDuTIdSCEAgbgJGCoiGEHVUelypS8I2aNTBh6YvqIfNk/4gAIHgBMwVkIij0uNOXRLcRM5nRhl8aPKCujMNSiEAgSQIGCsgUUalJ5W6JGwDRxV8aPKCetgM6Q8CEAhOwFgB0VOKKio96dQlwc3lfGYUwYe2RKg7E6EUAhCIg4DRAhJVVLoJqUvCNm4UwYcsqIdtJfqDQLoIGC0gUUSlm5a6JGx3CjP4kAX1sK1DfxBIFwGjBSSKqHQTU5eE7VJhBh+yoB62degPAukhYLSAaMxhR6WbnLokTLcK682HLKiHaRX6gkC6CBgvIGG+K92G1CVhu1cYwYcsqIdtFfqDQDoIGC8gYUal/6pJZN7cGqnKpcN4XmcRRvAhC+peadMOAtkhYLyAaFOEEZVuY+qSsN1wJMGHLKiHbQ36g4D9BOwQkBCi0m1NXRK2i40k+JAF9bCtQX8QsJuAFQISRlS67alLwnazIMGHLKiHbQX6g4DdBKwQEI14JFHpaUldErarBQk+ZEE9bCvQHwTsJWCNgIwkKj1tqUvCdje/wYcsqIdtAfqDgJ0ErBGQkUSlpzF1Sdju5if4kAX1sOnTHwTsJGCNgASNSk976pIw3c5P8CEL6mGSpy8I2EnAGgHReINEpWchdUnYrucl+JAF9bCp0x8E7CNglYAEiUrPSuqSsF3PS/AhC+phU6c/CNhFwCoB8RuVnsXUJWG7n1vwIQvqYROnPwjYQyB/5sl1F9gzXJF1G0vy8vIuOWI791Ff+pLIDvvVymf2rXZvTIuKBGprcnLY7IKM27JKTru1S1o6c3LA1tKTEmZsjUhHUeTmP3fLkYeoHzggAIHMELDqDkRb5WCPUemkLgnfhysFH7KgHj5reoSADQSsExCvUemkLonG/ZyCD1lQj4Y1vULAdALWCYgG6iUqndQl0bre4ODDPcaL7DGqJNfd2h7thekdAhAwhoCVAuIWlU7qknj8a3Dw4czxJbnx9nZ5+73ueAbAVSAAgUQJWCkgblHppC6Jz6f6Bx9eu7pK1m0qybd/0BLfALgSBCCQGAErBcQtKp3UJfH7U1/w4QlH1sifXizKHx7qjH8QXBECEIiVgJUCoglVikondUms/jPgYjr48MJv1cvVFzbIb+7pkA40ZAAffoBA2ghYKyCVotJJXZK8ix52QEF+pkRk9TushSRvDUYAgegIWCsglaLSSV0SnbP46Vm/+XCn7a11Lz9TpS0EMkvA6t/wwe9KJ3VJZv2YiUMAAgkQsFtABkWl/6pJZN7cmp4UG3GwbGsvxXEZrgEBCEDASAJWJ4nqH5W+6ziVj+m1nFx3ZiE20K+81i2nfbdZ6upyMmFz9bVFlWw1Pidbjlfft1DfN+/9rqO3x4zOxTYuLgQBCEAgDgJWC4gG1BuV3iFr20TGjcvJJ3bIx8Gt5xp77pKX//5Bo5x8brO8tUYvGKusghWOWpVnUAsLQlMBEMUQgIB1BHJND4+x+jnM4qe75JorW2TaZiKTDq6VUz5fG7sR/rK82CMiG5tHjhKhid18XBACEAhIwHoB6ewS2fPwj6RDff/THZvJFuouJIkjTBHxMn6Exgsl2kAAAlESsF5ANJzpR26QjS0lUXdTUbJy7TtuEXEdkGqA0HihRBsIQCAIgVQIyB0PdEihOif/dEh8C+iVYJsoIpXG2r8coelPg88QgIAXAqkQkA83lKROLX3oVBomHLaKiBd2CI0XSrSBQDYIpEJATDRVmkXEC2+Exgsl2kDAbgIISIT2y7qIeEGL0HihRBsImEkAAYnYLlpETvpWs2xSi/wcwQkgNMHZcSYEoiKAgERFtl+/fu9Ezj9RZCsVWf/BRyLvf6i+b+j9/r76WZfpL1Kl9wPc7yNCU4bRrP5peW9dSdat7xa9TqjjlJrVu75aVQqeTpVqv/j3ZMn6pWAFtf+kXq0hNjaIjG7MydjNcjJ+XG9mhcYGM9YWyzPjkykEEJCYLOFHREbVi1x1pshuUyoPboP6Q/CBEpc+UUFoKrNyqkmL0JTUje2KV4uyclW3NL1RlFWru+VNlRXh7Xe75aON4dz16jQ8225dJZMnVsmUSVUydfu8TJtSJTvvlJcc2uLkXpkpQ0BiNHXYIuJl6AiNF0qV25gmNGvWdsvT6o2Pzy3rEu1PL60sSrFyBp3KEwuhJq+yBu02LS86pc/0Xatln93zMnGC1flZQ6CSrS4QkJjtnYSIeJkiQuOF0tA226n/zA+aUS2HzirIzL2rQ88ErcXh0aWdsviZLlmivpreMPslXVPVO2A0h1nq66AZBdEiw5FeAghIArY1VUS8oMi60NSotYJ999B/HNXXfoVIXpql1ygWPtYlDy7ulEVPdlq73qVZzdm/0COucw+s7llj8eJjtLGHAAKSkK1sFhEvyNIkNH13GQftVy3776X+EKr0/VEci5Z0yt2LOuWeRzoTeywVxbx0n/pO5MjZBTlqTkHmzEw+Y0RU88xavwhIghZPu4h4QesmNKvXiqzf6KWn8NrEcZfRN1q9pnH7fZ2i0/H0vhKgrya937dTi/GfO6xGjju8wJqJ5WZGQBI2ICIy1ACvvyvyxEvq62WR5/+qtiyrTMtRH3HdZfTN49mXi3LLgna5c6HaT5vh45i5BTlhXq3s9SkWS2x0AwTEAKtlXURa20WeekVkiRKMJUo43lkXvVEG3GWoxd6dJseze0i/v+aG37XLI0tjUMXoMYZ2hdlqTelk9S6fWftY/4670JjY0BECYoiVsiYiWbjL6O9aS57tkmtva5fHn0I4+nMZ/PmAfavl1ONrZaZaa+IwnwACYpCN0iwiid9lRLRjys19ljcV5eqb2uX+x7L9qMqN0+D6zx5YkDO+VCu7TOXR1mA2Jv2MgJhkDTWWNIlI1u4y+ruSTiNyxfXtcr16XMURnIB+RfVZp9SqFCvR7HwLPjLO1AQQEAP9wFYRyepdxmAXuv3eDrn0ujb5YH04qUQG95+1n/Vrqs/5ap0cd0RN1qZu/HwREENNZIuIZPkuY7DrvKbyUP34mjbR8Rwc4RPQ8SPfOb1OdlT5uDjMIICAmGEHx1GYKCLcZTiaSm76fYdcfHVr6gIAnWebXKkOSJx/Rr186VjuRpKzQvnKCEiZhZGfTBAR7jIqu4Z+THXBFa0skldGFEmNXmS/4Kx60Y+3OJIjgIAkx97zleMWEe4yvJlGP6qaf1mbrF1ndoJDb7Oxr9WE8VVy8TfrSI2SoOkQkATh+7l01CLCXYYfa0jP1tzLf9nm7yRaR0Lg7C/X9Wz5jaRzOh2WAAIyLB6zKsMUEe4ygtlWp1c/90ctsuAhFsqDEYzmrHmHFOSS8xpIHx8N3oq9IiAV0ZhZMRIR4S5jZDZ9851uOfvilp5YnZH1xNlRENAvtrp8foNM3oZdWlHwdeoTAXGiYniZHxHRU9l5ssiG5gRyTCUU/R2F+Z56oUu+cWEr6x1RwA2xT70ucuX59T3vbAmxW7qqQAABqQDG9GK/IhLlfOLOZBvlXJz61i92+voFLWzRdYJjYJne6nvVBQ09L7IycHipGhICYrE5kxKRAZlsU3SX4eQKdz3YKef8sMWpijLDCVz6nw1y9KG8vCpKMyEgUdKNoe+4RCTtdxlOptIpSc67pNWpijJLCPzo3HpSoERoKwQkQrhxdR2FiGTpLsPJToiHExU7yxCR6OyGgETHNtaetYj889c2jeiaWbzLcALGYysnKnaX8TgrGvshINFwTaRXvyKS9bsMJyPpBfP/+B5rHk5sbC/7+UUsrIdtQwQkbKIJ96dfXjRchDR3GZUNpLfq/ts3m9ltVRmR1TV6d9avL2tki2+IVkRAQoRpSlcrXivKqee1yJq15RxNJ/9zrXxhXk1s7/42hYXXceggwePPbCbOwyswS9vpOJHbftJIsGFI9kNAQgJJN/YS0OlJ/uV/bSLC3F4T+hq5jlj/7U9HkfbEFzXnxsT8O3OhNEMEdG4rvX7EkQ0C2tba5hwjJ4CAjJwhPVhMQK8ZkRjRYgMGHLq2ubY9x8gIICAj48fZFhPQ7/MYbsOBxVNj6B4IaNvz+mEPoIZpgoAMA4eq9BLQbxLUL4PiyDYB7QPaFziCEUBAgnHjLMsJ6NfQ8iZBy40YwvC1D2hf4AhGAAEJxo2zLCZw0+87eIe5xfYLe+j3P9Yp2ic4/BNAQPwz4wyLCby2ulsuvpr/OC02YSRD1z6hfYPDHwEExB8vWltO4MfXtBFpbrkNoxi+jgXSvsHhjwAC4o8XrS0moDPssuvGYgNGPHTtG9pHOLwTQEC8s6KlxQSaW0py6XX8h2mxCWMZuvYR7Ssc3gggIN440cpyAldc3852TcttGMfw9ZZe7Ssc3gggIN440cpiAsubinL97/ijYLEJYx269hXtMxzuBBAQd0a0sJwAKSssN2ACw8dnvEFHQLxxopWlBJY820XMh6W2S3LYOjZE+w7H8AQQkOH5UGs5gWtv49GV5SZMbPj4jjt6BMSdES0sJbD46S55/Cn+i7TUfIkPW/uO9iGOygQQkMpsqLGcwA0snFtuweSHjw8NbwMEZHg+1FpK4NmXi/LIUv57tNR8xgxb+5D2JQ5nAgiIMxdKLSdwywLWPiw3oTHDx5cqmwIBqcyGGksJrFnbLXcu7LR09AzbNALal7RPcQwlgIAMZUKJ5QRuvw/xsNyExg0fn3I2CQLizIVSiwnc8QAJ8Sw2n5FDx6eczYKAOHOh1FICOqPqW2t43GCp+YwdtvYpMjkPNQ8CMpQJJRYTuHsRj68sNp/RQ8e3hpoHARnKhBJLCbS2l+SeRxAQS81n/LC1b2kf4ygTQEDKLPhkOYGFj3XxtkHLbWjy8PVbC7WPcZQJICBlFnyynMCDi7n7sNyExg8fHxtoIgRkIA9+spSA/u9w0ZMIiKXms2bY2se0r3H0EkBA8IRUEHh0aad0oB+psKXJk9A+pn2No5cAAoInpILA4md4Np0KQ1owCXytbCQEpMyCTxYTWIKAWGw9u4aOr5XthYCUWfDJUgI6T1HTGwQPWmo+64atfY3cWL1mQ0Csc18GPJjA0y+yqjmYCT9HSwCf6+WLgETrZ/QeA4HnlrH+EQNmLtGPAD7XCwMB6ecUfLSTwF+Wcwdip+XsHTU+12s7BMReH2bkikBJZZZ4aSUCgjPES0D7nPa9rB8ISNY9wPL5r3i1SGCX5Ta0cfg6mFD7XtYPBCTrHmD5/FeuYveV5Sa0dvj4nggCYq37MnBNoOkN/gvEE5IhgO8hIMl4HlcNjcCq1dyBhAaTjnwRwPcQEF8OQ2PzCLzJ2wfNM0pGRoTvISAZcfX0TvPtd7kDSa91zZ4ZvoeAmO2hjG5YAs0tJfloI3sph4VEZWQEtO9pH8zywSJ6lq1v+dzfW5ftX17LzZeK4WfdBxGQVLhxNiexbj2Pr7JpeXNmnXUfREDM8UVG4pPAhxu4A/GJjOYhE8i6DyIgITsU3cVHYGMzAhIfba7kRCDrPoiAOHkFZVYQaG6xYpgMMsUEsu6DCEiKnTvtU2tt5w4k7TY2fX5Z90EExHQPZXwVCXR2VqyiAgKxEMi6DyIgsbgZF4mCQJFNWFFgpU8fBLLugwiID2ehKQQgAAEIlAkgIGUWfLKMQB7vtcxi6Rtu1n2QX8H0+XRmZlQoZGaqTNRQAln3QQTEUMdkWO4E6mtz7o1oAYEICWTdBxGQCJ2LrqMl0NgQbf/0DgE3Aln3QQTEzUOoN5bA6EbuQIw1TkYGlnUfREAy4uhpnObYzRCQNNrVpjll3QcREJu8lbEOIDB+HO47AAg/xE4g6z7Ib2DsLscFwyKw1XjuQMJiST/BCGTdBxGQYH7DWQYQaGzIyZjRiIgBpsjkELTvaR/M8oGAZNn6KZj7tlvjwikwo5VTwPd4J7qVjsugywQmT0RAyjT4FCcBfA8BidPfuFYEBKZMQkAiwEqXHgjgewiIBzehickEpm6fN3l4jC3FBPA9BCTF7p2NqU2bwh1INixt3izxPQTEPK9kRL4I7LxTXvLchPhiRuORE9A+p30v6wf/vmXdAyyff07totxtGr/IlpvRuuFrn9O+l/UDAcm6B6Rg/nvugoCkwIxWTQGf6zUXAmKV2zJYJwLTd612KqYMApERwOd60SIgkbkYHcdFYJ/duQOJizXX6SWAz/VyQED4jbCewMQJVTJ1e1zZekNaMgHta9rnONiFhQ+khMDMvXmMlRJTGj8NfK1sImS0zIJPFhOYhYBYbD27ho6vle2FgJRZ8MliAgfNKEhNweIJMHQrCGgf077G0UsAAcETUkFAB3bN2Z9f7FQY0+BJaB8jcLVsIASkzIJPlhM4dBYCYrkJjR8+PjbQRAjIQB78ZDGBuQdW89+hxfYzfej6zkP7GEeZAAJSZsEnywnU1+bkyNnchVhuRmOHr31L+xhHmQACUmbBpxQQOGoOApICMxo5BXxrqFkQkKFMKLGYwJyZBdmOtxRabEEzh659SvsWx0ACCMhAHvyUAgKfO6wmBbNgCiYRwKecrYGAOHOh1GICxx3Of4oWm8/IoeNTzmZBQJy5UGoxAZ2n6Ji5iIjFJjRq6NqXyH3lbBIExJkLpZYTOGFereUzYPimEMCXKlsCAanMhhqLCez1qbzMnsGefYtNaMTQtQ9pX+JwJoCAOHOhNAUETv48dyEpMGOiU8CHhsePgAzPh1qLCczap1oO2Je7EItNmOjQte9oH+KoTAABqcyGmhQQOPV47kJSYMZEpoDvuGNHQNwZ0cJiAjP3qpbPHsiOLItNmMjQtc9o3+EYngACMjwfalNA4IwvcReSAjPGOgV8xhtuBMQbJ1pZTGCXqXk5hQV1iy0Y79C1r2if4XAngIC4M6JFCgicdUqtbDGOTKopMGWkU9A+on2FwxsBBMQbJ1pZTqCxISfnfLXO8lkw/KgJaB/RvsLhjQAC4o0TrVJA4LgjasiomgI7RjUFnW1X+wiHdwIIiHdWtEwBge+cXsdbC1Ngx7CnoN82qH2Dwx8BBMQfL1pbTmDHSVUy/4x6y2fB8MMmoH1C+waHPwIQ88eL1ikg8KVja4gNSYEdw5qCjvnQPsHhnwAC4p8ZZ6SAwAVn1cuE8bh/Ckw5oiloH9C+wBGMAL9BwbhxluUE9HbNi7/JM2/LzTji4WsfYHt3cIwISHB2nGk5Ab3r5uwvIyKWmzHw8LXtec95YHw9JyIgI+PH2ZYT0Ckr5h1CrizLzeh7+NrmpCvxjW3ICQjIECQUZI3AJec1yJ67kLoiK3bXttY25xg5AQRk5AzpwXICOgbg8vkNLKpbbkcvw9eL5trW2uYcIyeAgIycIT2kgMDkbarkyvPr+cOSAltWmoIWDW1jbWuOcAhAMhyO9JICAvvuUS1XXcCjjRSY0nEK2rbaxhzhEUBAwmNJTykgcOisglz6n4hICkw5YAraptq2HOESQEDC5UlvKSBw9KEF+dG5BJelwJQ9U9C21DblCJ8AAhI+U3pMAQGdlRURsd+Q2oZk2I3OjghIdGzp2XIC+g8Pj7PsNaK2HeIRrf0QkGj50rvlBPSjj59fxLZPm8yod1tpm/HYKnqrISDRM+YKlhPQi6+/vqyROBEL7KjjPLStWDCPx1gISDycuYrlBPT2z9t+0kjEusF21BHm2kZs1Y3PSAhIfKy5kuUEdADab386itxZBtpR57bStiFIMF7jICDx8uZqlhPQz9cvU6kwyOJrjiG1LbRNSE8Sv01yTQ+PKcV/Wa4IAfsJLFrSKfMva5O167rtn4yFM9DrHfp9HqRkT8543IEkx54rW05A/+FacO0oXo+bgB31a2g1e8QjAfj9LskdSD8YfIRAUAI3/b5DLr66VYrFoD1wnhcC+jHV/DPqeYe5F1gxtEFAYoDMJbJB4LXV3fLja9pEP9riCJ+Avtv4zul1suMkHpyETzdYjwhIMG6cBYGKBG6/t0Muva5NPljP8mJFSD4q9DvLz/lqHVHlPpjF1RQBiYs018kUgeaWklxxfbtc/7v2TM077Mme8vlaOeuUWmlsyIXdNf2FQAABCQEiXUCgEoHlTUW5+qZ2uf8xHmtVYuRUrhfJ9TvLd5mqFj04jCWAgBhrGgaWJgJLnu2Sa29rl8ef6krTtEKfywH7Vsupx9fKzL148VPocCPoEAGJACpdQqASgcVPd8kN6rHWI0sRkv6MZs+olpPV46pZ+yAc/bmY/hkBMd1CjC+VBJ59uSi3LGiXOxdm+9HWMXMLcsK8WtnrUzyqstHRERAbrcaYU0Ngzdpuuf2+TrnjgQ55a002Itq3m1glnzusRo47vCATJ7Al12ZnRkBsth5jTxUBHT9y96JOueeRztQFJOoAwCNnF+SoOQWix1PktQhIiozJVNJBoLW9JAsf65IHF3fKoic7pcPSp1w16jXkc/Yv9LybY+6B1VJfy1bcdHhoeRYISJkFnyBgHAGdGuXRpZ2y+JkuWaK+mt4w+zHX1O2rZObe1TJLfR00o0CGXOM8KtwBISDh8qQ3CERKQK+ZPP1iUZ5b1iV/WV6Ul1YWE3vcpR9L7TYt3/OSrem7Vss+u+dZ04jU+uZ1joCYZxNGBAHPBEoqW8qKV4uyclW3ujspyiqVj+tNtRj/9rvd8tHGcFKpjBmdk223rpLJavF7ispDNXX7vEybUiU775SXHE+lPNsqjQ0RkDRalTlBQBHQ6VTeW1eSdeu75cMNJdnYXFJlInqNpVOtqxT//jQsrzZCFdR6hV6jaGwQGd2Yk7Gb5WT8uCrZarwuQyVwKGcCCIgzF0ohAAEIQMCFAJuwXQBRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EEBAXABRDQEIQAACzgQQEGculEIAAhCAgAsBBMQFENUQgAAEIOBMAAFx5kIpBCAAAQi4EPj/EnFMPEnVghgAAAAASUVORK5CYII=

                                    Last Updated: 9-Mar-2016 12:52 PM
                                    Yaohui Wang about a year ago
                                    • Show Code
                                    /**@peep sketch */ size(200, 200); background(0, 0, 255);
                                    Michael McCammon about a year ago
                                    • Show Sketch
                                    /** @peep sketchcode */
                                     
                                    /** Loop
                                    void setup() {
                                      size(400, 400);
                                      background(255,40,200);
                                    }
                                     
                                    float x = 0;
                                     
                                    void draw()
                                    {
                                      x += 20;
                                      if (x >width) {
                                        x = 20;
                                    }
                                    stroke(170, 255, 0);
                                    strokeWeight(2);
                                    line (400, x, 0,0);
                                     
                                    stroke(170, 255, 0);
                                    strokeWeight(2);
                                    line (0, x, 400,400);
                                     
                                    stroke(170, 255, 0);
                                    strokeWeight(2);
                                    line (0, x, 400,0);
                                     
                                     
                                    }
                                    */
                                     
                                    int x;
                                    x = 20; //create x int to modify line position.
                                    //size(x,150); //sick window.
                                     
                                    size(200,200);
                                    background(255,40,200);
                                     
                                    /*
                                    fill(80);
                                    rect(20,20,20,20);
                                     
                                    noFill();
                                    quad(60, 54, 86, 20, 70, 150, 30, 76);
                                    */
                                     
                                    noStroke();
                                    fill(0,255,238);
                                    triangle(0, 0, 200, 0, 200, 200);
                                     
                                    strokeWeight(4);
                                    stroke(255,255,0);
                                     
                                    line(0,0,200,200);
                                     
                                    line(0,x,200,200);
                                    x += 20;
                                    line(0,x,200,200);
                                    x += 20;
                                    line(0,x,200,200);
                                    x += 20;
                                    line(0,x,200,200);
                                    x += 20;
                                     
                                    line(0,x,200,200);
                                    x += 20;
                                    line(0,x,200,200);
                                    x += 20;
                                    line(0,x,200,200);
                                    x += 20;
                                    line(0,x,200,200);
                                    x += 20;
                                     
                                    line(0,x,200,200);
                                    x += 20;
                                    line(0,x,200,200);
                                    x += 20;
                                    line(0,x,200,200);
                                    x += 20;
                                    line(0,x,200,200);
                                    x += 20;
                                     
                                    int y;
                                    y = 20;
                                    stroke(255,255,0);
                                    line(200,0,0,0);
                                    stroke(255,255,y);
                                    line(200,y,0,0);
                                    y +=20;
                                    stroke(255,255,y);
                                    line(200,y,0,0);
                                    y +=20;
                                    stroke(255,255,y);
                                    line(200,y,0,0);
                                    y +=20;
                                    stroke(255,255,y);
                                    line(200,y,0,0);
                                    y +=20;
                                    stroke(255,255,y);
                                    line(200,y,0,0);
                                    y +=20;
                                    stroke(255,255,y);
                                    line(200,y,0,0);
                                    y +=20;
                                    stroke(255,255,y);
                                    line(200,y,0,0);
                                    y +=20;
                                    stroke(255,255,y);
                                    line(200,y,0,0);
                                    y +=20;
                                    stroke(255,255,y);
                                    line(200,y,0,0);
                                    y +=20;
                                     
                                    stroke(40,0,255); 
                                    strokeWeight(30);
                                    point(100,100);
                                     
                                    //single line comment. 
                                    //Comments are dope af. 
                                     
                                    println("yo yo");
                                    println("ye ye");
                                    Rob Saunders about a year ago

                                    For anyone who's posted some code in a comment and is wondering why it doesn't show up as a sketch, you just need to add ~~~ on a separate line above and below your code.

                                    Last Updated: 9-Mar-2016 1:11 PM
                                    Albert Ma about a year ago
                                    • Show Sketch
                                    /**@peep sketchcode */
                                     
                                    size (200, 200); // set the size of the window/canvas
                                    background (0, 245, 255); //make this cyan
                                     
                                    strokeWeight (4);
                                     
                                     
                                    //line repitition
                                    int x;
                                    x = 20;
                                    stroke (255, 62, 150);
                                    line (0,0, 200, 200);
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                    line (0, x, 200, 200);
                                    x+=20 ;
                                     
                                     
                                    //line repitition
                                     
                                    line (0, x, 200, 0);
                                    x+=40;
                                    line (0, x, 200, 0);
                                    x+=40;
                                    line (0, x, 200, 0);
                                    x+=40;
                                    line (0, x, 200, 0);
                                    x+=40;
                                    line (0, x, 200, 0);
                                    x+=40;
                                    line (0, x, 200, 0);
                                    x+=40;
                                    line (0, x, 200, 0);
                                    x+=40;
                                    line (0, x, 200, 0);
                                    x+=40;
                                     
                                     
                                    // circles
                                    fill (0, 245, 255);
                                    ellipse (40, 46, 55, 55);
                                    ellipse (60, 46, 55, 55);
                                    ellipse (80, 46, 55, 55);
                                    ellipse (100, 46, 55, 55);
                                    ellipse (120, 46, 55, 55);
                                    ellipse (140, 46, 55, 55);
                                    ellipse (160, 46, 55, 55);
                                    Tiarne Desmond about a year ago

                                    .

                                    Last Updated: 9-Mar-2016 2:10 PM
                                    Jing Zeng about a year ago
                                    • Show Code
                                    /** @peep sketch */
                                    size(300, 300);
                                    background(10);
                                    Julia Spyrou about a year ago

                                    // Comments are useful becaue you an tell the marker what your code does

                                    size(200,200); background(240,30,120); line(50, 50, 150, 150); line(60, 50, 140, 150); line(70, 50, 130, 150); line(80, 50, 120, 150); line(90, 50, 110, 150); line(100,50, 100, 150); line(110, 50, 90, 150); line(120, 50, 80, 150); line(130, 50, 70, 150); line(140, 50, 60, 150); line(150, 50, 50, 150);

                                    Julia Spyrou about a year ago
                                    • Show Sketch
                                    /** @peep sketchcode */
                                     
                                    size(200,200);
                                    background(240,30,120);
                                    line(50, 50, 150, 150);
                                    line(60, 50, 140, 150);
                                    line(70, 50, 130, 150);
                                    line(80, 50, 120, 150);
                                    line(90, 50, 110, 150);
                                    line(100,50, 100, 150);
                                    line(110, 50, 90, 150);
                                    line(120, 50, 80, 150);
                                    line(130, 50, 70, 150);
                                    line(140, 50, 60, 150);
                                    line(150, 50, 50, 150);
                                    Last Updated: 9-Mar-2016 2:23 PM
                                    Esther Lee about a year ago
                                    • Show Sketch
                                    /** @peep sketchcode */
                                     
                                    size(200, 200);
                                    background(0);
                                    Last Updated: 9-Mar-2016 2:34 PM
                                    Joshua Greenhalgh about a year ago
                                    • Show Code
                                    /**@peep sketch */
                                    size(300, 300);
                                    background(150, 20, 20); //change background to dark red
                                    strokeWeight (5); //thicken line
                                    stroke (180, 160, 40); //change stroke colour to gold
                                     
                                    int x; //define integer.
                                    x=60;
                                    fill (80, 100, 0); //change fill colour to gold
                                    ellipse (x, x, 150, 150);
                                    x+=60;
                                    fill (100, 120, 0);
                                    ellipse (x, x, 150, 150);
                                    x+=60;
                                    fill (120, 140, 0);
                                    ellipse (x, x, 150, 150);
                                    x+=60;
                                    fill (140, 160, 0);
                                    ellipse (x, x, 150, 150);
                                    x+=60;
                                    Last Updated: 9-Mar-2016 3:40 PM
                                    Matthew Brunker about a year ago
                                    • Show Code
                                    • Show Sketch
                                    /** @peep sketch */
                                     
                                    /** @peep sketchcode */
                                     
                                    //this should be a triangle
                                    size(400, 400);
                                    fill(240, 60, 360);
                                    triangle(200, 40, 100, 280, 300, 280);
                                    Yulong Guo about a year ago
                                      /** @curves */
                                       
                                      int x = 340;
                                      int y = 80;
                                       
                                      void setup() {
                                      size(400, 400);
                                      background(10, 150, 240);
                                      noFill();
                                      smooth();
                                      }
                                       
                                      void draw(){
                                      stroke(255, 255, 255);
                                      line(x-80, y-80, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(0, 0, 0);
                                      bezier(x-80, y-80, 0, 0, 360, 360, 0, 400);
                                      stroke(255, 255, 255);
                                      line(x-40, y-40, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(0, 0, 0);
                                      bezier(x-40, y-40, 0, 0, 360, 360, 0, 400);
                                      smooth();
                                      stroke(205, 205, 205);
                                      line(x, y, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(0, 0, 0);
                                      bezier(x, y, 0, 0, 360, 360, 0, 400);
                                      smooth();
                                      stroke(155, 155, 155);
                                      line(x+40, y+40, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(50, 50, 50);
                                      bezier(x+40, y+40, 0, 0, 360, 360, 0, 400);
                                      smooth();
                                      stroke(105, 105, 105);
                                      line(x+80, y+80, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(100, 100, 100);
                                      bezier(x+80, y+80, 0, 0, 360, 360, 0, 400);
                                      smooth();
                                      stroke(105, 105, 105);
                                      line(x+80, y+120, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(100, 100, 100);
                                      bezier(x+80, y+120, 0, 0, 360, 360, 0, 400);
                                      }
                                      Matthew Gorgula about a year ago
                                      • Show Code
                                      /** @peep sketch */
                                       
                                      int x = 100;
                                      int y = 100;
                                      int a = 255;
                                      int s = 16;
                                       
                                      void setup() {
                                         size(800, 800);
                                      }
                                       
                                      void draw() {
                                      background(255);
                                      noStroke();
                                      if (--a < 1) {a= 255; }
                                      fill(255, 200, 200, a);
                                      ellipse(400, 400, s, s); //ellipse (x, y, width, height);
                                      if (++y > 300) {y= -100; }
                                      if (++s > 16) {s= +300; }
                                       
                                       
                                       
                                      }
                                      Last Updated: 9-Mar-2016 4:14 PM
                                      Yulong Guo about a year ago
                                      • Show Code
                                      /** @peep sketch */
                                      /** @curves */
                                       
                                      int x = 340;
                                      int y = 80;
                                       
                                      void setup() {
                                      size(400, 400);
                                      background(10, 150, 240);
                                      noFill();
                                      smooth();
                                      }
                                       
                                      void draw(){
                                      stroke(255, 255, 255);
                                      line(x-80, y-80, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(0, 0, 0);
                                      bezier(x-80, y-80, 0, 0, 360, 360, 0, 400);
                                      stroke(255, 255, 255);
                                      line(x-40, y-40, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(0, 0, 0);
                                      bezier(x-40, y-40, 0, 0, 360, 360, 0, 400);
                                      smooth();
                                      stroke(205, 205, 205);
                                      line(x, y, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(0, 0, 0);
                                      bezier(x, y, 0, 0, 360, 360, 0, 400);
                                      smooth();
                                      stroke(155, 155, 155);
                                      line(x+40, y+40, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(50, 50, 50);
                                      bezier(x+40, y+40, 0, 0, 360, 360, 0, 400);
                                      smooth();
                                      stroke(105, 105, 105);
                                      line(x+80, y+80, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(100, 100, 100);
                                      bezier(x+80, y+80, 0, 0, 360, 360, 0, 400);
                                      smooth();
                                      stroke(105, 105, 105);
                                      line(x+80, y+120, 0, 0);
                                      line(400, 400, 0, 400);
                                      stroke(100, 100, 100);
                                      bezier(x+80, y+120, 0, 0, 360, 360, 0, 400);
                                      }
                                      Last Updated: 9-Mar-2016 4:13 PM
                                      Yaohui Wang about a year ago
                                      • Show Code
                                      /** @peep sketch */
                                      size(200,200); 
                                      background(127, 191, 15);
                                      line(50,50,100,200);
                                      line(100,200,150,50);
                                      Dehui Liu about a year ago

                                      /** @peep sketchcode */ size(200, 200);

                                      strokeWeight(2);

                                      line(20, 20, 180, 20); line(180, 20, 180, 180); line(180, 180, 20, 180); line(20, 180, 20, 20); line(20, 20, 180, 180); line(180, 20, 20, 180);

                                      Last Updated: 13-Apr-2016 9:04 PM
                                      Shams Mosowi about a year ago

                                      /**@peep sketch */ size(200, 200); background(0, 0, 255);