Recitation 2

Recitation 2 Interactive Drawing

I followed each instruction and did my project, the following are my code and work, please check each link to experience the interaction with the code as I think it’s hard to demonstrate through a video

1.Draw a line when mouse pressed

https://editor.p5js.org/zzrrqqq/sketches/aRloHZB3g

2.Add interaction to color and stroke weight

https://editor.p5js.org/zzrrqqq/sketches/JBEV_8X5j

3.One can use keys to adjust the color and stroke weight(“r”,”g”,”b” to adjust the color, “w”to make the stroke wider and “s” to make it thinner)

https://editor.p5js.org/zzrrqqq/sketches/aqOzKVN2f

4.Change stroke Weight according to the speed

https://editor.p5js.org/zzrrqqq/sketches/EJV63NT_5

5. An interesting interactive drawing connecting color, length of stroke and speed of moving the mouse

https://editor.p5js.org/zzrrqqq/sketches/3pogl6hJV

I do encounter some difficulties during the coding, one of them is that when I first completed the code by simply saying: when “r” is pressed, r=r+10, the actual number of the variable “r” is out of control as every time I pressed the key, it is not actually seen as pressed once. With the experience of last semester, I added another boolean called “prevkey” to save the key status and solved the problem. The following is a period of my revised code.

let r, g, b;
let s;
let prevkey=false;

function setup() {
  createCanvas(400, 400);
  background(220);

  r = 0;
  g = 0;
  b = 0;
  s = 1;
}

function draw() {
  if (keyIsPressed && prevkey==false) {
    if (key == "r") {
      if(r<255){
        r = r+10
      }else{
        r=0
      }
    } else if (key == "g") {
      if(g<255){
        g = g+10
      }else{
        g=0
      }
    } else if (key == "b") {
      if(b<255){
        b = b+10
      }else{
        b=0
      }
    } else if (key == "w"){
      s=s+1;
    } else if (key == "s"){
      s=s-1;
    }
    
    prevkey=true;
    }
  if(keyIsPressed==false){
    prevkey=false;
  }
 

Reflection:

1.In my project, I basically used variables to add interaction to it, by only using the simple functions in the program, a lot of effects I wanted were unachievable, for example, getting a number through a certain way, saving it, and using it when I need it. So I would say the main usage of a variable is saving, it is used to save a number or a status one got and can be acquired anytime when needed, also it can be changed by will, then, a lot of effects are achievable through computer drawing. In my project, variables are used to save the changing numbers determining the color and the weight of the stroke, they can be changed and used anytime.

2.In my third  code, I used several conditions, they are used to change the value of the variables. For example, for the variable “r” indicating the amount of red in the stroke color, I used the condition “if the key ‘red’ is pressed once”, which is “if keyIsPressed && prevkey==False” together with, if “key==”r”” the first one to test whether there is a key being hit and be sure it’s hit once, the second one to ensure whether it is the key “r”, under that circumstance, the program can be pretty sure when to and how to change the value of the variable.

3.keyCodes are special keys or non-ASCII keys including arrows, enter, shift, etc. while keys are for ASCII keys