{"id":2521,"date":"2022-04-19T19:00:00","date_gmt":"2022-04-19T23:00:00","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/?p=2521"},"modified":"2022-04-21T20:01:18","modified_gmt":"2022-04-22T00:01:18","slug":"visual-crit-james-kyle","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/?p=2521","title":{"rendered":"Visual Crit – James Kyle"},"content":{"rendered":"

Description:<\/strong><\/span><\/p>\n

For this project, I aimed to create an interactive 8-bit type representation of a house that the user could interact with and change stuff about their environment with the interface. I decided to go with lights and represent their states in the virtual p5.js environment. The user can click the lamps in the virtual world and turn them on\/off in the real world. The states of the lamps are reflected in the p5.js environment as well brightening up the surrounding environment when they are on. The user can also turn the lights on and off in the physical world and the light states would be again reflected in the virtual environment so the information goes both ways from p5.js to arduino and back.<\/p>\n

\"\"
No lights on<\/figcaption><\/figure>\n
\"\"
One lamp on<\/figcaption><\/figure>\n
\"\"
Both lamps on<\/figcaption><\/figure>\n

 <\/p>\n

Demo video:<\/strong><\/span><\/p>\n

https:\/\/youtu.be\/KQ2YrnX2HL4http:\/\/<\/a><\/p>\n

 <\/p>\n

Circuit:<\/strong><\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

Arduino Code:<\/strong><\/span><\/p>\n

#include <string.h>\r\n\r\n#define lamp1pin 10\r\n#define lamp2pin 9\r\n#define button1 3\r\n#define button2 2\r\n\r\n\r\nunsigned long debounceTimer1 = 0;\r\nint debounceTime1 = 300;\r\nbool DEBOUNCE1 = false;\r\nbool firstCount1 = true;\r\n\r\nunsigned long debounceTimer2 = 0;\r\nint debounceTime2 = 300;\r\nbool DEBOUNCE2 = false;\r\nbool firstCount2 = true;\r\n\r\n\r\nvolatile int lamp1state = 0;\r\nvolatile int lamp2state = 0;\r\n\r\n\r\nint inputData;\r\n\r\nchar buf[25];\r\nString command;\r\n\r\nint c;\r\n\r\n\r\nvoid setup() {\r\n  \/\/ put your setup code here, to run once:\r\n\r\n  Serial.begin(9600);\r\n\r\n  pinMode(lamp1pin, OUTPUT);\r\n  pinMode(lamp2pin, OUTPUT);\r\n  pinMode(button1, INPUT_PULLUP);\r\n  pinMode(button2, INPUT_PULLUP);\r\n  attachInterrupt(digitalPinToInterrupt(button1), button1Pressed, CHANGE);\r\n  attachInterrupt(digitalPinToInterrupt(button2), button2Pressed, CHANGE);\r\n\r\n}\r\n\r\n\r\nvoid button2Pressed() {\r\n  if (!DEBOUNCE2) {\r\n    DEBOUNCE2 = true;\r\n    lamp2state = !lamp2state;\r\n    digitalWrite(lamp2pin, lamp2state);\r\n  }\r\n}\r\n\r\nvoid button1Pressed() {\r\n  if (!DEBOUNCE1) {\r\n    DEBOUNCE1 = true;\r\n    lamp1state = !lamp1state;\r\n    digitalWrite(lamp1pin, lamp1state);\r\n  }\r\n}\r\n\r\nvoid loop() {\r\n\r\n  int message1 = 10;\r\n  int message2 = 20;\r\n\r\n  \/\/if main computer sent a command\r\n  if ( Serial.available() > 0) {\r\n\r\n    c = Serial.read();\r\n    \r\n\/\/    if (c == 1) {\r\n\/\/      \r\n\/\/      digitalWrite(lamp1pin, HIGH);\r\n\/\/    }\r\n    Serial.println(c);\r\n    parseInput(c);\r\n  }\r\n\r\n  if (DEBOUNCE1 && firstCount1) {\r\n    debounceTimer1 = millis();\r\n    firstCount1 = false;\r\n    message1 = 1 + lamp1state;\r\n\/\/    Serial.println(message1);\r\n  }\r\n  \r\n  if (millis() - debounceTimer1 > debounceTime1) {\r\n    DEBOUNCE1 = false;\r\n    firstCount1 = true;\r\n  }\r\n\r\n  if (DEBOUNCE2 && firstCount2) {\r\n    debounceTimer2 = millis();\r\n    firstCount2 = false;\r\n    message2 = 3 + lamp2state;\r\n\/\/    Serial.println(message2);\r\n  }\r\n  if (millis() - debounceTimer2 > debounceTime2) {\r\n    DEBOUNCE2 = false;\r\n    firstCount2 = true;\r\n  }\r\n  \r\n  \r\n}\r\n\r\n\r\nvoid parseInput(int inputData) {\r\n\r\n\r\n  int y = inputData;\r\n\r\n    if (y == 1) { \/\/1\r\n      lamp1state = 1;\r\n      digitalWrite(lamp1pin, HIGH);\r\n    } else if (y == 2) { \/\/2\r\n      lamp1state = 0;\r\n      digitalWrite(lamp1pin, LOW);\r\n    }\r\n    else if (y == 3) { \/\/3\r\n      lamp2state = 1;\r\n      digitalWrite(lamp2pin, HIGH);\r\n    } else if (y == 4) { \/\/4\r\n      lamp2state = 0;\r\n      digitalWrite(lamp2pin, LOW);\r\n    }\r\n\r\n  \r\n}\r\n<\/pre>\n
 <\/p>\n
p5.js Code:<\/strong><\/span><\/p>\n
\/*\r\n\r\n\r\n- RGB to HSV Conversion Function from http:\/\/www.javascripter.net\/faq\/rgb2hsv.htm\r\n\r\n\r\n*\/\r\n\r\n\r\n\r\n\r\nlet serial;\r\nlet latestData = \"waiting for data\";\r\nvar outData;\r\nvar message;\r\n\r\nlet newFont;\r\nlet lightsEnable = true;\r\n\r\nlet x = 100;\r\nlet y = 100;\r\n\r\nlet width = 1700;\r\nlet height = 900;\r\n\r\nlet color = 300;\r\nlet baseSaturation = 40;\r\nlet baseBrightness = 30;\r\n\r\nlet table1X = 970;\r\nlet table2X = 630;\r\nlet table1Y = 200;\r\n\r\n\/\/Lightsource vector [on\/off, x, y, Lamp Radius, Shine Radius]\r\nlet lightSources = [];\r\n\r\nlet updateLightSource = true;\r\n\r\n\r\nfunction setup() {\r\n  createCanvas(width, height);\r\n\r\n  \/\/Lamps initiation\r\n  lightSources[0] = [0, table1X, table1Y, 40, 200];\r\n  lightSources[1] = [0, table2X, table1Y, 40, 200];\r\n  lightSources[2] = [0, table1X, table1Y, 40, 200];\r\n  \r\n  \r\n  serial = new p5.SerialPort();\r\n\r\n  serial.list();\r\n  serial.open('\/dev\/tty.usbmodem14301');\r\n\r\n  serial.on('connected', serverConnected);\r\n\r\n  serial.on('list', gotList);\r\n\r\n  serial.on('data', gotData);\r\n\r\n  serial.on('error', gotError);\r\n\r\n  serial.on('open', gotOpen);\r\n\r\n  serial.on('close', gotClose);\r\n}\r\n\r\nfunction serverConnected() {\r\n  print(\"Connected to Server\");\r\n }\r\n \r\n function gotList(thelist) {\r\n  print(\"List of Serial Ports:\");\r\n \r\n  for (let i = 0; i < thelist.length; i++) {\r\n   print(i + \" \" + thelist[i]);\r\n  }\r\n }\r\n \r\n function gotOpen() {\r\n  print(\"Serial Port is Open\");\r\n }\r\n \r\n function gotClose(){\r\n  print(\"Serial Port is Closed\");\r\n  latestData = \"Serial Port is Closed\";\r\n }\r\n \r\n function gotError(theerror) {\r\n  print(theerror);\r\n }\r\n \r\n function gotData() {\r\n   let currentString = serial.readLine();\r\n   trim(currentString);\r\n   if (!currentString) return;\r\n   console.log(currentString);\r\n   latestData = currentString;\r\n\r\n   if (latestData\/10 >= 2) {\r\n     lightSources[1][0] = latestData - 20;\r\n   } else {\r\n    lightSources[0][0] = latestData - 10; \r\n   }\r\n }\r\n \r\nfunction draw() {\r\n\r\n  colorMode(HSB);\r\n  background(128, 20, 70);\r\n\r\n  push();\r\n  rectMode(CENTER);\r\n  fill(50);\r\n  rect(width\/2, height\/2,width - 100, height - 100);\r\n  pop();\r\n\r\n  \/\/Couch\r\n  drawCouch(800, 200, 80, 200, 0, 50, 40, 80);\r\n\r\n  \/\/Chairs\r\n  drawCouch(980, 300, 80, 80, PI\/2, 50, 40, 80);\r\n  drawCouch(620, 300, 80, 80, -PI\/2, 50, 40, 80);\r\n\r\n  \/\/Coffee table\r\n  drawTable(800, 300, 80, 200, PI, 30, 40, 30);\r\n\r\n  \/\/Lamp tables\r\n  drawTable(table1X, table1Y, 80, 80, 0, 30, 40, 30);\r\n  drawTable(table2X, table1Y, 80, 80, 0, 30, 40, 30);\r\n\r\n  for (k = 0; k < lightSources.length; k++) {\r\n    fill(200, 40, 60);\r\n    drawLamp(lightSources[k][1], lightSources[k][2], lightSources[k][3]);\r\n  }\r\n\r\n\r\n\r\n  for (n = 0; n < lightSources.length; n++) {\r\n    if (lightSources[n][0] == 1) {\r\n      turnLightOn(lightSources[n][1], lightSources[n][2], lightSources[n][3], lightSources[n][4]);\r\n    }\r\n  }\r\n\r\n  push();\r\n  fill(0);\r\n  textSize(14);\r\n  text(latestData, 10, 20);\r\n  pop();\r\n\r\n  push();\r\n  fill(0);\r\n  textSize(14);\r\n  text(message, 10, 40);\r\n  pop();\r\n\r\n  var d = 3;\r\n  d = int(d);\r\n\r\n  \/\/ serial.write(int(2));\r\n \r\n}\r\n\r\n\r\nfunction updateLightState(lightIndex) {\r\n  lightIndex = Number(lightIndex);\r\n  if (lightSources[lightIndex][0] == 1) {\r\n      lightSources[lightIndex][0] = 0;\r\n      if (lightIndex == 2) { \r\n        outData = 2;\r\n      } else if (lightIndex == 1){\r\n        outData = 4;\r\n      }\r\n      \/\/ print(message);\r\n      serial.write(int(outData));\r\n  }\r\n\r\n  else if (lightSources[lightIndex][0] == 0) {\r\n      lightSources[lightIndex][0] = 1;\r\n      if (lightIndex == 2) { \r\n        outData = 1;\r\n      } else if (lightIndex == 1){\r\n        outData = 3;\r\n      }\r\n      \/\/ print(message);\r\n      serial.write(int(outData));\r\n  }\r\n}\r\n\r\nfunction checkIfLampClicked(x, y) {\r\n\r\n  for (n = 0; n < lightSources.length; n++) {\r\n    let currX = lightSources[n][1];\r\n    let currY = lightSources[n][2];\r\n    let currR = lightSources[n][3];\r\n\r\n    let distance = sqrt(pow((currX-x),2) - pow((currY-y),2));\r\n\r\n    if (distance <= currR) {\r\n      \/\/Toggle lamp state\r\n      updateLightState(n);\r\n      return;\r\n    }\r\n  }\r\n}\r\n\r\nfunction keyPressed() {\r\n\r\n  updateLightState(key);\r\n\r\n}\r\n\r\n\r\n\r\nfunction turnLightOn(x, y, lampRadius, shineRadius) {\r\n  var centerX = x;\r\n  var centerY = y;\r\n\r\n\r\n  \/\/Iterating through each point in square to brighten color if inside lamp shine radius\r\n  for (i = 0; i < 2*shineRadius; i = i+5) {\r\n    for (j = 0; j < 2*shineRadius; j = j+5) {\r\n      var currX = centerX - shineRadius + i;\r\n      var currY = centerY - shineRadius + j;\r\n\r\n      var dist2Center = sqrt(pow((centerX - currX),2) + pow((centerY - currY),2));\r\n\r\n      if (dist2Center <= shineRadius) {\r\n        var currColor = get(currX, currY);\r\n        hsvConversion = rgb2hsv(currColor[0], currColor[1], currColor[2]);\r\n\r\n        colorMode(HSB);\r\n        stroke(hsvConversion[0], hsvConversion[1]+40, hsvConversion[2]+20);\r\n        strokeWeight(7);\r\n        point(currX, currY);\r\n      }\r\n\r\n    }\r\n  }\r\n \r\n  strokeWeight(0);\r\n}\r\n\r\n\r\n\r\nfunction drawCouch(x, y, width, height, theta, couchH, couchS, couchB) {\r\n\r\n  let couchHeight = width;\r\n  let couchWidth = height;\r\n  let armWidth = couchWidth*1\/5;\r\n  let armHeight = couchHeight*4\/5;\r\n  let backWidth = couchWidth;\r\n  let backHeight = couchHeight*2\/5;\r\n\r\n  \/\/Base Couch\r\n  push();\r\n  angleMode(RADIANS);\r\n  rectMode(CENTER);\r\n  translate(x, y);\r\n  rotate(theta);\r\n  \/\/ translate(transRadius - transRadius*cos(theta), -transRadius*sin(theta));\r\n\r\n  strokeWeight(2);\r\n  stroke(0);\r\n  fill(couchH, couchS, couchB);\r\n  rect(0, 0, couchWidth, couchHeight, 0, 0, 10, 10);\r\n\r\n  \/\/Arm rests\r\n  fill(couchH, couchS, couchB - 20);\r\n  rect(-couchWidth\/2, armHeight - couchHeight, armWidth, armHeight, 10, 10, 10, 10);\r\n  rect(couchWidth\/2, armHeight - couchHeight, armWidth, armHeight, 10, 10, 10, 10);\r\n\r\n  \/\/Backing\r\n  fill(couchH, couchS, couchB - 25);\r\n  rect(0, (armHeight\/2 - couchHeight\/2) + (backHeight\/2 - couchHeight\/2), backWidth, backHeight, 0, 0, 30, 30);\r\n  strokeWeight(0);\r\n\r\n\r\n  pop();\r\n\r\n}\r\n\r\nfunction drawTable(x, y, width, height, theta, couchH, couchS, couchB) {\r\n\r\n  let tableHeight = width;\r\n  let tableWidth = height;\r\n\r\n  \/\/Base Couch\r\n  push();\r\n  angleMode(RADIANS);\r\n  rectMode(CENTER);\r\n  translate(x, y);\r\n  rotate(theta);\r\n  \/\/ translate(transRadius - transRadius*cos(theta), -transRadius*sin(theta));\r\n\r\n  \/\/Table top\r\n  strokeWeight(2);\r\n  stroke(0);\r\n  fill(couchH, couchS, couchB);\r\n  rect(0, 0, tableWidth, tableHeight);\r\n\r\n  \/\/Top pattern\r\n  strokeWeight(2);\r\n  stroke(0);\r\n  fill(couchH, couchS, couchB + 40);\r\n  rect(0, 0, tableWidth - 10, tableHeight - 10);\r\n\r\n  pop();\r\n\r\n}\r\n\r\n\r\nfunction drawLamp(x, y, radius, couchH, couchS, couchB) {\r\n\r\n  let tableHeight = width;\r\n  let tableWidth = height;\r\n\r\n  \/\/Base Couch\r\n  push();\r\n\r\n  \/\/Lamp\r\n  fill(couchH, couchS, couchB);\r\n  ellipse(x, y, radius);\r\n\r\n  pop();\r\n\r\n}\r\n\r\n\r\n\r\nfunction rgb2hsv (r,g,b) {\r\n var computedH = 0;\r\n var computedS = 0;\r\n var computedV = 0;\r\n\r\n \/\/remove spaces from input RGB values, convert to int\r\n var r = parseInt( (''+r).replace(\/\\s\/g,''),10 );\r\n var g = parseInt( (''+g).replace(\/\\s\/g,''),10 );\r\n var b = parseInt( (''+b).replace(\/\\s\/g,''),10 );\r\n\r\n if ( r==null || g==null || b==null ||\r\n     isNaN(r) || isNaN(g)|| isNaN(b) ) {\r\n   alert ('Please enter numeric RGB values!');\r\n   return;\r\n }\r\n if (r<0 || g<0 || b<0 || r>255 || g>255 || b>255) {\r\n   alert ('RGB values must be in the range 0 to 255.');\r\n   return;\r\n }\r\n r=r\/255; g=g\/255; b=b\/255;\r\n var minRGB = Math.min(r,Math.min(g,b));\r\n var maxRGB = Math.max(r,Math.max(g,b));\r\n\r\n \/\/ Black-gray-white\r\n if (minRGB==maxRGB) {\r\n  computedV = minRGB;\r\n  return [0,0,computedV];\r\n }\r\n\r\n \/\/ Colors other than black-gray-white:\r\n var d = (r==minRGB) ? g-b : ((b==minRGB) ? r-g : b-r);\r\n var h = (r==minRGB) ? 3 : ((b==minRGB) ? 1 : 5);\r\n computedH = 60*(h - d\/(maxRGB - minRGB));\r\n computedS = (maxRGB - minRGB)\/maxRGB;\r\n computedV = maxRGB;\r\n return [computedH,computedS*100,computedV*100];\r\n}<\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Description: For this project, I aimed to create an interactive 8-bit type representation of a house that the user could interact with and change stuff about their environment with the interface. I decided to go with lights and represent their states in the virtual p5.js environment. The user can click the lamps in the virtual … Continue reading “Visual Crit – James Kyle”<\/span><\/a><\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[20,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/index.php?rest_route=\/wp\/v2\/posts\/2521"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/index.php?rest_route=\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2521"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/index.php?rest_route=\/wp\/v2\/posts\/2521\/revisions"}],"predecessor-version":[{"id":2545,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/index.php?rest_route=\/wp\/v2\/posts\/2521\/revisions\/2545"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/s2022\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}