• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

BMS Processing Class

A Course23.com Production

"Stop, Pause, and Think..." -- Ms. Elwell
"Take your time, it isn't a race" -- Mr. Helmke

  • Home
  • Graphing and Color
    • Graphing Shapes
      • Activity 1
      • Activity 2
    • Color (R,G,B) and Grey Scale
      • Activity 3
      • Activity 4
  • Code and Sketches
    • Parts of Code
      • Activity 5
    • Your Code & OpenProcessing Sketches
      • Activity 6
      • Activity 7
  • Variables, etc
    • Variables
      • Activity pre8 and 8
      • Activity 8.1
      • Activity 9
      • Activity 10
      • Activity 11
      • Activity 11.1
    • Operator Precedence
      • Activity 12
      • Activity 13
    • Random
      • Activity 14
      • Activity 15
  • Conditionals – If, Else, Else If
  • Resources

Activity pre8 and 8

Activity pre8

Look at your character drawing on your graph paper.  Choose a center point of your character.  At the top of your new piece of lined notebook paper, declare a variable x to be equal to your center point x and a variable y to be equal to your center point y location.

Take out your original paper code of your character.  You will be re-writing by hand ALL of the lines of your code that include an x and a y position in your code.

You may use the calculator on your computer to assist you. To find it, (on Windows computers) click on the Windows icon in the lower left corner. There should be a calculator option.

1
2
3
4
5
6
7
8
9
10
    var x = 200;
    var y = 150;
 
If you have an original line of code such as:
   rect(100, 200, 70, 100);//left leg
 
You will re-write it to include your declared variables:
   rect(x-100, y+50, 70, 100);//left leg
 
    ... // more code below here

Turn in Activity pre-8 to be checked BEFORE you enter it into open processing.

Activity 8

Open your character sketch from Activity 7.  Add two variables x and y at the top of your draw function and set them to be equal to a central part of your character.  What is the x, y of the center of your drawing; make that be your var x = and your var y = 

For example:

1
2
3
4
5
function draw() {
    var x = 200;
    var y = 150;
 
    ... // more code below here

Save the sketch from Activity 7 as a FORK and add “var” to the end of the name (as in “MyCharacter_(name)__var”).

So if your character name is HENRY, now click on SAVE AS FORK and name the sketch HENRY VAR. Then SUBMIT.

In all of the places where you specify a location such as the x and y position of a rectangle or ellipse, replace the fixed x and y position with an offset from the x and y variable.  Use what you did on paper and only change where you have an x and a y in your code.

For example, if you are drawing a rectangle at x, y as 250,100 your code might start with:

1
rect(250,100,50,50);

and become:

1
rect(x+50, y-50, 50,50);

After you have incorporated x and y variables into all your x and y arguments in your code, your character should look the same (as if nothing has changed because it shouldn’t have). If it is not the same, what did you do wrong?

Go back to:  Variables

Primary Sidebar

Required Reading:

Course Coding Standards

Copyright © 2016–2021 Chris Elwell/Michael Helmke · This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License · Log in