2017-11-21 LAB/HW

posted Nov 21, 2017, 6:22 AM by Konstantinovich Samuel   [ updated Nov 22, 2017, 6:49 AM ]
Before you work on your image lab, the basic lab from yesterday should be working. If you cannot do that, trying the next lab would be crushingly difficult. 

If you want to start on the image lab, have yesterday's lab open to show me. 

Image Lab -> 
3 lab days in class [Wed/Mon/Tues] 
+ extra time today if you finish yesterday's lab.
(minus 10 minute per day for presentations)
Due Wednesday (After thanksgiving) Morning. Do not wait! Dojo is open Today, Monday, Tuesday.

You need to work on this at home as well help each other on the mailing list.

Read the ENTIRE (Part I) assignment. Answer all questions for the section you are on  your notes before writing any code.  Make a NEW page "Image Lab Notes" in your notes, to answer these questions and write down any notes for this lab. Do not worry about wasting paper.

Part I

1. Setup and reset buttons
(Patches need to own : original-color )
-Setup will load from an image, and store pcolors into the original-color variable.
-Reset will copy the original-color back into the pcolor so you don't have to re-load from the file. 

QUESTION1: Why do we want these two buttons?
QUESTION2: When would you want to use the setup button more than once in this model?

2. Allow your user to choose the image to work on with a selector.
chooser:  image-name
populated with your images such as:

3. To choose which operation is used when you click go, make a chooser:  mode  

4. go is an observer context button that will run one of the image processing commands. 

to go
  if mode = "grayscale"
  [ grayscale]
  if mode = "blur"
  [ blur ]

QUESTION3: What context should the image filter functions be?

5. You already wrote grayscale, but may need to modify it to be the correct context.

6. Blur:  We want to mix the pixels brightness with their neighboring patches.

   first grayscale the image
   set your next-color to:
      60% of your own color + 40% of the average of all of your neighbor's colors.

    QUESTION4: What would happen if you average colors that are not grayscale? e.g. red and green

    Second: make a slider blur-percent 
    Now adjust your blur such that that : 
    each patch sets their next color to:
        blur-percent % of the average of your neighbor's colors
        + (100 - blur percent)% of your own color 

7. Edge Detect:  
    Make a slider from 0 to 1 called edge-threshold. Increments should be 0.01

    first grayscale the image.
   calculate a sum of two color differences:    
        east-west difference  
        north-south difference
   The sum of the absolute value of these differences will be the "edginess" of the patch. (for lack of a better name) The greater the difference, the more of an edge it is!

    QUESTION5: What is the maximum value of this "edginess" calculation?

   We should normalize this calculation by dividing by some number such that it always resulted in a number between 0 and 1. 
    QUESTION6: What number should you divide by?
    Now you can write the final part:
  ifelse the normalized-calculation > edge-threshold
   [set your next-color to black]
   [set your next color to white]

8. Easy cool effects:  (works on grayscale images, but since you stored the original color you can still use the color!)
Edge detection can be modified (make a copy of the function and modify it)
ColoredEdges - Instead of making the edges black: Make the edges the original color.
CartoonEffect - Instead of making the non-edges white: Make the non-edges the original color.   
GrayEdges - Make the edges color depend on the edginess calculation, so some edges are brighter than others. 

9. EXTRA!!!
-Make an image red/blue/green-scale instead of grayscale. This is easy to figure out. Make a color picker to choose which base color to use.

10. EXTRA!!!
-Make an image darker/brighter by shifting all the ones digits closer to 0 or 9.9 by some %. (10% closer works well, do not just add a number!)


Part II

Write a function 
to-report primaryColor [c]

c is any valid color.
It returns the same color but replaces the last digit with a 5. 

primaryColor 11   returns 15

primaryColor 29   returns 25

primaryColor 55   returns 55

This makes it so if someone selects a color 11 (dark red) instead of 15 (red) you can 
easily calculate the beginning and ending bounds of the color.

Color replacement:

11. Make two input widgets, and make them type: Color.

When you run color replacement you take all colors that are in the same 'color row' as the start color, and shift them to the end-color 'color row'. 

If start color is red(15), and end color is yellow(45), all values from 10-19.99 get replaced with values from 40-49.99. Note: The values should just shift up 30, so that they are the same brightness.
11 -> 41
19 -> 49

If start color is dark red(12), and end color is bright yellow(48),the same thing happens. You can use the primary-color function to help you make this part work.