Your Code & OpenProcessing Sketches

Create Creature

For this part, you are going to design/draw a creature of your own using the shapes you have learned so far. I want you to keep your design simple since the point here is to learn how to turn your design into code you can run and see on the screen.

Complete Activity 6

OpenProcessing.org Sketches

To start coding with a new sketch, we start with a function, setup to get everything prepared:

function setup() {
    createCanvas(windowWidth, windowHeight);  
}

function setup() {

createCanvas(windowWidth, windowHeight);

}

This sets the size of the window in which our drawings will appear. When working on paper we used a 400×400 graph paper grid. When we are writing code to appear on screen, we want to use the entire screen. The createCanvas(...) function sets the drawing area for our sketch. The variables windowWidth and windowHeight are pre-set with the width and height of the entire screen. So calling createCanvas(windowWidth, windowHeight); sets the drawing area to the entire screen.

Be sure to delete background out of function setup() as it belongs as the first line of code in function draw().

—————–

Then, we need to add our code to a function called draw. Be sure to keep your code between the opening and closing curly braces { } If you don’t put the code inside of the curly braces, your code won’t work right. You will need to delete the default line of code ellipse(mouseX, mouseY, 20, 20); from your sketch and then type in YOUR code.

function draw() {
  background(255);//white
  strokeWeight(3);//thick line for head
  stroke(0, 0, 180);//blue outline
  fill(200, 0, 0);//red inside
  rect (200, 200, 50, 50);//head
  strokeWeight(1);//normal line thickness
  stroke(0);//black outline
  fill(0);//black inside
  ellipse (190, 190, 10, 10);//eye left
  ellipse (210, 190, 10, 10);//eye right
}

function draw() {

background(255);//white

strokeWeight(3);//thick line for head

stroke(0, 0, 180);//blue outline

fill(200, 0, 0);//red inside

rect (200, 200, 50, 50);//head

strokeWeight(1);//normal line thickness

stroke(0);//black outline

fill(0);//black inside

ellipse (190, 190, 10, 10);//eye left

ellipse (210, 190, 10, 10);//eye right

}

Remember to comment your code with two slashes //

If you want a longer comment, you can do this:

//* this is a comment that spans
more than one line of code  */

1 2	//* this is a comment that spans more than one line of code */

Remember:

the computer READS the instructions (your code) from top down and does exactly what you tell it to do.
- therefore, you do not need to repeat the same code. For example, if your fill is grey for three shapes, then code fill for grey and then code the three shapes underneath it. You do NOT need to keep coding for grey.
No space between the function name and the arguments. line(); not line ();
Once you’ve entered your program, you will click on the RUN button (like a START arrow on a video). If nothing shows up, there is an error in your code. Time to proofread what you typed and find any mistakes. Your graphed drawing is correct! Check your hand written code to make sure you coded properly.
The computer can only do what it is told, it does not think for itself.
Processing is CASE SENSITIVE and does NOT do spellcheck for you.

Complete Activity 7