Week3

Group Project

Initial conversation

Thought Starters

What interface do we want to make?

• Color picker?

• Slider to change the location of shape, and button to change color?

• Puzzle Idea (push button: bright/ dark) slider 

What controllers do we need to make?

• Sliders?

• Buttons?

• Rollover?

 How should we work?

• Discuss in the group, but code your work?

• Discuss and code together?

• Discuss in the group, each person does different parts, then combine?

 Who is in charge of what parts?

Timeline?

Theme: Prevent global warming controllers

• reduce the water, close the water tab (knob/ rollover)

• Switch off the room (push button)

• make AC temp higher - in the wintertime or keep it between _ and _ temperature (slider)

1. have text above, “what can we do to prevent global warming at home?”

2. have three icons or image representing each water knob/ switch/ ac temp controller(slide)

3. user has to adjust or control all three of them

4. if they are all done, change the text above to “you are one step closer to save the earth!”

Sketching

Coding

Pseudocode

//let sliding
//let rotating
//let rotation

function setup() {
  createCanvas(700, 500);
}

function draw() {
  background(220);
  
  //Temperature slider
  //presenting guidelines" Drag the slider to set up a temperature"
  //long line/rect as the entire slider
  //two dots indicating the prefered temperature 
  //and their numbers (23? 27?)
  
  //if sliding is true
    //slider button x position equals mouseX
  
  //draw ellipse with x position 
  
  
  //_______________________________
  
  //Water Tap
  //draw ellipse background 
  
  //push
  //change translate
  //draw a rotating button
  // if rotating is true
    // rotation -20?
  //pop
  
  //______________________________
  
  //Light switch
  //draw a rect background
  
  //if switching is true
  //change the switch button x to xxx.
  //else switch button x position equals xxx
  
  //draw a switch button
  
  //_______________________________
  
  //Check yourself rollover
    // draw a rollover button 
    //Temp check
    //if x position of the slider button is larger than 23? and smaller than 27?
      //boolean temp check equals true.
    //if rotation is less xxx
      //boolean waterchecks equals true
    //if switch x position is xxx 
      //boolean light check equals true
  
  //if the mouse if over the button
  //change the button color to xxx
  //else change the button color to xxx
  
  //if all three booleans are true and mouse is over the button
    //change background to xxx
  //else change background to xxx
    
}


//mousePressed function
  //if mouse is on the slider button
    //sliding equals true

  //if mouse is on the rotating button
    // rotating equals true

  //if mouse is on the switch button
    //switching equals true

//mouseReleased function
    //sliding equals false
    // rotating equals false
    //switching equals false

Separating tasks

There are three main parts to the interface: a slider, a nob, and a switch. We decided to code the nob together, as it involves rotation, so relatively more complicated. I (Michael) was in charge of the slider. Jung was coding the switch.

Final Result

Reflection

Working together has pros in the aspect that 

• Faster problem solving

• Faster debugging

• Efficient coding, which allowed us to code in easier way then going other way around

• Write legible and understandable code, where not only the writer has to understand but also the reader has to understand clearly

Things we have learned

• rotation- when rotating, change the origin using “translate”- ellipse(0,0,x); does not seems to work because the ellipse is rotating in the center of origin

• text- text(‘’, x-cordi, y-cordi, width-box, height-box)- textAlign(CENTER, CENTER);

• using dist vs if(mouseX>value && mouseX<value && mouseY>value && mouseY<value) - for the ellipse, use dist- for the rect, use if(mouseX>value && mouseX<value && mouseY>value && mouseY<value)

Things we want to explore or answer questions on

• when coding the “water tap” the initial goal was to make ellipse rotate according to mouse position

• can mouseOver substitute if(mouseX>value && mouseX<value && mouseY>value && mouseY<value ?

Worksheet problems

Question 2

Change the behavior so that when you mouse over a column, you turn it red and it stays red until the next time you mouse over it again, at which point the column goes back to white. (Just get this working for one column.)

Here is my first attempt

let visited = false;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(255);
  noStroke();

  if (mouseX < width / 3) {
    fill('Red');
    rect(0, 0, width / 3, height);
  } else if (mouseX > width / 3 && mouseX < width * 2 / 3) {
    fill('Red');
    rect(width / 3, 0, width / 3, height);
  } else if (mouseX > width * 2 / 3) {
    fill('red');
    rect(width * 2 / 3, 0, width / 3, height);
    visited = !visited;
  }

  if (visited) {
    fill('red');
    rect(width * 2 / 3, 0, width / 3, height);
  }
  console.log(visited);

}

The idea is to have a Boolean variable called visited. If the designated area is visited, then visited equals to true. When visited is true, draw a red rectangle on that spot. When the same site is visited again, visited will equal to false. When visited is false, no red rectangle will be drawn.  However, since it’s in the draw () function, the value of visited is continuously switching between true and false. 

I was thinking of finding a way to decide drawing the red rectangle instead of coloring the rectangle with the background color. But I could not figure out the last bit of my original code. 

So, I switched to another idea. I created a Boolean variable to indicate what color the middle rectangle (the designated area) should be. If the mouse is coming from other areas, indicated by on2, then reverse Boolean variable state’s value. 

Here is my second attempt

let on2 = false;
let state = false;
let color2;

function setup() {
  createCanvas(600, 400);
  color2 = color(255);
}

function draw() {
  background(255);
  noStroke();

  fill(color2);
  rect(width / 3, 0, width / 3, height);

  if (mouseX > width / 3 && mouseX < width * 2 / 3 && !on2) {
    state = !state;
  }


  if (mouseX < width / 3) {
    fill('Red');
    rect(0, 0, width / 3, height);
    on2 = false;
  } else if (mouseX > width / 3 && mouseX < width * 2 / 3) {
    on2 = true;
  } else if (mouseX > width * 2 / 3) {
    fill('red');
    rect(width * 2 / 3, 0, width / 3, height);
    on2 = false;
  }



  if (state) {
    color2 = color('red');
  } else {
    color2 = color(255);
  }

}

Question 3

Making a slider

The overall idea is simple, to have a circle moving with the mouse on a line. And the circle only moves when the mouse is on the circle and pressed. 

So here is my first attempt

let paddings;
let x;
let y;
let d;
let sliding = false;

function setup() {
  createCanvas(400, 400);
  paddings = 50;
  x = paddings;
  y = height/2
  d = 20;
}

function draw() {
  background(220);
  strokeWeight(3);
  line(paddings, y, width - paddings, y)
  fill(0);

   if (mouseIsPressed && dist(mouseX, mouseY, x, y) < (d/2)) {
    sliding = true;
  }else{
    sliding = false;
  }


  if (sliding) {
    x = constrain(mouseX, paddings, (width - paddings));
  }
  
  ellipse(x, width / 2, d);
}

I soon realized a huge problem; the circle only moves when my mouse is moving slow. If I move too fast, and the mouse moved out of the circle, it won’t be able to “catch up.”

Here is my second attempt

let paddings;
let x;
let y;
let d;
let sliding = false;
let rotateAngle;
let scaleSize;

function setup() {
  createCanvas(400, 400);
  paddings = 50;
  x = paddings;
  y = height / 2
  d = 20;
  rectMode(CENTER);
  angleMode(DEGREES);
  rotateAngle = 0;
  scaleSize = 1;
}

function draw() {
  background(220);
  
  //Scaling and rotating the rectangle 
  push();
  translate(width/2, height/2); //chaning the origin to the center of th canvas
  scale(scaleSize);
  rotate(rotateAngle);
  fill(255);
  stroke(0);
  strokeWeight(4);
  rect(0, 0, 50, 70);
  pop();
  
  //the slider line
  strokeWeight(4);
  line(paddings, y, width - paddings, y)
  
  //slider button
  fill(0);
  if (sliding) {
    x = constrain(mouseX, paddings, (width - paddings));
  }
  ellipse(x, width / 2, d);
  
  //maping values for scaling and rotating base on x position of the slider button
  scaleSize = map(x, paddings,width-paddings,1,9);
  rotateAngle = map(x, paddings, width-paddings,0,180);
}



function mousePressed() {
  if (dist(mouseX, mouseY, x, y) < (d / 2)) {
    sliding = true;
  }
}

function mouseReleased() {
  sliding = false;
}

I added in a rectangle that scales and rotates with the slider just to make it fun.