Ricky's Documentation Blog

Recitations

Recitation 7

by Leave a Comment

Recitation 7: Particles

I used this recitation as a practice for my Project A, so I tried to use practices to make the effects that mimic the city at night. the problem is that sometimes it maybe too bright

The way of Interaction is like this: users can draw lines freely on the canvas, after that press any key to close the light(make the canvas black) then, they can press on the key “l” to gradually light up the lines they drew.

the code is here:https://editor.p5js.org/zzrrqqq/sketches/4z8sTaEMz

I didn’t record a video because I think it’s more fun to interact.

The difficulty I encountered is basically how to light up the road gradually according to what the user had drawn. With the instruction from Professor Moon, I used “class” to achieve this. Store the spots as classes with four variables on the line into an array, and display elements in the array one by one will help, finally I succeeded, I also apply other changes and particles to it.

Reflection:

1. OOP is programming the movement and display separately, one can do any one of them at anytime without processing other codes. A Class is an object that can be shown and moved on the canvas, it can be freely displayed any number anywhere and user can decide whether to let it move. An example is a ball on the canvas that can either choose to move or not to move.

2. OOP is effective because the movement and display are coded separately, one can easily make changes without influencing other codes and freely decide whether to move. When we need to display same things at different status on the canvas, OOP is extremely useful as people can display them and decide whether to let them move or how to move.

3. I created an object that can be shown only as a line according to mouse and “pmouse” at first but can change color and show other particles when certain key is pressed. I used mouseX, mouseY, pmouseX, pmouseY together with other local values to make that.

4. How to reverse the class, for example, if the “move” asks the ball to go left for 100, how to let it go back to the initial point without creating new periods.

Recitation 5

by 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.

 

Recitation 3

by 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

by 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

CC Lab Recitation1

by 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.

Recitation7

by Leave a Comment

Recitation 7: Neopixel Music Visualization

Step1: I connected the circuit just as illustrated.

Step2:I applied the code, it worked quite well! Controlling the NeoPixel Stripe by clicking and moving mouse is interesting and beautiful.

Step3: The music I selected was called ‘uchiage hanabi’, a Japanese song, which is my favorite one. Using a software, I converted the .flac version into the .aiff version so that it can be used in processing. Then, I changed the code so that it can play the song. I also added some animations. Since the song is somehow about fireworks, so the animation is also about this, a small problem is that I hope to present the animation of firework blooming in the night sky, but I forgot to adjust the color of the background when I was recording, which make the project not that perfect. I also changed the light, mainly make them blinking and changing colors with the rhythm. The following is the code and the video of my work.

import processing.sound.*;

SoundFile sample;
Amplitude analysis;
import processing.serial.*;
import osteele.processing.SerialRecord.*;

Serial serialPort;
SerialRecord serialRecord;

int NUM = 60;  //amount of pixels
int[] r = new int[NUM]; //red of each tile
int[] g = new int[NUM]; //red of each tile
int[] b = new int[NUM]; //red of each tile



void setup() {
  size(600, 600);
 
  // load and play a sound file in a loop
  sample = new SoundFile(this, "dashanghuahuo.aiff");
  sample.loop();

  // create the Amplitude analysis object
  analysis = new Amplitude(this);
  // analyze the playing sound file
  analysis.input(sample);
  
  String serialPortName = SerialUtils.findArduinoPort();
  serialPort = new Serial(this, serialPortName, 9600);
  serialRecord = new SerialRecord(this, serialPort, 4);
  serialRecord.logToCanvas(false);

}

void draw() {
  
 int n=floor(random(1,60));

    r[n] = floor(random(255));
    g[n] = floor(random(255));
    b[n] = floor(random(255));

    serialRecord.values[0] = n;     // which pixel we change (0-59)
    serialRecord.values[1] = r[n];  // how much red (0-255)
    serialRecord.values[2] = g[n];  // how much green (0-255)
    serialRecord.values[3] = b[n];  // how much blue (0-255)
    serialRecord.send();            // send it!
  
  long t=millis();
  if(t>59500){
  firework(235,212);
 }
  if(t>62500){
  firework(420,438);
 }
  if(t>65000){
  firework(344,388);
 }
  if(t>67000){
  firework(138,460);
 }
  if(t>70500){
  firework(442,190);
 }
  if(t>72500){
  firework(160,230);
 }
  if(t>76000){
  firework(324,520);
 }
  /*if(t>8000){
  firework(358,110);
 }*/
}

void firework(float x, float y){
  stroke(x,y,x+y);
  line(x-37,y-30,x-16,y-10);
  line(x-22,y-44,x-10,y-16);
  line(x,y-22,x-10,y-50);
  line(x+4,y-56,x+4,y-30);
  line(x+22,y-60,x+10,y-20);
  line(x+30,y-50,x+20,y-28);
  line(x+30,y-38,x+24,y-25);
  line(x+60,y-42,x+22,y-18);
  line(x+48,y-18,x+30,y-12);
  line(x+26,y-4,x+38,y-4);
  line(x+22,y,x+60,y+20);
  line(x+20,y+10,x+28,y+15);
  line(x+14,y+14,x+36,y+50);
  line(x+10,y+20,x+14,y+30);
  line(x+4,y+20,x+6,y+48);
  line(x-4,y+20,x-8,y+35);
  line(x-10,y+15,x-24,y+58);
  line(x-20,y+20,x-25,y+30);
  line(x-25,y+15,x-55,y+40);
  line(x-27,y+5,x-60,y+15);
  line(x-50,y-10,x-32,y-5);
  
}

 

 

Recitation5

by Leave a Comment

Recitation5: Processing Basics

First, I the photo I chose is from my favorite game “Starcraft”, an epic real time strategy game. And this photo is actually the symbol of one of the powers in the game world called Terran, which is also my favorite. I tried to draw it down on the back of my calculator with a pencil, but it didn’t look really good, so this time I try to really draw one with Processing.

What I’m going to draw in processing is to do my best to represent the picture, and fill it with different colors. I didn’t present certain details because they won’t influence the whole portrait of the Eagle-like image, and they are also hard to present with “beginShape” and “vertex” and “bezierVertex”.

I did some measurements and apply them to my paper drawing. I also calculated the positions of the points according to the drawing and the measuring.

Then, I used four “beginShape” and “endShape” structures to complete my drawing, the code is as follows.

int i=100;

void setup() {
  size(600, 600);
}
void draw() {
  // Your drawing code goes here
  background(255);
  if (i<220){
    i=i+1;
  }
  fill(63,71,i);
  beginShape();
  vertex(300,60);
  vertex(240,150);
  vertex(285,150);
  vertex(300,120);
  vertex(315,150);
  vertex(360,150);
  vertex(300,60);
  endShape();
  
  beginShape();
  vertex(270,180);
  vertex(120,180);
  vertex(90,240);
  bezierVertex(135,225,150,240,140,260);
  vertex(120,270);
  vertex(120,360);
  bezierVertex(150,330,180,330,180,370);
  vertex(180,370);
  bezierVertex(180,370,200,365,210,390);
  vertex(210,390);
  bezierVertex(240,345,255,360,240,405);
  vertex(240,405);
  bezierVertex(210,420,200,435,210,450);
  vertex(210,450);
  bezierVertex(210,450,225,420,240,450);
  vertex(270,420);
  vertex(180,540);
  bezierVertex(210,520,240,510,270,510);
  vertex(300,450);
  vertex(330,510);
  bezierVertex(360,510,390,520,420,540);
  vertex(330,420);
  vertex(360,450);
  bezierVertex(360,450,375,420,390,450);
  vertex(390,450);
  bezierVertex(400,435,390,420,360,405);
  vertex(360,405);
  bezierVertex(345,360,360,345,390,390);
  vertex(390,390);
  bezierVertex(390,390,400,365,420,370);
  vertex(420,370);
  bezierVertex(420,330,450,330,480,360);
  vertex(480,270);
  vertex(460,260);
  bezierVertex(450,240,465,225,510,240);
  vertex(480,180);
  vertex(330,180);
  vertex(375,225);
  bezierVertex(360,250,330,242,315,240);
  vertex(315,240);
  bezierVertex(325,225,320,193,300,190);
  vertex(300,190);
  bezierVertex(280,193,275,225,273,230);
  vertex(283,225);
  bezierVertex(283,225,290,233,285,240);
  vertex(285,240);
  bezierVertex(270,242,240,250,225,225);
  vertex(270,180);
  endShape();
  
  beginShape();
  vertex(180,390);
  vertex(90,510);
  vertex(165,510);
  vertex(180,480);
  vertex(150,480);
  vertex(204,408);
  vertex(180,390);
  endShape();
  
  beginShape();
  vertex(420,390);
  vertex(510,510);
  vertex(435,510);
  vertex(420,480);
  vertex(450,480);
  vertex(396,408);
  vertex(420,390);
  endShape();
}

and here’s the screenshot of the Final work

besides, I added some lines, so that the color of the whole symbol can change, I didn’t record that but it really works.

I think it’s good to realize my target with processing, because I can be very precise in selecting some points. Also, I can make it totally axisymmetric, by applying the coordinates of the points, that will make the whole drawing more comfortable to watch than that drawn by hand. However, since I’m not really good at using the software, so I can’t present some details, which is kind of dissatisfying.

 

 

 

 

Recitation 4

by Leave a Comment

Recitation4

I worked with Leon Chen, after starting, we decided to work on different parts so that we can be more efficient.

I built the circuit first according to the sketch, since there are too many wires to be connected, I tried to obey certain rules, which I discovered very useful to organize the connecting. For example, using red wires for positive electrode and black for ground; when connecting the motor, use the wires of the same color with the wire of the motor. With this approach, I can find out connecting problems more easily. After wiring, I used the given program to test it. Here’s the photos and records of our circuit.

.

Meanwhile, Leon used the knife to cut the cardboard according to the Template, I also helped to cut some.

Then, we used the glue gun to stick the cardboard pieces together, making them the mechanism.

We left the template on it, since a mechanism with the colors white and brown is much cooler:)

The connection of the rotation link is not stable at first, but Professor Gottfried helped us by giving the longer rivets and teaching us how to use them, then we made a stable one. Here’s the illustration video.

After this, we personalized our work. We designed a plane, or to be more specific, a B2 bomber, cut it from the used cardboard and attached it to the mechanism. It is as follows.

Then we returned the gadgets and finished our work.

 

1.Daniel Rozin’s The wooden Mirror. I think he actually chose wood blocks as his actuator. By changing the grey scale of wood blocks, he can show images. Compared to the one we have done, it’s much more creative. We used a normal actuator: a motor, which can do some moves itself when being connected in a circuit. However, no matter what we do to the wooden block, it can’t do anything all on itself. So quantity is the key, a lot of different blocks can make a difference, by manipulating them, we can have some interesting feedbacks.

2.I would be interested in using motors, especially servos when designing my project. I like mazes when I was small, especially those that can be held in hand and solved by tilting the plate, and I believe a maze that can adjust difficulties is quite cool. So my thought is to design a prototype of two levels, Arduino will count then time the player used to play the first level and decide which maze of the second maze the player should enter, using a motor, we can direct the ball to the assigned maze. The maze are all made of cardboards and we will use servos to switch the direction.

 

 

 

Recitation 3

by Leave a Comment

Recitation3: Workout

1.I connected the tilt switch with the two long wires and soldered them.

2.I connected the circuit according to the sketch

.

3.I wrote the first program so that it will count a transition between LOW and HIGH instead of count every time it changed. The code is as follows.

int SENSOR_PIN = 2;
int tiltVal;
int prevTiltVal;
int a;
//a is used to show a trisition between LOW and HIGH.
int count;
void setup() {
pinMode(SENSOR_PIN, INPUT); // Set sensor pin as an INPUT pin
Serial.begin(9600);
a=0;
count=0;
}
void loop() {
// read the state of the sensor
tiltVal = digitalRead(SENSOR_PIN);
// if the tilt sensor value changed, print the new value
if(tiltVal != prevTiltVal){
//Serial.println(tiltVal);
a=a+1;
prevTiltVal = tiltVal;
if(a==2){
count=count+1;
Serial.println(count);
a=0;
}
}
delay(10);
}

And here’s my illustration video (sorry for awful recording, but it did work)

4. I adapted the code so that it fits all the requests, which is as follows

int SENSOR_PIN = 2;
int tiltVal;
int prevTiltVal;
int a;
//a is used to show a trisition between LOW and HIGH. It is the 'count in the previous program'
int count;
int b;
void setup() {
pinMode(SENSOR_PIN, INPUT); // Set sensor pin as an INPUT pin
Serial.begin(9600);
a=0;
count=0;
b=0;
}
void loop() {
// read the state of the sensor
tiltVal = digitalRead(SENSOR_PIN);
// if the tilt sensor value changed, print the new value
if(tiltVal != prevTiltVal){
//Serial.println(tiltVal);
a=a+1;
prevTiltVal = tiltVal;
if(a==2){
count=count+1;
b=b+1;
Serial.println(count);
a=0;
}
}
if(b==8){
Serial.println("Yay, you’ve done one set of curls");
b=0;
 
}
delay(10);
}
 
Here’s the illustration video(poor shooting again)

Reflection:

the process of connecting the wires and soldering the sensor is pretty good. However, I had difficulties adapting the code, which is because I mistaken “==” with”=”, with the help of my peers, I discovered it and corrected it.

I think the sensor changes when the angle is around 30 degrees.

It will only switch between “HIGH” and “LOW” when tilted to one side, if it’s tilted to another side, nothing will happen.

I don’t think it will be used by many users, the accuracy of the sensor is not guaranteed and the wires will disturb the exercising and will be hard to tackle with.

 

 

 

Recitation 1

by Leave a Comment

Dear Professor Gottfried:

Here’s my work for recitation one, I finish it with my partner Celeste Hu, whose net ID is hh2856. So our videos are the same.

 

Recitation 1: Electronics and soldering.

 

Task2

Step 1:  Build the switch

Content: I sticked the copper tape to the card board, then soldered the wire with the board.

Reflections: Everything went quite well.

The recording of our works can be seen in the recording of circuit3 

 

Task1

Step 2: Connect the first circuit

Content: The circuit was used to ring the buzzer, when someone pressed the button, the buzzer would beep.

Reflection: We didn’t know the breadboard quite well, so the first three connecting attempts failed, basically its because we put the electronic elements in different lines without using cables(or use the wrong cable) to connect them. I believe after this recitation, we can master the basic skills of using breadboards.

Circuit 1

 

Step 3: Connect the second circuit

Content: the newly added LED was used to show whether the buzzer was activated. When the button was pressed, the LED should be lit up while the buzzer beeps. The resistor is used to protect the circuit, since the value of the resistance of the LED is too small, which may cause short circuit.

Reflection: Actually the first LED we used was broken, but we believe the problem was with the circuit, which was  really a waste of time, so next time we should be more confident with ourselves and try to consider problems in a different way.

Circuit 2:

 

 

Step 4 Connect the third circuit.

Content: I thought the additional circuit was used show whether the power is activated, and can be used to check where the problem is if the buzzer or LED2 didn’t work. If LED1 is lit up, then there may be problem with the circuit in the former steps, however, if it didn’t light up, then maybe the problems with the main circuit or the power. But if it’s for this usage, then there’s no need to use a pot, since a switch can also do the work of deciding whether to light up the light. So I’m a bit confused.

Reflection: The circuit before was too complicated since we didn’t manage it well, resulting in using too many cables and inappropriate positioning of elements, which then resulted in difficulties in inserting the materials for Step 4.

Circuit 3

 

Answers to questions

Question1:  The resistor R1 is used to protect LED1. Since the resistance value of the potentiometer can be quite small, without resistor R1 the current might be too strong, which will cause damage to LED1. So R1 was there to protect LED1 form burnt.

 

Question2:

The answer is as follows  (I’m not sure about the value of the resistance) (The power is 9v instead of 6v, sorry for putting down the wrong number)

 

Question3:

First, the process we assemble the circuit involves interaction: We put electronic elements on the breadboard, then these things reply us with the consequence of whether the buzzer beeps or the LED lights, according to our ways of connecting, then we reply the consequences by either correct the circuit or move to the next step.             In the whole process, we listen, speak(correct the circuit) and think, the breadboard also listen(being assembled and inserted with different elements) speak(conveying whether the circuit worked) and think(let the current flow to check whether it works). The breadboard has low interactivity, because it can’t completely the process on its own.

Second, our communicating with the professors or the teaching assistants involves interaction. Both of the two sides listen, speak and think. It has high interactivity.

Question4:

People can do this by finding the factors of a certain form of art, and find other similar factors from other actions to create interactive art. For example, since drawing involve moving of  ‘pens’ to create images, so Mr.Lieberman  found other actions involving movements like driving or eyesight moving, which then becomes the projects ‘ip font’ and ‘Eye Writer’.