Project Fish Tank

possible xp: 165

Practicing using global variables and writing functions.  If you need any hints let us know!

Standard Khan Project Fish Tank: 35xp

 

Special ProcessingJS functions remix – 15xp

In the Khan course section Special ProcessingJS functions we saw this bit of code:

mouseMoved = function() {
   fill(mouseX, mouseY, mouseY);
   ellipse(mouseX, mouseY, 10, 10);
};

Can you alter the code to match the following video. Note that there are two changes. First, I changed the color scheme. in the original we couldn’t see circles drawn on the lower right of the canvas. Second, I display a counter which shows how many circles I have drawn (I also show my r,g,b values to help you figure out the color problem). Note: when I record the video, unfortunately I get a single dot at the start, I then hit ‘reset’ (you’ll see the circle counter reset to 0). That is where you should start.

Mouse Targets -15xp

mouseClicked is another special ProcessingJS function. As the name suggests the function executes whenever the mouse button is clicked. Here is an example:

mmouseClicked = function() {
    target(mouseX, mouseY);
    playSound(getSound("rpg/water-bubble"));
};

(note: if you click on rpg/water-bubble you will get a sound picker that will let you change the sound)
Anyway, in this case, when the mouse button is clicked we call the target function. Can you write this function and the extra bit that displays lines?

 

Mouse Stars – 15xp

Here is another example of mouseClicked:

mouseClicked = function(){
    star(mouseX, mouseY);
};

In this case, when the mouse button is clicked we call the star function. Can you write this star function which draws lines to create a star at the location of the mouse? The color of the star should also be based on the position of the mouse.

The Keyboard

There are also special ProcessingJS functions that read a keyboard such as keyPressed. Here is an example:

var keyPressed = function() {
    background(255, 255, 255);
    textSize(40);
    fill(255, 0, 0);
    // Display current key
    var theLetter = key.toString();
    text(theLetter, 100, 100);
};

When you press a key on your keyboard it produces a numeric code. For example, when you press the ‘a’ key, it gives the Javascript function a 97. key.toString() converts that code to a string.  Here is an example of this working:

Regular edition  – 15xp

Can you write code that instead of a letter will type out the message the person is typing?  (don’t worry about glitches with capital letters). For example, if I type ‘h’, followed by ‘e’, ‘l’, ‘l’, ‘o’, ‘,’, ‘ ‘ … It should display “Hello”:

or Hacker edition – 25xp

Text is displayed wherever I click the mouse:

 

For Fun: Yin Yang –  20xp

Can you draw the Yin Yang symbol?

 

Hints: start with noStroke();

 

mouse yin yang – 10xp

draw small yin yangs at the mouse position when the mouse button is clicked (yin yang drawing should be in a function).