DEPARTMENT AND COURSE NUMBER: COMP 1010 Introduction to Computer Science 1 TERM: Fall 2021

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

The Language is Processing not JAVA !!!!! Please follow all instructions as shown in the attached document

ASSIGNMENT 3: Strings, Chars and Loops

DEPARTMENT AND COURSE NUMBER: COMP 1010

COURSE TITLE: Introduction to Computer Science 1

TERM: Fall 2021

1

Assignment 3

 

Notes:

• Name your sketch using your name, the assignment number, and the question number, exactly as in

this example: LastnameFirstnameA3Q1.

• Your program must run upon download to receive any marks.

• Assignments must follow the programming standards document published on the course website on

UMLearn.

• After the due date and time assignments may be submitted but will lose 2% of marks per hour late or

portion thereof.

• You may submit a question multiple times, but only the most recent version will be marked.

• These assignments are your chance to learn the material for the exams. Code your assignments

independently. We use software to compare all submitted assignments to each other, and pursue

academic dishonestly vigorously.

• This assignment is designed to allow you to demonstrate your understanding of Strings, chars and

loops. Do not use arrays, arrays will be covered in later assignments.

Overview

You will be creating a text styler application, from scratch. A screenshot of this application is shown below:

You will use loops and text to create the button bar with 8 buttons across the top of the screen. You will

then write code that transforms user inputted text according to the formats on the buttons. Then you will

add the two-dimensional colour palette at the bottom of the screen using nested loops, and detect what

colour the user clicked on and change the colour of the displayed text. Finally, you are asked to come up

with your own unique text transformation to fill the button at the right. It is important that you get Q1 and

Q2 done first. After than you can do Q3 and Q4 in any order.

Q0: Setup

Create a new Processing script that is 800x400 in size. Add the following statement to the very top

of the script (after your author code block but before any global variables or constants):

import javax.swing.JOptionPane;

This code imports a Java library component that allows your code to pop up a dialog box and get

text from the user. This will be used in Q2. 

ASSIGNMENT 3

DEPARTMENT AND COURSE NUMBER: COMP 1010

2

Q1: Buttonbar and Button Labels [4 points]

You should be able to do this question after learning about how to display text and learning how

to write a basic counting loop.

Use a counting loop to draw the eight buttons on the top button bar. Create appropriate global

constants to specify the width and height of the buttons as well as the number of buttons. This

loop should draw buttons with no text labels on them. You can choose whatever fill colour you

want for the buttons.

Next, add the text labels [New…, Original, UPPER, lower, iNVERT, camelCase, CONSTANT]

to the buttons, one at a time1. You can’t do this inside the loop because each label is unique. You

can create functions to draw each button label if you want. All the labels should be vertically

aligned and each label should be centered in each button. The buttons should follow the order

shown. There is no label for the last button (that’s for the bonus).

Finally, add code to the button loop to detect if the mouse is over the button you are currently

drawing, and if so, use a different highlight colour to indicate this, as seen in the demo.

All of the code for this should be in one or more functions, and only the main button bar drawing

function should be called from your draw() function. At this point, your draw() function should

only contain a background call and the function call to draw the button bar.

Q2: Text Transformations [8 marks]

Part A

Add a getText() function to your script and call it from setup(). This function should prompt the

user to enter a short phrase, and save the entered phrase to a global String variable that you

create. The following line of code will do this (though you might use a different variable name):

originalText = JOptionPane.showInputDialog("Enter a short phrase:");

Create six more global String variables. You need one each to store a version of the user’s text

phrase that is styled as:

1. Uppercase

2. Lowercase

3. Inverted case

4. Camel case

5. Constant case

You also need one global String variable that will serve as a reference to the currently displayed

String style. You should call this displayText.

Part B

Either in the getText() function, or in other functions you call from getText(), write code that will

transform the original text entered by the user into the formats described below, storing the result

in the variables you just created. Simplifying assumptions: assume that the user will only enter

phrases that start with a letter and will not enter phrases with numeric digit characters. You do

1 This code will be repetitive, that’s okay - you will learn better ways of solving this problem later in the course.

ASSIGNMENT 3

DEPARTMENT AND COURSE NUMBER: COMP 1010

3

not need to write code to handle numeric digit characters or user phrases that start with

something other than a letter.

1. Uppercase: this code should transform the user input String into one that is all uppercase.

There is a built-in String function that you can use. Punctuation should remain. “How is

the weather?” should become: “HOW IS THE WEATHER?”

2. Lowercase: reverse of uppercase. “How is the weather?” should become: “how is the

weather?”.

3. Inverted case. For each LETTER in the String, if it is uppercase, it should be lower-case

and vice-versa. “How is the weather?” should become: “hOW IS THE WEATHER?”.

4. Camel case: turn the phrase into a variable name, removing punctuation and spaces, and

capitalizing the beginning of each word. “How is the weather?” should become:

“howIsTheWeather”.

5. Constant case: turn the phrase into a constant, replacing spaces with underscores,

removing punctuation, and capitalizing all letters. “How is the weather?” becomes

“HOW_IS_THE_WEATHER”.

Some of the above are easier than others. Please note that the only String functions you are

allowed to use are: charAt(), length(), toUpperCase(), toLowerCase(). The only Character class

functions you are allowed to use are: isAlphabetic(), isLetter(), isSpaceChar(), isUpperCase(),

isLowerCase(), toUpperCase(), toLowerCase().

At the end of getText() make sure that you assign originalText (or whatever you called it) to

displayText. This will be what is displayed by default after the user types in their phrase.

Part C

Add a drawText() function that is called from draw(). This function is very short. It should

simply draw the current form of the String to the middle of the canvas. Choose an appropriate

size for your displayed text. Create a global color variable for the current text color. Remember

that color variables are created using a statement like this:

color myCol = color(<redVal>, <greenVal>, <blueVal>);

You can set your colour variable to whatever default colour you want inside of getText(). Use

the global text size and color variables to display the phrase, centered on the canvas.

Part D

Add a void mousePressed() function that checks whether the user has clicked anywhere on the

top button bar. If the user presses on the first button, your getText() function should be called, so

the user can enter a new phrase, which should replace the last phrase they entered. If the user

clicks on any of the other buttons (except the last empty button), the displayText variable you

created in Part A should get one of the other Strings assigned to it, depending on what button

was pressed. For example, if the user clicks on the UPPERCASE button, you should have one

line of code inside mousePressed() that assigns your uppercase version of the user’s text (created

in Part C) to displayText. Hint: to figure out which button was clicked on, you will want to use

integer division. 

ASSIGNMENT 3

DEPARTMENT AND COURSE NUMBER: COMP 1010

4

Q3: HSB Colour Palette [10 marks]

HSB Colour Background

The HSB colour system is often used in computer graphics, and it stands for

Hue/Saturation/Brightness. The hue is the colour shade, following the colours of the light

spectrum you see in a rainbow (ROYGBIV):

The saturation is how vivid the colour is. When saturation is low the colour is very diluted, when

it is high it is very deep:

Brightness is how much light the colour relects. If brightness is low, the colour is much closer to

black:

In Processing, you can switch to using the HSB colors (instead of RGB) by adding the

command: colorMode(HSB); you can then switch back to regular RGB colours by using the

command: colorMode(RGB).

When you use HSB mode, all three parameters range in value from 0-255. The first parameter

represents the hue or colour shade. You don’t need to worry about what numbers match to what

colour, in our palette we are just going to sample shades evenly along the whole range. The

second parameter is the saturation. In our colour palette, there are four versions of each hue, with

differing levels of saturation (the least saturated at the top, the most saturated at the bottom). The

third parameter in HSB colours is the brightness. The higher this is, the lighter the colour. In the

screenshot at the beginning of the assignment, all the colours in the colour palette have a fixed

brightness level of 150.

Part A

Create a function to draw your colour palette (and call this from draw()). Create a global constant

for the number of different colour hues you want to represent in your colour palette. This must be

at least 10. In the version in the screenshot at the top of the assignment, we have chosen to show

20 different colour hues. Inside your palette drawing function, create a loop to draw colour

swatches across the bottom of the screen (don’t worry about the different saturation levels yet,

just get the colour hues showing up). Define constants for the width and height of the swatches.

This will look quite similar to the loop you used to draw the eight buttons across the top of the

screen. You will need a global constant for the brightness level, you can set this at 150 or

something similar. You should also create a global variable for saturation. You can initially set

this at 150 as well. As you loop across the screen, drawing the colour swatches, you will need to

set the fill colour using the brightness and saturation, and calculating a hue based on how far

across your swatch is, so that your swatches evenly sample across the space of hues. For

example, if you have 20 colour swatches, and you are drawing the fifth swatch across, you need

to set the hue to (255/20)*4 = 48 (or 51 if you don’t do integer division). Get this working and

make sure that the colour swatches are showing up across the screen before going on to Part B.

Part B

Add a nested for loop that instead of drawing one colour swatch, draws four colour swatches

from top to bottom, so that there are four variations of each hue, with increasing saturation

levels. 

ASSIGNMENT 3

DEPARTMENT AND COURSE NUMBER: COMP 1010

5

Part C

Add a checkColour() function that is called from the mousePressed() function appropriately

(when should you check for a colour selection?). In the checkColour() function you need to write

code that figures out first, what hue has been selected based on the x coordinate of the mouse and

second, what saturation level has been selected based on the y coordinate of the mouse. Use

these values to change your global textColour variable so that the displayed text shows up

correctly.

Part D

Once you get colour selection working and applying to the displayed text, edit the function that

draws the colour palette. Add a white outline rectangle around the currently selected colour, as

shown in the demo.

Q4: Creative Text Transformation [3 marks]

Add another text transformation of your own choosing. Put a descriptive label for it on the button

bar and edit your script in the appropriate places so that this new text transformation shows up

when the user clicks on that button. This could be some kind of text encryption, or pig latin or

some other text transformation. Be creative. Make sure you explain in your comments what the

transformation does, and give the button a good, descriptive label.

[Programming Standards are worth 5 marks]

Hand In:

Hand in one .pde file, with a comment at the top identifying how much you completed (ie.

“finished through Q3, partially implemented Q4”). The file must run without errors, or you will

lose all of the marks for the test run. If you were working on something and didn’t get it

working, comment out any code that would cause the script to not run.

Make sure your file is named exactly as specified in the instructions at the beginning of the

assignment.

The marker will run your programs. The marker will enter a variety of phrases (but won’t violate

the simplifying assumptions mentioned in Question 2B). Your program should scale

appropriately if the grader adjusts the width and height of the canvas.

For all questions, the marker will be looking at your coding style. Make sure you are following

the coding style and documentation guidelines. 

ASSIGNMENT 3

DEPARTMENT AND COURSE NUMBER: COMP 1010

6

Screenshots to show expected behaviour:

ASSIGNMENT 3

DEPARTMENT AND COURSE NUMBER: COMP 1010

7

 

Attachments:

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of