Scribd
Upload
3 views4 pages

Lab 1 Variables

This document outlines Lab 1 for an introduction to Java programming using Processing, focusing on familiarization with the Processing environment and core programming concepts. It includes exercises on drawing shapes, using variables, and problem decomposition, with specific tasks such as drawing a car, a square, and a stick person. Additional resources and support information are provided for students to enhance their learning experience.

Uploaded by

alamiabdullah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views4 pages

Lab 1 Variables

This document outlines Lab 1 for an introduction to Java programming using Processing, focusing on familiarization with the Processing environment and core programming concepts. It includes exercises on drawing shapes, using variables, and problem decomposition, with specific tasks such as drawing a car, a square, and a stick person. Additional resources and support information are provided for students to enhance their learning experience.

Uploaded by

alamiabdullah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Lab 1.

Introduction to Java Programming Using Processing


Revision:
During your pre-session activity you should have become familiar with the resources at
Processing.org website (ensure this is bookmarked) and creating and saving various processing
sketch files.

Read the webpage on Problem Solving

Support : See top of page for contact details : support tutor, unit tutors

Ask for support while undertaking the following core exercises.

Learning Objectives
 Familiarity with Processing Environment
o Writing and saving a program
o Running a program
o Correcting syntax errors
 Java syntax
 Simple problem decomposition – break problem into smaller chunks
 Program flow (order of commands)
 Using Variables and expressions
 Program sequence

Resources:
open these and have them available for reference

 Lecture Notes (moodle)


 Processing.org website (add to favourites) and look at tutorials, particularly
o https://processing.org/tutorials/coordinatesystemandshapes

Exercise 1 : (Pair Programming). Draw a Car


Open Processing P on your machine. You’ll see a text editor with “sketch” at the top and a text editor
below (white background)
Using the rect and ellipse drawing commands, you must draw a car similar to the diagram below (with
the same relative sizes and positions of each part). You can assume that the size of a square is 10 pixels,
but you will need to set the size of your canvas to 300 by 300

size(300,300);
Pair programming involves one person writing the code, while the other makes suggestions. The first
coder should get the boxes in the correct places, the 2nd will then take over to get the circles in the
correct places. Draw a box , run the code to check, draw another box and check (repeat)

Your code should be clearly commented to show what each block of commands is drawing.

Press play to run the code

Save your code in Programming/Week1

Exercise 2 : Variables

Exercise 2. Enter the code below precisely (you can copy and paste). Press play

//A simple drawing Program


float x;
x = 50;

//screen size 500x500 pixels


size(500,500);

point(0,0);

ellipse(x,250,40,40);

You should have made a ‘point’ (spot) at the origin corner (top left) and a white circle at position 50,250
with width and height of 40 pixels.

Now stop the program, this will clear the display.

1. Make the circle appear in the middle of the screen (alter the value of variable x). Make the
circle appear in the bottom right corner of the screen (we should only see ¼ of it)
2. Make the circle double its original size, then ½ its original size
3. Introduce a new variable
float size = 50;

4. Use the size variable inside the ellipse command, so that, you can more easily alter the size of
the circle, only changing one value in the program (rather than 2). Try this out.

Question : how does the compiler understand the difference between the size variable and the size
command in our program?

Answer : commands are followed by brackets “( )”. These brackets tell the compiler that we are dealing
with a command. We couldn’t use brackets or other symbols in a variable name – actually they should
start with a letter, they are case sensitive, they can contain numbers but not spaces. The usual
convention is camelCase, where each new word start with a Capital letter e.g.

float centreCircleX = 20;

Exercise 3. drawing a square

Draw a square of edge 50 pixels on the screen using only the line command, go clockwise. Line takes 4
parameters (2 pairs) as follows

line (startX, startY, endX, endY);

Problem decomposition : square is made up of 4 parts


1. top edge - line
2. right edge – line
3. bottom edge – line
4. left edge – line
edges : 50 pixels long, so either startX and endX differ by 50, or startY, endY differ by 50
Add 4 comments, to your code one for each stage

Exercise 3.B. Movable square

If we want to move the square… introduce a variable x to allow the square to be moved left or right on
the canvas

float x = 20; //x can store floating points or integer numbers, x becomes equal to 20

Introduce a variable y to allow the square to be moved up and down as well.

Exercise 3.c Scalable square

Finally add a variable called edge that allows you to vary the size of the square and try different values
for edge. Alter x and y as well to ensure your square scales and moves dependent on the variable values.
Exercise 4. Drawing a Stick Person of variable size

Using the 3 variables x,y,size and only the line and ellipse drawing commands, you must draw a stick
person similar to the diagram below (with the same relative sizes and positions of each part) where x,y is
the centre of the head and the value of size the length of the torso (centre of head down). Other sizes
can be seen by counting the number of graph squares relative to size. You SHOULD add extra variables
as required to store suitable starting points for the arms, legs etc.

Your code should be clearly commented to show what each block of commands is drawing.

Experiment with the values of size, x and y to draw different sized people in different places on the
screen (remember that processing will allow you to draw off the screen, so if nothing appears alter x and
y).

size

size

Save your program.

Extension exercises : tutorials at https://processing.org/tutorials, covers everything from basic


drawings through to 3Danimation and machine learning. The Text tutorials cover animation and other
ideas that we’ll meet shortly in the course.

If you are a more advanced programmer, see https://natureofcode.com/book/

You might also like