• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • about this course
  • syllabus
  • rubric
  • labs
  • blog

HCI | TechX

August 14, 2020

homework day 8 – Michael

Arduino:

// This code sends one value from Arduino to Processing 

void setup() {
  Serial.begin(9600);
}

void loop() {
  int sensorValue = analogRead(A0)/4;
  
  Serial.write(sensorValue);

  // too fast communication might cause some latency in Processing
  // this delay resolves the issue.
  delay(1);
}

Processing:

import processing.serial.*;
Serial myPort;
int valueFromArduino;

PImage img;
int rectSize=5;
void setup() {
  size(500,300,P3D);
  background(255);
  img = loadImage("EZ.jpg");
  image(img,0,0);
  
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[0], 9600);
}

void draw() {
  background(255);
  
  while ( myPort.available() > 0) {
    valueFromArduino = myPort.read();
  }
  println(valueFromArduino);
  float xx = map(valueFromArduino,0,255,0,500);
  
  /*
  for (int x=0;x<width;x+=rectSize){
     for (int y=0;y<height;y+=rectSize){
       int index = x + (y * img.width);
       color c = img.pixels[index];
       fill(c);
       rect(x,y,rectSize,rectSize);
     }
  }*/
  for (int x=0;x<img.width;x+=5){
    for (int y=0;y<img.height;y+=5){
      int index = x + (y * img.width);
      color c = img.pixels[index];
      float r = red(c);
      float g = green(c);
      float b = blue(c);
      //fill(b,0,r);
      //float z = brightness(img.pixels[index]);
      float z = map(r,255,0,0,xx);
      noStroke();
      fill(c);
      pushMatrix();
      translate(x,y,z);
      rectMode(CENTER);
      rect(0,0,5,5);
      popMatrix();
    }
  }
  delay(1);
}

Based on the reading, Art_Interaction_and_Engagement, write a reflection about the ways technology was used in your project.

1) In my project, the potentiometer is used to change the resistance and the value accordingly. According to the value sent to the processing, the particle effects of the chosen image changes. Therefore, users may interact with the image on processing by turning the potentiometer clockwise and counter-clockwise.

Is this an engaging interaction? 

2) To some extent, it is. For the interaction between human and Arduino, this design is sure to be called “engaging interaction”. However, when considering it in a larger scale, this may not come to be effective and engaging enough.

What would you do to make it more engaging if you had more time to work on this project?

3) To make it more engaging, I would try to use the touch sensor to control the image. To be more specific, the longer you touched the touch sensor, the stronger effect it would show. Additionally, I would use two buttons to switch the images shown to engage to more audience. If possible, I would use the potentiometer to control speed of effect changes.

Filed Under: blog

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Recent Posts

  • Homework Day 8 – Simon Hsieh
  • homework day 8 – Michael
  • Homework-day8-Sophie
  • Harry Hao HW DAY8
  • homework day 8 – dora

Copyright © 2025 HCI | TechX on the Brunch Pro Theme