week03 01 random - UX-UI-Design-Lab/DesignAesthetics3 GitHub Wiki

agenda:

random by definition
function by definition
randomize color, position, and size
adding noise
activity: how to write pseudo-algorithm
assignment03

random by definition

If something looks random, it means very hard to predict. (so if you plot random data, there should not any visual pattern, such as regression line, to be shown. It is one of the powerful (handy) tools you can take advantage of computational systems -- the old solutions before computation system include rolling a dice, flipping a coin, ... (any other methods can you think of when you need to pick a random choice?) -- but also hard to prove that the choice would be totally random. (so there are many stories how you cheat in gambling)

random function can be found almost every programming language. You just need to check the range of the random number is produced (or how to change/control the range of the random number to be generated). In javascript and p5, random() returns a random number between 0 to 1 (0 is included but 1 is not included, 0 <= random() < 1). floating number. (cf. integer, without any numbers after the decimal point)

https://www.w3schools.com/js/js_numbers.asp

If you call just random(), it will bring you with the number from 0 less than 1 -- this means the numbers start with 0.xxxx .... (with long sequence of digits after the decimal points).

Check this:

let r;
r = random();
console.log(r);

for example, I got these numbers in console:

 0.40407804799113434
 0.7225154900603104
 0.31846825008226953
 0.17809251195909304
 0.6967399601553774
 0.36629763169326024
 0.7761435412286133
 0.31945057990760684
 0.3751716537217906
 ...

(as we know, draw() will run about 30times per sec - that means we will have 30 random numbers every second)

The numbers really look random!

You can make these numbers into 0 ~ 100 (less than 100) by multiplying 100. Then, the first number will be 40.4078...

p5 offers some convenient features, you can set the range of the random numbers. random(min, max). So, if you want random number between 100 to 200, you can write random(100, 200);

You may find that the number still have a long tail (the numbers after the decimal numbers) and may wonder how to cut them out (so make it integer). You can use int() and whatever you put inside () will concerted as an integer number.

(In javascript, you can use ceil() -- for rounding up, and this works in p5 editor too)

 int(random()); // will return 0, because dropping all after the decimal point
 ceil(random()); // will return 1, because ceiling up

To set the range of the random numbers, you can put two numbers for min - max.

 r = random(0, 100); // a random number between 0 to less than 100 will be assigned to the variable r.

write a number (text)

What if I want to use the number to show up in the preview?

You can use text("something", x-position-baseline, y-position-baseline);

 text("hi", 0, 0); // won't show up because the text is shown up 0, 0 as the baseline.

(well, here is what baseline means in typography just in case you are not familiar with)

anatomy of typeface

from https://material.io/design/typography/understanding-typography.html#type-properties

To show the position of the baseline and the text position, I will draw the line and use the sameY for text position. -- you will see the text sits on the line.

 text(3, 0, height/2); // will show 3

or you can try with a variable

 let r;
 r = random(0, 100);
 text(r, 0, height/2); // will show the random number (but it will be refreshed by another number at the rate of 30frames/sec)

If you want change the size of the text, use textSize();

 let r;
 r = random(0, 100);
 textSize(r); // random textSize
 text(r, 0, height/2);

noLoop()

The random changes (in animation frames) look awesome, but I want to stop the draw() playing the frames.

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

noLoop() is the function you can use to pause the frame (animation). It is good to put noLoop at the end of the function after every code is executed.

function by definition (optional, may move this part to week04/05)

Now, we start using lots of functions -- so let's see the basic syntax of the function.

It has a name (function name) following by (). This "()" is like conceptually a bag containing lots of variables to work with. The number of parameters (= variables) is defined when you first declare the function -- which we may try next week. In this week, we will use the functions that someone else already created. The best way to learn what the specific function is, again, to lookup the reference. Everything with () is function.

When a function is called what happens behind scene is to roll out the set of instruction or lines of code. In that process, the variables, passed from the (function) caller, are applied by the value into the codes. It may return something or may not (in that no return value situation, it only signals to the caller by a value (usually true or false) as the end of the execution whether the execution was successful or not)

randomize color, position, and size

Let's use random numbers to place the shape/drawing at the random position!

 // declare a variable to catch what random() function will return
 let r;
 // catch what random() function returns, assign the value to the variable r
 r = random(1, width); // random number from 1 to less than width
 // if you don't capture the value by this assign =, you cannot use that random value created.

 // use the variable where you want
 circle(r, height/2, 100); // place the circle on the line of height/2 by a diameter = 100

Here, you can see the circle moves around as frames run (if you don't use noLoop(); yet).

Try to comment out background(); and see what happens. The secret function of the background() is to clean up the canvas to show the next frame without any trace from the previous frame. This means, if you don't use background(), there is no one to clean up and everything will stay (and overlay).

Try noFill(); and see what happens. The circle will be shown as wireframe or the outline only. So without cleaning up by background, it can generate an interesting overlays (or messy drawing).

Then, try noLoop(); and click play button several times and see how the circle is located at the random position.

Can you randomize the circle size as well? (hint: diameter = r)

color, HSL

To randomize color, I will use HSL color mode -- because it is much easier for me to predict the color by HUE value and easier to manipulate the lightness and saturation by value (comparing to RGB mode).

understanding color (recap) and HSL mode

So far we played RBG mode for the colors. Let's recap how color on the screen works.

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 in a 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).

Based on this understanding you can pick the colors you want more intuitively.

For example, in HSL, if you want to pick any random color of green, you can try the range of hue from 70 - 170.

  colorMode(HSL, 360, 100, 100, 1); 
  // you need this once, I set the range of HUE as 360, saturation and brightness as 100%, opacity 1 as maximum
  
  let randomGreen;
  randomGreen = random(70, 170); // different greens
  fill(randomGreen, 50, 50, 1);  // use green for the hue, set saturation and lightness as 50%, opacity 1)

You can keep the same color but have different shades of the the hue.

  colorMode(HSL, 360, 100, 100, 1); 

  let randomS, randomL; // randomize Saturation and Lightness
  randomS = random(0, 100); // pick random saturation level
  randomL = random(0, 100); // pick random saturation level
  fill(0, randomS, randomL, 1); // HUE:0 Red in different saturation and lightness

adding noise

The value created by random() are very discrete -- so when you apply the value for the visuals, it looks very jumpy. noise(), however, generates a sequence of random number that can smooth out the interval between the random numbers. If you apply noise(), the line may look jiggly but not so jumpy.

Here you can see the difference: https://p5js.org/reference/#/p5/noise

activity: how to write pseudo-algorithm

From now on, drawing is not coordinate specific but rule based. (= generative) For that reason, it is good to practice how to write the rule (or algorithm). Simply speaking, you will write the step by step instruction how you want to make a certain work done. We will just use the human-language (in English) to write the rule, maybe close to the form algorithm or maybe not -- so I call it as pseudo-. We will practice it as this weekly activity.

assignment03

You are asked to generate an invitation design.