Ricky’s Documentation Blog

Recitation 6

March 10, 2023 by Ruiqi Zhuang Leave a Comment

Recitation 6 Object Dancers

I used the creature Optimus Prime I created last time as my dancer and added more moves including the transforming process I designed last time.

the link the project is here: https://editor.p5js.org/zzrrqqq/sketches/ZmieIzvWA

When doing the coding, I encounter two difficulties, the first one is where to use the property “this.” and were not to use that, after checking the previous example codes and the instruction of p5, I think for new functions created within the class, there’s no need to add the “this.”, otherwise, “this.” is needed.

Another problem is about the animation, since it should be totally automatic and it should be able to both do a motion and the reverse. So I added another variable to indicate what status is my dancer in right now to decide what step to take next then I don’t need to add more parameters to accomplish that.

here’s the link to the demo video https://youtube.com/shorts/vyFotL4d5vo?feature=share

Reflection:

1. Containing everything within the class makes it easier to combine codes together without making changes, it also make the code much more clear when we need to create more than one class.

2.We need to consider the size of what we are drawing, also, if we know what other’s drawings are like, we need to consider the style, the color and the pace of dancing together with other factors to make the picture harmonious with others’

3.For example, for my dancer, whose legs look the same, then modularity can enable me to use the same code for several times for the repeated work. Making movement and drawing separate enables me to change the things I want to change without influencing others, for example, I can simply change the parameter with in the move module to change the speed of the animation, if it’s not modularized, then I need to modify every function with the variable in the code to change the speed. Also, I can create different animations with the same character without writing the same display code for one more time.

Recitation 5

March 4, 2023 by Ruiqi Zhuang Leave a Comment

Recitation 5: Imaginary Creature

Optimus Prime

Optimus Prime is definitely the most welcomed character of the ip “Transformers”. He can transform into a big truck. My project aim to look at how he transforms straightly from the front. The following are the original pictures. I abstracted them.

I referred to the classic toy Transformers masterpiece 10 to design the transform process of my Optimus, it’s quite simple but effective.

Since there are other character that has the same figure as Optimus with different color, so I made use of “Array” so that every time we process the code, it will show a different character, I also used another array to provide their name.

I used the rotate code and for loop during the coding, and they went quite well. I also split every part or limb of the body in different functions, which make adjusting the positions and changing some details more easy.

Here’s the link to my code https://editor.p5js.org/zzrrqqq/sketches/xVfzGGlzX

Reflection:

1.I stored colors and texts in arrays, I used them to randomize the body color and the name of my character, they were really convenient to use. I can simply store information(not only numbers, but also colors, words etc.) in arrays and use them anyway I want. Arrays can also refer to each other. The codes can be much more simple and easy to modify.

2.When I want to start drawing a new pattern individually I will use the codes, using these codes are like creating a new canvas on the original canvas, with the push translate and pop, I can create a pattern while not affecting others, I can also modify it individually without changing other codes to adapt to this change.

3.they are like small canvases on the original canvas, they can split drawing a complicated picture into several modules, one can create and modify each module without affecting others and put them together at will

4.I added parameters to store the picked elements of an array. I also use parameters that contribute to the transforming process.

5.When I apply arrays there’s a radical change, the pattern’s color is fixed before that, but can be changed randomly when I apply the code, making the pattern much more diverse. Also, applying a parameter that keeps changing and use it in my shapes to make them move change my work from a picture into an interactive animation, that’s also a radical change.

Recitation4

February 27, 2023 by Ruiqi Zhuang Leave a Comment

Recitation4

This time my work was totally a surprise when I was doing exploratory coding.

Basically I wanted to use for loop to draw a pattern with sine function and I got this

then I changed some variables and create to more patterns.

Then I tried to make something new by rotating the blue pattern, that’s when some unexpected changes happen. I added the code translate(300,300); rotate(90); and the result is a total surprise.

I found it really interesting and beautiful, s0 I changed the variables of size, color and intervals, or even combine two patterns together,which helped me get several more patterns

What is really a pity is that I couldn’t understand how exactly the pattern is generating, I tried to modify the code, but never succeeded in moving the pattern to the middle of the canvas.

the following is the code of my favorite pattern, the left one in the second row.

function setup() {
  createCanvas(600, 600);
  background(220)
  
  
  // YOUR CODE HERE
  // .. variables that accumulate values
  // .. loops
  // .. transformations
  // .. conditionals
  // .. randomness
  for (let x=0; x<width; x+=0.5){
    noStroke();
    fill(25,x,x*sin(x))
    circle(x,50*sin(x)+100,10);
    translate(300,300);
    rotate(90)
    fill(160,x*0.37,x*0.4);
    circle(x,25*sin(x)+100,10);
    
    
    
    //fill(242,146,27);
    //circle(2*x,50*sin(x)+100,10);
    }
  
  
  
  // AFTER YOUR CODE HAS RUN:
  saveCanvas('yourname', 'png');   // saves the canvas as a png image
}

here’s the link to p5 https://editor.p5js.org/zzrrqqq/sketches/p69E1m8Cm

Reflection:

1.This time the largest difference is that when drawing by computer, one may get something totally different from what they expect, and that can be a surprise, but when drawing by hand, most of the times the result is fixed, even if there is a surprise, it could only be a small one. And for commonalities, I think both ways of drawing needs designing and choosing of color.

2.I used the for loop function and rotate function, the formal one is really convenient to use and change, which means I can generate different images with the same logic with some slight changes. The latter one is quite interesting as it may create something really surprising while beautiful.

3. I think the most important factor is whether the pattern is logical. For example, if you have some dots or lines, they should either obey a certain rule or logic or represents some concrete things. If they are just randomly generated lines, even though they might be beautiful, that’s not a good generative drawing. The second factor is the choose of color, they should be in a harmony, there should be some functions instead of random generated color.

Recitation 3

February 19, 2023 by Ruiqi Zhuang Leave a Comment

Recitation3

This time I used the sine and cosine to create a motion, and I added random variables to colors so that the color of every circle drawn is uncertain

Here’s the URL to the project https://editor.p5js.org/zzrrqqq/sketches/blqAg8mOK

The problem is I tried to record a gif, but it never downloaded even though I closed all of the filters of Safari, so I finally record the screen and uploaded it as my work. It’s here https://youtube.com/shorts/kFnBnY1joYo?feature=share

This time the code went quite well, the only problem is to calculate the trigonometric function to create an axial symmetry shape, and it went quite well.

Reflection

1. Basically I used the linear functions and the trigonometric functions, linear functions are direct and easy to use. However if we really want to create some beautiful curly motions, we need to use sine and cosine to accomplish that. With trigonometric functions, there can be much more changes and beautiful figures.

2.I experienced the motion of combining the graph of the trigonometric functions together. If the drawing was completed the picture was an axial symmetry shape and it’s quite beautiful. The process of combining them is more about calculating the write number to use in the function.

3.With map, it’s more easy to convert numbers, meaning no need to use PI and type in complicated functions to convert the numbers to what is appropriate to present on the canvas.

4.By converting the function of a circle: sin^2+cos^2 =a

Recitation 2

February 11, 2023 by Ruiqi Zhuang Leave a Comment

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

Reading Reflection 1

February 5, 2023 by Ruiqi Zhuang Leave a Comment

Reading Reflection 1: Conditional Designing

Conditional Designing is a new approach of designing proposed by a group of modern artists. The designing features its process, instead of the result, that is, their process of designing and making the result is actually their work, their masterpiece. They want viewers identify how the picture was drawn instead is what is drawn in the picture. Conditional designing is quite different from the previous designing methods , which basically design or paint to get a certain result, but this kind of work is not designing to get a concrete vase or cup or any other thing. Those conditional designers will usually have their rules of painting or designing, the only restriction to their work is the rule they have made, under that circumstance, they can only predict what the result may be, as any accident happens, the result can be rather different, that’s what make the process so special.

Conditional design is quite interesting and creative, and when it comes to me to design , I will try to make something interesting with possible surprises.

My rules of painting is as follows:

1.One can only do two things on the paper: draw a square anywhere at any size(smaller than the whole paper)or paint a closed area with one color. Several people take turns to draw, everyone can either draw a new square or paint an area at one time, the first few people should draw squares.

2.The squares can intersect with each other, but one cannot let a square be totally contained by another, they can not draw squares totally contained by a painted area either.

3. One can only paint one closed area at a time, there shouldn’t be lines in the area they are going to paint. One can not draw in the painted area

4. One cannot paint an area with the same color of any area next to it.

Basically the result of the drawing can be imagined to be a lot of patches with different colors. However, in case some accidents happen, results can be unpredictable, for example, if the first two people drew two squares on the paper, and the third people painted the rest area on the paper, then according to the rules, what people can do next is only to pain the area of the two squares with different color, and the process of painting is ended, the result will be, for instance, a yellow square and a blue square on a red paper, which will be far from my expectation. The surprise happens as I have rules of squares can’t contain other. squares, and one can not draw in the painted area.

After making up my own rules and explore conditional drawing, I found it really interesting to make the process the work, which is worth trying for several more times.

CC Lab Recitation1

February 3, 2023 by Ruiqi Zhuang Leave a Comment

The photo I’ve chosen is one of my favorite transformers models: Defensor from Generation Toys. I abstracted it to a pile of shapes and drew it with p5. the following are the photos and the screenshot of the work.

and here‘s the URL of my p5 work.

Additional Works

I added a variable to change the color of different parts of the robot. Here’s the screenshot.

https://youtube.com/shorts/KYUzaiVlSa8?feature=share

Reflection:

1.I prefer exploratory coding than using the reference although I also use reference from time from time to time. After we have learnt the basic of the language, we can try to create something on our own. I believe this process is the best way to form one’s own understanding of the language or the software, and when he or she encounters a certain problem, they will try to use the functions they already knew to solve it, and this is when one can manage the language and the functions.

2.When someone wants to draw something that is kind of vague, then drawing on the paper is better. For example, the traditional Chinese ink painting, this focus more on the feeling and atmosphere instead if what its exactly painted, under that circumstance, computer can’t exceed human.

3.When trying to draw something that requires being precise or requires the subtle changing of colors, then using computer is much better. Because using numbers to indicate the length or the color can save a lot of time of measuring or getting the exact color.

“A Mind Reader”–Ruiqi Zhuang–Professor Gottfried Haider

December 21, 2022 by Ruiqi Zhuang Leave a Comment

“A Mind Reader”—-Final Project documentation

1.Conception and Design

As I mentioned in my proposal essay, my project is adapted from a magic performance and it’s for providing some interesting interaction experiences, and I believe how it works is already well-stated in my proposal essay and can be seen in my demonstration video, so I’m not going to talk about it now. However, there are surely some detail that I didn’t cover can show some of my thoughts about interaction. First, I used physical cards made with cardboard instead of directly showing them on the screen . Because I believe taking the card in the users’ hand and watch them will make them feel more involved in this interaction, as feeling and sight are both used. Second, I could have chosen ways such as “keyPressed” “mousePressed” or “buttonPressed” for users to judge whether the number was on the card, but I didn’t, why? That’s because these kind way is peculiar given that it’s an interaction with some kind of amazing magician. I tried to use something like nod, however, the accelerometer didn’t work well, so it’s some simpler way: putting the card in different sections as if the user is showing the magician the situation. Also, I designed a mechanism to deal card from a totally closed box, trying to accomplish the following effect: the user was informed that he or she should watch the card now, but they can’t find a card anywhere, and suddenly “puff” there comes the card, then the way of showing the card also become a magic.

I didn’t attend the user testing session because the card-dealer was not finished that time. However, I did ask several peers to test it afterwards. Their suggestions includes making more decoration, adjusting the speed of showing the instruction, and adding more animations. What is really a pity is that for the first and third suggestion, I had noticed them myself, however I was lack of time to improve as making the mechanism ran out all of my time. I adjusted the time used to play some long sentences of the instruction to make sure everyone can read and understand the instruction, which is crucial for a magic performance.

2.Fabrication and Production

I will divide this section into three parts: Circuit, Programming and Fabrication.

(1)Circuit

The circuit is quite simple, two light sensors for input and a servo for output, of course there are pull-up resistors for light sensors. As I mentioned before accelerometer maybe a better choice, but it didn’t work well with my project, so I abandoned it. The sketch and circuit is as shown.

(2) Programming

Processing is mainly used for output, and Arduino for input and compute and controlling devices. The code mainly works like this: Processing plays the instruction first, after that Arduino starts to deal cards and gather information, every time it gets information, it sends a signal to processing, which will ask the user to try the next card, then Arduino will deliver the next card. After seven rounds, Arduino will calculate the conclusion and send it to processing and processing will present that on the screen. When using processing to play the instruction, I used a photo of a magician as an NPC

When doing the coding, the major difficulty I encountered was the feedback given by processing. My intension was that every time processing receives the message, it will randomly pick one from 3 sentences to present, and switch to another one when another message was received. It didn’t work at first, what happened is that the sentences keeps on switching from one to another without stopping. With professor Gottfried’s help, I changed the number sent from Arduino: It was always 1 at first, and was changed to different numbers. Also, I added another variable in processing to show the previous sent number, so processing will only pick a new sentence when the previous number differed from the number sent know, then problem solved. The attached are my codes.

Arduino:
#include 
#include "SerialRecord.h"

SerialRecord writer(3);
SerialRecord reader(3);
Servo myservo;

int a=0;
int b=0;
int c=0;
int state=1;
int prestate=1;
int sensorValue1;
int sensorValue2;
int n1;
int n2;
int n3;
int n4;
int n5;
int n6;
int n7;

void setup() {
  Serial.begin(9600);
  myservo.attach(9);
  myservo.write (120);
  delay(24000);
  
}

void loop() {
  if (state==1){
    state1();
  } else if (state==2){
    state2();
  } else if (state==3){
    state3();
  } else if (state==4){
    state4();
  } else if (state==5){
    state5();
  } else if (state==6){
    state6();
  } else if (state==7){
    state7();
  } else if (state==8){
    state8();
  }  
  writer[0] = a;
  writer[1] = b;
  c=reader[2];
  if(a<7){
  writer.send();
  //Serial.println(a);
  a=0;
  
  
  }
  if(a==7){
  writer.send();
  //Serial.println(b);
  }
  delay(20);
}

void state1(){
  myservo.write(120);
  delay(1000);
  myservo.write(180);
  delay(1000);
  myservo.write(120);
  delay(500);
  delay(3000);
  state=prestate+1;
  prestate=state;
}

void state2(){
  reader.read();
  if(c==10){
    myservo.write(120);
    delay(1000);
    myservo.write(180);
    delay(1000);
    myservo.write(120);
    delay(500);
    c=0;
  }
  int sensorValue1 = analogRead(A0);
  int sensorValue2 = analogRead(A1);
  if (sensorValue1<5 && sensorValue2>10){
    a=1;
    n1=0;
    state=1;
} else if (sensorValue1>10 && sensorValue2<5){
    a=1;
    n1=16;
    state=1;
}
   delay(3000);
}

void state3(){
  reader.read();
  if(c==10){
    myservo.write(120);
    delay(1000);
    myservo.write(180);
    delay(1000);
    myservo.write(120);
    delay(500);
    c=0;
  }
  int sensorValue1 = analogRead(A0);
  int sensorValue2 = analogRead(A1);
  if (sensorValue1<5 && sensorValue2>10){
    a=2;
    n2=0;
    state=1;
}else if (sensorValue1>10 && sensorValue2<5){
    a=2;
    n2=1;
    state=1;
}
   delay(3000);
}

void state4(){
  reader.read();
  if(c==10){
    myservo.write(120);
    delay(1000);
    myservo.write(180);
    delay(1000);
    myservo.write(120);
    delay(500);
    c=0;
  }
  int sensorValue1 = analogRead(A0);
  int sensorValue2 = analogRead(A1);
  if (sensorValue1<5 && sensorValue2>10){
    a=3;
    n3=0;
    state=1;
}else if (sensorValue1>10 && sensorValue2<5){
    a=3;
    n3=32;
    state=1;
}
   delay(3000);
}

void state5(){
  reader.read();
  if(c==10){
    myservo.write(120);
    delay(1000);
    myservo.write(180);
    delay(1000);
    myservo.write(120);
    delay(500);
    c=0;
  }
  int sensorValue1 = analogRead(A0);
  int sensorValue2 = analogRead(A1);
  if (sensorValue1<5 && sensorValue2>10){
    a=4;
    n4=0;
    state=1;
}else if (sensorValue1>10 && sensorValue2<5){
    a=4;
    n4=4;
    state=1;
}
   delay(3000);
}

void state6(){
  reader.read();
  if(c==10){
    myservo.write(120);
    delay(1000);
    myservo.write(180);
    delay(1000);
    myservo.write(120);
    delay(500);
    c=0;
  }
  int sensorValue1 = analogRead(A0);
  int sensorValue2 = analogRead(A1);
  if (sensorValue1<5 && sensorValue2>10){
    a=5;
    n5=0;
    state=1;
}else if (sensorValue1>10 && sensorValue2<5){
    a=5;
    n5=64;
    state=1;
}
   delay(3000);
}

void state7(){
  reader.read();
  if(c==10){
     myservo.write(120);
    delay(1000);
    myservo.write(180);
    delay(1000);
    myservo.write(120);
    delay(500);
    c=0;
  }
  int sensorValue1 = analogRead(A0);
  int sensorValue2 = analogRead(A1);
  if (sensorValue1<5 && sensorValue2>10){
    a=6;
    n6=0;
    state=1;
}else if (sensorValue1>10 && sensorValue2<5){
    a=6;
    n6=2;
    state=1;
}
   delay(3000);
} 

void state8(){
  reader.read();
  if(c==10){
    myservo.write(120);
    delay(1000);
    myservo.write(180);
    delay(1000);
    myservo.write(120);
    delay(500);
    c=0;
  }
  int sensorValue1 = analogRead(A0);
  int sensorValue2 = analogRead(A1);
  if (sensorValue1<5 && sensorValue2>10){
    a=7;
    n7=0;
    b=n1+n2+n3+n4+n5+n6+n7;
    state=1;
}else if (sensorValue1>10 && sensorValue2<5){
    a=7;
    n7=8;
    b=n1+n2+n3+n4+n5+n6+n7;
    state=1;
}
}



Processing:

import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord sender;
SerialRecord receiver;

PImage magician1;

float t;
int r=0;
int prea=0;

void setup(){
  size(1400,800);
  background(0);
  magician1 = loadImage("2.jpeg");
  
  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  sender = new SerialRecord(this, serialPort, 3);
  receiver = new SerialRecord(this, serialPort, 2);
}

void draw(){
  receiver.read();
  int a = receiver.values[0];
  int b = receiver.values[1];
  
  imageMode(CENTER);
  image(magician1, 700,300);
  t=millis();
  textSize(40);
  if(t>0 && t<3000){
   text("Hi, I'm a magician, you can call me Klein",350,700); 
  }
  if(t>3000 && t<3500){
   fill(0);
   rect(0,550,1400,800);
  }
  if(t>4000 && t<8000){
   fill(255);
   text("I can read your mind, if you don't believe , I will show you",250,700);
  }
  if(t>8000 && t<8500){
   fill(0);
   rect(0,550,1400,800);
  }
  if(t>9000 && t<19000){
   fill(255);
   text("Just select a random number from 1 to 100, Keep it in mind, Don't tell me",50,650);
   textSize(30);
   text("I will show you some cards, if you found your number on it, put it on the left.Otherwise, put it on the right",20,700);
  }
  if(t>19000 && t<19500){
   fill(0);
   rect(0,550,1400,800);
  }
  if(t>20000 && t<23000){
   fill(255);
   text("Clear? Let's begin", 300,700);
  }
  if(t>23000 && t<23500){
   fill(0);
   rect(0,550,1400,800);
  }
  if(t>24000){
  textSize(30);
  fill(255);
  text("Check the cards, if you found your number on it, Put it on the left.Otherwise, put it on the right",20,650);
     if(a<7 && prea!=a){
        sender.values[2]=0;
        sender.send();
        fill(0);
        rect(0,660,1400,800);
        r= int(random(0,4));
        prea=a;
     }
     if(r==1){
        text("Ah, I feel something, let's go on to the next card", 400,700);
     }
     if(r==2){
        fill(255);
        text("I think I nearly found it in your mind, try the next card", 400,700);
     }
     if(r==3){
        fill(255);
        text("Emm, I have some clues, but I'm not sure by now, check the next card", 300,700);
     }
    
}

     if(a==7){
       fill(0);
       rect(0,550,1400,800);
       delay(500);
       fill(255);
       textSize(30);
       text("I found it, I believe the number is...", 450,650);
       delay(2000);
       fill(255,0,0);
       textSize(50);
       text(b,700,700);
     }
}

(3)Fabrication

One of the most attracting parts of my project is the mysterious card-dealer, which is really a huge challenge. As we didn’t have pistons for Arduino, so I need to make something similar on my own. I got my inspiration from Recitation4 about how to use a motor to make a piston: using two poles and connect them with rivet so that they can rotate. which is as illustrated.

And the whole mechanism works in the following way. It’s a box with the length and width a bit bigger than the length and width of the cards, the box was totally closed except for two gaps on two opposite boards at the bottom, the width of the gap is bigger than the thickness of the card and less than twice the thickness, the piston was connected with a board on the front and the board can reach into the box through the gap on the bottom.

The piston will push the card in the bottom out of the box through the other gap and the cards above it will be stopped by the box, then the piston goes back and the whole pile will fall as the there’s nothing at the bottom, after that it’s just repeating.

I made a prototype for the whole fabrication thing, and use laser-cutting products as my final work, I designed every piece of wood myself, some of the sizes were wrong at the first time as I forgot to calculate the thickness when designing some of the boards, after making adjustments, they were all settled.

And here’s the device

But the problem is I can’t tackle with the friction, the force given by the servo was too small to push the card at the bottom and the cards on the top always stuck there, which means they are not falling down even though there’s nothing under it. I tried different ways including sticking paper to both sides of the cardboard, polishing where the card and the box may get touched etc. but they are not helpful. Finally, I chose to ruin the appearance of the box, I tilted the two boards on the sides to make sure they won’t touch the card, and added some extra weight on the top of the pile of card, it did work at last! The work doesn’t loon perfect, but the cards move quite smoothly.

Here’s the photo of the work

Here are two videos from Leon’s testing and the presentation in class

3.Conclusion

My project aims at applying some interesting, eye-catching and surprising interaction experience, to accomplish this goal, I performed a magic, I built the surprise box, I used the image of a magician as an NPC, these all contributed greatly to the project. Especially the box, actually, when I first planned to make it, I only wanted it to be a card-dealer, but when Isabel was testing, she said “wow” when seeing the card appears from the box, that is a surprise also for me. Although the project is lack of more details related to magic, but the main part is completed and the interaction is quite successful, the only problem is I didn’t say the number of cards, which may cause some confusion. I believe I have already done my best I’m the interacting. So, if I have more time, I will definitely perfect my project, I will make the animation more vivid, I will deal with those confusing instructions, I will add more magic elements to the physical device, to make the whole project more magical. Maybe I will also make a bigger box, and adjust some statistics about the piston so that it can push the whole card out of the box.

This time I also learnt something. It came with the major difficulty I encountered: fabrication. The lesson I learnt was: when doing designing and making, we should never think only. When I was designing the box, I measured the scale of the card and “think” let the width and length of the card-dealer both be 3mm bigger than that of the card will work, then I made it with Cuttle. But when I put everything together , the card didn’t move as the friction force is too large. And when designing the piston, I also encountered the similar problem as the rivets and the element used to connect with the servo all have thickness but I ignored it, then the piston can’t rotate. So, when making these things like laser-cut pieces which can’t be easily changed when completed, it’s always important to test ahead of time. We can make cardboard prototypes, we can use computers, we can ask others to help consider it, with these preparations we can be more assured that the final work will succeed.

For my final project, I created a rather interesting interaction experience, me myself is really satisfied with it, Although, not many, but I do consider how the audience will feel during the experience and apply some details, which I believe is crucial for designing. I still didn’t do well in the appearance of the physical device, but this time it’s because of time management. I learnt another important lesson for interaction designing, which is also important: we should never only think.

The time I spent in 825 and 826 this semester was a great period of time. I really appreciate having the chance to take Interaction Lab. Here I learnt to make all those things with Arduino, with Processing, with cardboard, with laser-cutting. I made friends, worked together with them to make the drama “Crime Detecting Glass” and the mid-term project “Self-Leveling Maze”. With the help of fellows and friends, I made those interesting small gadgets through recitations. And finally, I accomplished something I have never imagined before: making my own project without anyone telling me what to do and how to do, every piece of wood, every resistor, every line of code, were all designed and made by myself, professors and fellows helped, but the main work was all done myself. It’s the best experience I ‘ve ever had.

And thank you Professor Gottfried. You are among the best teachers I’ve ever met. You are so kind and helped me really really a lot. Good luck for everything!

Recitation 10

December 5, 2022 by Ruiqi Zhuang Leave a Comment

Recitation 10

I wanted to create the animation of light blooming in the dark using the following picture.

And I used a light sensor to apply statistics to control the size of the picture. The process of coding and circuiting is quite well. However, the final animation is not that beautiful, it’s mainly because the background of the picture is not black and I used black as the background of the processing canvas, that brings about problems.

The following are the codes and the video:

Arduino:

#include "SerialRecord.h"

SerialRecord writer(1);

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

void loop() {
  int value = analogRead(A0);
  writer[0] = value;
  writer.send();

  
  delay(20);
}

Processing

import processing.serial.*;
import osteele.processing.SerialRecord.*;
PImage light;

Serial serialPort;
SerialRecord serialRecord;

void setup() {
  size(432, 768);

  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);

 
  serialRecord = new SerialRecord(this, serialPort, 1);
  
  light = loadImage("1.jpeg");
}

void draw() {
  background(0);
  serialRecord.read();
  int value = serialRecord.get();
  imageMode(CENTER);
  image(light,216,384,value*432/1000*2,value*768/1000*2);

  
}

Video and Circuit:

Recitation 9

November 26, 2022 by Ruiqi Zhuang Leave a Comment

Recitation 9

I’m paired up with Leon

I followed the instructions to make the part B and my own pattern.

For my own pattern, my inspiration came from the function of drawing graphs of Cuttle. So I just drawn a sin graph and a cos graph adjust some of the statistics and apply the relation, they combine together to make a beautiful graph as follows.

Then I added the rectangle in the middle, however when it comes to laser cutting Andy says it wouldn’t work because of too much hollows in the middle, he added a bigger rectangle in the middle to make the whole thing stable and that really work.

After the laser cutting, we assembled everything and it worked quite well.