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:
1 2 3 |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
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:
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();
notline ();
- 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