CSCI E-3 Unit 2 Project: Part A

This is worth half of the total point value for the Unit 2 Project. This is worth half of the total point value for the Unit 2 Project. There will be a Unit 2 Project: Part B as well, released in two weeks. The course material needed to solve these problems is covered in weeks 1-4 of the course. Some of these solutions will require that you use concepts you've learned in new ways, or look up and use new properties and methods of standard Javascript objects, such as String or Math. If the conceptual leap from the basics you've learned so far to the problems here seems large, be sure to attend section meetings, ask questions in Piazza, and re-read/re-watch the course material if necessary!

What you're learning:

How to handle the most basic information in a computer program: numbers and strings, arrays, and conditionals.

1. Math: Basic mathematical calculations underlie nearly everything that you'll do with a computer program: counting photos to layout on a page, calculating prices in a shopping cart, positioning a ball on a game screen, or figuring the length of the bar on a graph.
   
2. String Handling: manipulating text
3. Arrays
4. Conditionals, looping, and functions are some of the most basic structures in computer programming. These also underlie just about everything you'll do in a program. 

What you need to do:

1. Follow the example to create your own mathematical converter (5 points)
2. Place an X in an automatically-chosen random location within a box (5 points)
3. Use indexOf() and substr() or slice() to divide your name into two strings—firstname and lastname (10 points)
4. Provide a feature in this page that counts the words input into the input box below (15 points)
5. Write a function that will calculate the sum of the first 12 even Fibonacci numbers (20 points)
6. Image processing (array handling)—(20 points)

1) Create a mathematical converter for temperature

In the zip file you downloaded for this project, open js/hw2ConvertTemp.js. It contains a function called convertFtoC() and one called convertCtoF(), which, at the moment, do nothing. You're going to edit this file to provide the code that makes these functions work to convert Fahrenheit to Celsius, and vice versa.  You can test your code with the form fields below—your conversion code will run whenever you change the content of the input fields.

If the user types in values that are not numbers, do nothing.

Remember that the formula for converting temperature looks like this:

C x 9/5 + 32 = F

(F - 32) x 5/9 = C

  C is equal to F
  F is equal to C

2) Place an X in an automatically-chosen random location within a box

This is an exercise in using Javascript's random number generator, along with some simple arithmetic, to place an X in a box in a randomly chosen location. Applications of this would include placing a game character on the game board, or setting stars or snowflakes in a graphic.

Ultimately, your task is to calculate a random x and y coordinate for the location of the 'X'.  You'll have to do some math to get the random number, generated by a function which returns a floating-point number between 0 and 1, to map to the width and height of the containing DIV. js/hw2PutAnX.js contains an empty function where you will add your code.

 

3. Use indexOf() and substr() or substring() to divide your name into two strings—firstname and lastname

We're going to use some basic built-in string functions to manipulate a string: your name. Modify the code in the js/hw2SplitString.js file to output the first and last name separately into the page below. Your code should work for any name entered. See the JS file for more on what input validation is expected.

is my full name.

is my first name
is my last name

4. Write a function that will calculate the sum of the first 12 even Fibonacci numbers

Recall that the Fibonacci sequence is a series that begins with two integers: 0, 1. The next number in the sequence is derived by adding the previous two numbers, so the Fibonacci sequence looks like this: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ... 

The button below will run your function, called twelveEvenFibonacciSum() and print its result in the space provided. All you have to do is write the function, which accepts no arguments, and returns the sum of the first 12 even Fibonacci numbers. Your code will go in js/hw2TwelveEvenFib.js 

Hint: First you'll need a loop that generates Fibonacci numbers. You'll need a way to test each one for whether it's even or odd. And you'll need to sum up the even ones, counting them as you go. Count zero as the first even number in the sequence.

The sum of the first 12 even Fibonacci numbers is:

5. Provide a feature in this page that counts the words input into the input box below

The box below accepts text input from the keyboard or copy/paste.  Your job is to add a feature to this page that provides an approximate word count for the user who's typing into the page. 

To do this successfully, you'll need to:

• Create your own Javascript file in the js directory of this project. Call it whatever you want.
•  Add a <script> tag to the page at the bottom that loads your new js file.
• In your JS file:
• Use document.getElementById() to get the textarea element from the page. You'll need its ID, which you can find in the HTML of this page.
• Write an event handler function that runs every time someone types in the textarea. It will look something like this:
  myTextareaElement.onkeyup = function(){
      // your code goes here
  }
  
• You'll want to access the .value property of the textarea to get the contents of the box as a String
• Use String.split() to divide the string (at word boundaries) into an array of Strings
• Count the elements in the array. This will be (roughly) the number of words in the box
• Write that value into the HTML element that looks like this: <span id="wordcount"></span>
• You may notice that this solution as outlined above will not count words correctly if there are extra 'whitespace' characters in your text.  For this assignment, that's OK. However, if you like, for extra credit (10 points) design your solution so that extra consecutive whitespaces are not counted.

The wordcount is:

6. Image processing (array handling)

The image below (labeled "Original") appears inside an HTML canvas element.  We'll learn more about canvas elements later in the course. For now, the important thing to know is that, unlike an image displayed normally in the browser using the IMG tag, the image data that appears in a canvas element is available to Javascript as a "bitmap".

The bitmap data is an Array that maps four numbers to each pixel in the image: r, g, b, a, where r, g, b are integer values from 0 to 255 which describe red, green, and blue respectively; and a, which is an 'alpha' value between 0 and 255 in which 0 is transparent and 255 is completely opaque. Since there are four array elements for each pixel, the total array will contain 4 times as many elements as there are pixels in the image.

The first pixel's red data is at data[0], the second pixel's red data at data[4], etc.

Your job is to write additional code inside the function that will modify the image data to create four new versions, as described below and in the js/hw2ArrayImageProcessing.js file. 

Remember, this problem is, at its essence, about arrays and looping and counting, not about fancy graphics-processing mathematics. The key is to traverse the data array, copying and modifying the appropriate values as you go. Along the way, you'll be learning that looping and counting can sometimes be all it takes to do "fancy graphics-processing mathematics"!

Here's a diagram that may help. This is a nine-pixel approximation of the French flag, as a bitmap. There are nine pixels, each with four array elements to describe their appearance, for 36 data elements in all. So, for example, to change the color of the top-right pixel to blue, you'd change imgArr[8] to zero and imgArr[10] to 255.

In this case, you won't actually change the values in the original image array itself, but rather you'll copy the values over to a new array, and make the changes there. The comments in the js/hw2ArrayImageProcessing.js file should point you in the right direction.

Important Note: To do this exercise using your local file system (with no Web server involved), you will need to use Firefox as your browser. Chrome will display an error due to security constraints.

Original	BLUE-only version	Reverse-color version	semi-transparent version	add two images version

If you've done this correctly, the table above will look something like this screengrab: