week01 02: interaction basics - UX-UI-Design-Lab/DesignAesthetics3 GitHub Wiki

agenda:

  1. colors
  2. group/peer activity: Bauhaus
  3. discussion & review of drawing by code
  4. demo: make changes when mouse pressed (if, mouse interaction)
  5. Q&A, troubleshooting

color in brief (p5)

If you feel comfortable with grayscale, you may want to try some colors. In p5, you will use RGB (red-green-blue) mode by default unless you change it to the others (HSB: Hue, Saturation, Brightness or HSL: Hue, saturation, lightness).

https://p5js.org/reference/#/p5/colorMode

In RGB mode (default), you will put three numbers how much you want to turn on red, green, blue lamps on the screen per each pixel. 255 means fully on (brightest) and 0 means off (no light). If you put all 255, which means you will turn all the lamps on in the full intensity, the brightest color with three primary colors will turn white. On the other hand, if you put all 0, you will turn off all the lamps, and the pixel will show no light = black. Each number can be re-coded as hexadecimal (2 power of 8 = 2 power of 4 * 2 power of 4). So, 255 RGB can be expressed hex code, which is normally marked with # (#000000 for black, #FFFFFF for white - F means number 15).

You can add one more value (4th number) to adjust the transparency (opacity) alpha, 0 - 255. For example, in RGBA mode fill(255, 0, 0, 128) will use 50% semi-transparent red.

Color code (web)

  1. In google chrome, search "color picker"
  2. or visit https://www.w3schools.com/colors/colors_picker.asp?color=%23ffab00

RBG code means how much light you will turn on for Red/Blue/Green -- because the LCD display most likely you have in front of you (of your computer) has a grid of LED lamps (each LED has three lights in it).

image credit from B.W. Jones' blog

Each color can use 8bit of memory space (2 power of 8 = 256, so if you count from 0, it will get to 255 as the max). RGB(255, 255, 255) means you will turn on all the lamps on. But... honestly RGB is not very intuitive to describe the color -- do you know how to make yellow by RGB code?

The Hex Code means hexadecimal (0-15, 0, 1, 2, ..., 9, a, b, c, d, e, f = 16 digit system) code. So, simple put, FF means turn the light fully on. 00 means turn off the light. Do it for three lamps RGB, first two for Red, next two for Green, and the third for Blue. #FFFFFF means all three lamps are fully on (so white) -- #000000 means all off (so blue).

These are quite developer/engineer's code -- they didn't seem to mind how the color would look in human eyes, but only care about how much light turn on and off according to the program.

(oh, CMYK is another code for the printing technician, it gives the printer the information how much ink they need to spray -- Cyan Magenta Yellow and blacK >> we are not interested in this -- but just keep in mind that the color you see on the screen and the color you printed out can be quite different.)

So.. people try to convert the color code more understandable way -- by the color theory. We see colors by three dimensions, Hue, Saturation, and Lightness == HSL, which is quite intuitive.

HSV stands for Hue-Saturation-Value. The original color has Value 1 (or 100%) and value 0 is for black. (while in HSL, Lightness 0 shows white, 50% shows the original color, and 0 is for black)

I prefer HSL system, because I can manipulate saturation and lightness independently -- but Adobe system uses HSV. The difference between HSL and HSV is explained well here with a detailed converting formula.

Let's try the converter from google chrome. You can pick any color you want on the color space. You can see the spectrum of hue (or flatten ring/ wheel of hue) and the point your choice of hue is.

Color picker in Chrome

When you move the hue slide thumb to red (left end), you can see hue number as 0. It is easy to remember if you recall that the third color people can tell other than white and black was "red" across the culture. Red should be a good point to be the origin of the hue wheel.

color wheel

12 O'clock of the wheel is 0, Red. It is 360 deg system, so if you have three primary colors (red, green, blue), you can guess 120 degree for each color -- 120 for green, 240 for blue. Then, you can guess easily from 0 to 120, the hue will turn from red, orange, yellow(60), yellow_green, and Green (120). From Green(120), the hue will turn to cyan(180, the complementary of Red), to blue (240). Again, from blue(240) to purple and hot_pink(330), and turn to red (360 or 0). Once you remember this direction of hue changes, it is easier to guess the number for the hue you want to use.

If you move the color-eye in the plane upward(Y-axis), it will get brighter (lightness). If you move the color-eye in the X-axis (horizontal), it will get more or less color intensity (high-saturated when the color-eye moves rightward).

If you use W3School color picker, use the HTML5 color picker (and change the color code into HSL) -- (screen shot will be here)

This is how you can get the code for the color.

extract the color

You can use https://color.adobe.com/create/image to find the color in use. (of course, photoshop too!)

activity: Bauhaus

We will start our day with group activity. You will be paired up with a classmate and work on a simple code-challenge to draw one of bauhaus works. The examples of bauhaus work will be provided to help you start.

You will start with a sketch by hand to analyze the shapes and their detailed information necessary for the coding. One or both of you will write the code. At the end of activity, you will submit the work on canvas > discussion and share what you made and learned.

  • what was an interesting thing you learned from this collaborative work?
  • what was the most challenging part (in collaborative process or in coding)?

As far as time permits, we will listen from you about your work and process (less than 5min per team).

Demo: mouse interaction

Let's make some changes. I would like to change color, inverted. (like Dark Mode)

  1. I will use comment (//) to explain what I want to do. // when mouse is not pressed, show the black box
  2. add comment for the change // when mouse is pressed, show the white box
  3. I will copy and paste the original set of the code. and change the rectangle as white and the background as black
  4. then, to make the pasted (white box) code only activated IF the mouse is pressed. if(mouseIsPressed)

As you remember, p5 is using javascript - and javascript code is case-sensitive. In short, hey is not same as Hey. Also, javascript doesn't like - for naming. So, compound-word like font-size in css property is not welcomed. But a good news is, there is a conversion rule when you want to use a compound-word font-size, you will make the first letter of the second word as upper case fontSize (this is what people call camelcase).

You can guess now, mouseIsPressed is something from "mouse is pressed". p5 have a variable named mouseIsPressed and this is used to report whether the mouse button is currently pressed or not. It can have only two status, yes or no (or pressed vs. not-pressed), so people call this only two status of true/false as boolean.

https://p5js.org/reference/#/p5/mouseIsPressed

The boolean system variable mouseIsPressed is true if the mouse is pressed and false if not.

There are several "system variable" that p5 helps you to get some information what happens around browser. An easy way to guess those system variable is to check the word listed are without (). The one with () is function - which will be replaced with some codes (or set of operations); while a variable will be replaced with a value (ex. number).

NOTE: there are some others, like some keywords listed under foundation (ex. let, for, while) are NOT variables.

Let's see: https://p5js.org/reference/

What kind of system variable can you see? Feel free to navigate them.

So, it's my turn to ask you - what do you think variable is? (any good metaphor? This is a little prep for next week.)

Further, the original javascript event this variable mouseIsPressed is mousedown event (the window reports whether your mouse button is down or not). https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event

The other mouse events include click, doubleclick, pressed, released - https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent - and p5 has corresponding functions: mousePressed(), mouseReleased(), mouseClicked(), doubleClicked() -- we will work further on those later.

IF-statement and logical expressions

IF-statement, in computational logic, is like flipping. IF statement can decide either yes/true or no/false. You will enter the condition, either statement or variable, and will get the answer yes/true or no/false. In the case the condition is false, you will jump to the next block of code; In the case the case is true, you will jump INTO if-operation the code inside of { ... }

   if(condition) {
        operation to be done when the condition is satisfying/true;   
   }
   next line of code;

what we wrote if(mouseIsPressed) can be processed either if(true) when the mouse is pressed or if(false) when the mouse is not pressed.

console.log()

To check what is going on with the variable, you can (secretly) communicate with the browser via console (at the bottom).

Let's test. Let it say hi, if it can hear me. You will use quotation mark to dictate what you say.

  console.log("hi!");

if you are not using the quotation mark, the word will be understood as a variable.

  console.log(hi);

(and this case, we haven't done anything for variable hi, so it can produce an error)

We know one system variable (which means ready-to-use by system info):

  console.log(mouseIsPressed);

when you press the mouse, the console should show you something. What do you see in the console?

Can you draw another shape other than the rectangle, such as a triangle (or triangles), when the mouse is pressed by using if(mouseIsPressed)?