Final Project Documentation_Personal Bookend_Milica Gligic

PERSONAL BOOKEND 

OVERVIEW:

The objective of the final project was to design and fabricate an aesthetic object for our room or the studio while using at least two fabrication methods covered by the class. I have decided to make a bookend for my room. As a result of living in China for the past five years, I have read and collected a decent number of Chinese and Japanese literature. For this reason, I wanted to make a book holder which will reflect the regional and thematic characteristics of the literature it will be holding. For example, I already have a Herodotus statue replica holding by European History collection, and Plato’s holding all of my philosophy books. So i think this book holder will only contribute to an already established pattern.

LITERATURE, DESIGN AND FABRICATION METHODS:

Two readings assigned for the class have greatly shaped my approach to this project. First being an article called: “ How to Make Almost Anything: The Digital Fabrication Revolution” , written by Neil Gershenfeld. He stated that “ the goal of personal fabrication is not to make what you can buy in the store, but to make what you can not buy”. What he meant by this is that digital fabrication allows for personalization. For this reason I attempted to design a bookend which I can not find on Taobao, Amazon or gift shops of Athena. This reading had also explored the idea of recycling and using analog versus “digital” materials. This got me thinking about materials which are used in digital fabrication, are they synthetic or natural, polished or “raw”. This process was further deepened by another article called “Hybrid Reassemblage: An Exploration of Craft, Digital Fabrication and Artifact Uniqueness” written by Amit Zoran and Leah Buechley. Bellow is a picture of a vase which was broken by accident, and given a new form resembling its original shape. I was very interested in the way the ceramic piece and the 3D printed part are combined into a single composition.

As I started researching Amit Zoran’s work, I ran across an artist called Shiran Magriso and her series of works called “Hybrid Joinery”. She creates furniture pieces made out of wood and used plastic 3D printed joints. Some of her pieces can be seen in the pictures attached below.

Knowing that my only way of including wood in my project would be to laser cut it and combine many layers into a 3D object or use a CNC machine, I started looking at some wood designs. I ran across a website called “pinterest”, where I was inspired by two works published on the following link: https://www.pinterest.com/katyhillsco/digital-fabrication-art/ I have also made the pictures available below. At this point I had a general idea of what i wanted to do, and I started sketching out the book holder.

As a result of my research, I decided to explore the way natural and synthetic materials can be used in composition of a single piece. I decided to laser cut wood, 3D print plastic and incorporate a rock in my design.

PROJECT DESIGN:

Below is scan of my original design including proportion as well as marking the materials. The wooden part is a flower pot in which i plan to grow Keshitsubo, which would be of a perfect size and contribute to the theme of the piece as well as the interaction between natural and unnatural objects.

Originally, I wanted to split the base and include the rock inside of it. However, later I decided to have the rock sit o top of the base. I also intended to separate the gate from the base, this would make the whole object a lot easier to pack and move. My Design process consisted of 4 parts:

1. 3D Scanning:

In order to have a better understanding of the base I decided to 3D scan 2 actual rocks. I would later also use these rocks to carve rock like space inside of the base, as well as create a bed on the base where the rock would rest. For 3D scanning, I used a Matter and Form 3D scanner. The software was very easy to use, and each rock took around an hour or so to scan.

2. Base Design

I was under an impression that our maximum printing capacity was 30x30x30. For this reason I set the base to be 25cm long, and later made it 26cm. After, intending to print, I realized that I would need to redesign the base. The base could not be scaled because it involved 2 actual objects. a flower pot and an actual rock. However, after doing it one time, It was relatively easy to repeat the whole process once more.

I would start off my creating a rectangle 11x20x6, then I would use a boolean difference function to carve rock like holes in the base. Then I created a flower pot, and carved a hole for it in the base. I made sure to note down the dimensions of each rind forming the flower pot, as these dimensions would later be used for laser cutting. For each rock carved into the base I used one of the two 3D scanned rocks and changed its size, shape or angle. Since the more circular rock had a large area which was missing (could not be scanned), and I did not close the area well, if that area was touching the base it would cause an error when I would attempt to use boolean difference. For this reason, I mainly worked with one side of the rock and the other rock. I created 2 bases, identical in every way, except the bed for the rock to rest in. Below is the picture of the two designs. The two have the different base for the rock, and the second one also has holes where the gate will fit in. The holes were added in a later process with the help of professor Marcela.

3. Gate Design

For the design, I used wire cut to shape the roof from a rectangle. As well as a board which is right under the roof. I would also wire cut the back so it is flat and it fits better against books. After working on it with professor Marcela, we decided to split the roof from the bottom part, making it easier to 3D Print. The two small cylinders seen in the first picture are meant to connect the gate and the base.

4. Designing the Flower Pot in Adobe Illustrator

I used the dimension for the rings that I earlier noted down. Since each ring was to be laser cut, I used black 0.01 stroke. To conserve space I placed smaller rings in each of the larger rings. Because the maximum thickness of the wood material was 0.5 cm and I needed 1cm, I would cut two rings for each size. To make sure the pot fits into the 3D printed base, I decreased the diameter size of each ring by 1 mm. This is how my file looked like.

 

PROJECT PRODUCTION AND ASSEMBLING :

For the final project and my prototype, I decided to print only one Bookend. This is because printing two would take a considerable amount of time and material. In total I printed four parts. The base, the cylinders meant to connect the gate and the base, the gate roof, and the gate base. The base took longest to print (22h) and it came out a bit fragile, as outside layers did not stick well together. The rock would fit perfectly, and this is important going forward with this project. If I wanted to do 5% fill, it would take 29 hours. Given that I had 3 days to print, having the printer work for such long time increased a chance of failure. This is how the base came out.

Cylinders connecting the base and the gate took only 5 minutes to print, however, the roof and the gate base took around 7 hours each to print. I decided to print the roof in red to distinguish it from the black base. After they were done, I glued the three together, and added some tape at the connecting part so it would fit better with the base.

 

The last step was to laser cut the flower pot and assemble it. I first laser cut it out of cardboard and made sure it fits into the 3D model, then I laser cut it out of wood. I used a glue gun to connect each of the same size rings, and then connect those into a flower pot. I wish there was a better way to glue the parts together, I would definitely use wood adhesive or small nails next time.

After all parts were printed and the flower pot was assembled, I assembled everything together and for presentation purposes placed a brunch inside of the flower pot. In the future I would like to grow Keshitsubo Bonsai inside of the pot.

REFLECTION:

I learned a lot from the whole process. I became very comfortable with designing objects and navigating in Rhino. I also used almost every 3D printer in the lab, which made me familiar with how they work and how to prepare files for them. Overall, I am satisfied with the product. Going further, I would like to send both base designs to be printed in better quality on Taobao. I am satisfied with how the gate came out, so I will keep it. I will just print the second one in the lab.

WEEK 5: Final Project Proposal_Milica Gligic

Title:  BOOK HOLDER               

Project Statement of Purpose:                                                   

The objective of this project is to design and fabricate an aesthetic object for our room or the studio while using at least two fabrication methods covered by the class. I have decided to make a book holder for my room. As a result of living in China for the past five years, I have read and collected a decent number of Chinese and Japanese literature. I want to make a book holder which will reflect the regional and thematic characteristics of the literature it will be holding. For example, I already have a Herodotus statue replica holding by European History collection, and Plato’s holding all of my philosophy books. So i think this book holder will only contribute to an already established pattern.

Literature and Art, Perspective and Contexts:

Two readings assigned for the class have greatly shaped my approach to this project. First being an article called: “ How to Make Almost Anything: The Digital Fabrication Revolution” , written by Neil Gershenfeld. He stated that “ the goal of personal fabrication is not to make what you can buy in the store, but to make what you can not buy”. What he meant by this is that digital fabrication allows for personalization. For this reason I attempted to design a book holder which I can not find on Tabao, Amazon or gift shops of Athena. This reading had also explored the idea of recycling and using analog versus “digital” materials. This got me thinking about materials which are used in digital fabrication, are they synthetic or natural, polished or “raw”. This process was further deepened by another article called “Hybrid Reassemblage: An Exploration of Craft, Digital Fabrication and Artifact Uniqueness” written by Amit Zoran and Leah Buechley. Bellow is a picture of a vase which was broken by accident, and given a new form resembling its original shape. I was very interested in the way the ceramic piece and the 3D printed part are combined into a single composition.

As I started researching Amit Zoran’s work, I ran across an artist called Shiran Magriso and her series of works called “Hybrid Joinery”. She creates furniture pieces made out of wood and used plastic 3D printed joints. Some of her pieces can be seen in the pictures attached below.

  

Knowing that my only way of including wood in my project would be to laser cut it and combine many layers into a 3D object or use a CNC machine, I started looking at some wood designs. I ran across a website called “pinterest”, where I was inspired by two works published on the following link: https://www.pinterest.com/katyhillsco/digital-fabrication-art/ I have also made the pictures available below. At this point I had a general idea of what i wanted to do, and I started sketching out the book holder. I have decided to laser cut wood, 3D print plastic and incorporate a rock in my design. I will be making two book holders, one for each side of the shelf. 

Project Design and Production: 

Below is scan of my design including proportion as well as marking the materials. The wooden part is a flower pot in which i plan to grow Keshitsubo, which would be of a perfect size and contribute to the theme of the piece.

                                                                                                               

  The design consists of two 3D printed parts. I might print the temple gate separately, this would make the book holder more portable. I have already 3D scanned the two rocks, which I will use to better understand the size of the design, placement as well as design of the structure. The flower pot will be designed in rhino so I would understand its placement, but I will also prepare a laser cutting file in Adobe Illustrator. I plan to finish the design process by the end of Sunday, so I could dedicate Monday to 3D printing and assembling. I hope to be done on Monday, but if something doesn’t workout with 3D printing, I will have all morning and early afternoon to attempt to print it again. Below is a picture of 3D Scanned rocks and a Keshitsubo Bonsai. I would like to grow my own Keshitsubo Bonsai, but in case of continuous failure I will resort to a plastic one.

 

WEEK 3_Fabrication: Additive & Subtractive Methods_ Milica Gligic

 

OVERVIEW:

During this week we were introduced to different kinds of 3D printers and printing methods. This week’s assignment is to create a 3D model which can be 3D printed. The objective of this assignment is to practice designing a 3D object, learn to evaluate printability of a model, as well as learn how to use the machines available in the Fabrication Room.

Although we were allowed to use the design from last week, I felt like getting more practice using Rhino would not go to waste. For this reason I decided to design and print a phone holder. I chose this particular object because it would be relatively easy to design, I needed a phone holder and it would allow me to review functions used in the last week’s assignment.

DESIGN:

To design the phone holder I made a 4×4.8 cm surface which I extruded 0.5cm (Solid>Extrude Planar Curve> Straight ). Then I created a Box which was 4x4x4.8 cm. I created a curved line and used it to WireCut the box. I deleted the half I did not need, and copied the other side two times. Then I scaled down (Scale) the two copies and used them to keep the phone on the platform. In the final stage I positioned all four parts on top of each-other and used BooleanUnion to join all of the parts into a single solid. Now that the design was finished, I exported the file as an STL file. The picture of the design can be seen below.

 

3D PRINTING:

Now that I had an STL file, I opened UPStudio (A program for this particular additive 3D printer). I first imported the STL file (The “+” sign on the right side toolbar). Then, I initialized a connection with the printer (2 buttons below the “+” sign). The next step was to test the printer. To do this, I opened the “maintenance” tool (the last tool in the column) and pressed extrude. This option can be seen in the first picture. After some material was coming out of the extruder, I pressed “Stop”. Next I clicked the “Print” tool and chose 20% Infill and Fast Quality. Finally, I pressed “Print”.

                            

When the printer started printing the extruder was too close to the base and no material was coming out. This meant that extruder calibration was not right. This was most likely due to a layer of tape on the base. I watched professor Marcela calibrate the printer using the 4th tool from the top.

Once the process of Calibration was done, I sent the design to the printer once again. It printed fine, but very soon it became obvious that the phone will not stay on the platform. I stoped the printing process. This is what the model looked like. As you can see, the two holders are too small to hold the phone. From this experience I learned that sometimes things feel and look differently on the screen. Next time I could create a basic shape in size of a phone and see if it fits. 

To correct this mistake I went back to the Rhino file and made these two parts larger. I then repeated the whole export file and print process. It took 54 minutes to print the model on Fast Quality and 20% Infill.Bellow is a video of the printer at work as well as pictures of the finished product.

 

 

 

 

REFLECTION:

This time I was much more comfortable designing in Rhino. I also had a lot of fun 3D printing the object. The printing part was not challenging. In the future I would like to design more challenging objects, and think more about printability of objects and use of support in 3D printing.

 

 

WEEK 2_ 3D Modeling With Rhino_ Milica Gligic

OVERVIEW:

This week we learned some basic techniques for modeling in Rhino. In addition to learning how to design in Rhino, we learned how to understand dimensions and control objects in a 3D space. The objective of this week’s assignment is to create a 3D model of an everyday object. This object should reflect our interests, and communicate a specific concept. 

For this assignment I have decided to design a ring. Although I rarely wear any jewelry, I enjoy making it out of almost anything, wood, shells, glass etc. I found navigation in Rhino particularly difficult, and I thought creating an object which I am am relatively familiar with would be a good way to practice some of the basic functions and get comfortable with the program.

DESIGN:

Given my limited experience in Rhino, I first looked for a tutorial on the internet. I used the following link to learn how to fold a flat surface design into a ring. https://drawingpost.com/create-a-basic-ring-using-rhino-cad-8a0a02b896bb

I first created a rectangle which was 6cm long and 0.6cm wide, then I created a circle with a Circumference of 6cm. My next step was to extrude the rectangle using Solid>Extrude Planar Curve> Straight. I decided on thickness which was 0.3cm. After creating the rectangle I wanted to design its surface. I created a small rectangle, copied it numerous number of times, and modified the angle of each rectangle. Then I extruded these surfaces, just so its height is a bit larger than the ring thickness.

Following step was to unify the shape using BooleanUnion. Then I created a straight line, and used WireCut  to cut off any small rectangle parts that were coming out on the side of the ring. The tutorial suggested I should use Fillet function to smoothen the edges, I tried this look but I decided to go without this modification. Once the ring design was done, I just needed to make this flat surface into a ring. To do this I used the Flow function. I selected the the object to flow along the curve, and then I selected the curve which I created in the beginning. The following was the final design and 3D printed product.

REFLECTION: 

I feel like the whole process was confusing, I had to restart at one point because I changed the angle of the object in multiple axis and could not get it to rotate to base. Then I learned that I can rotate objects by using a Rotate function, but it is easier to do it using Orient3Pt function. By the end of the process I was able to navigate much better, and recount the steps and functions. To better navigate the space, I learned how to adjust Grid Options depending on the size of the object I intend to design. I became comfortable using the helpers on the side such as End, Near, Quadrant, Midpoint, Center etc. , as well as Grid Snap and Gumball. I also learned that the Split and WireCut function are slightly different. I am beginning to fined Rhino less overwhelming.

 

WEEK 1_ 2D Design and Fabrication_ Milica Gligic

OVERVIEW:

The goal of the first week’s exercise was to get familiar with 2D design and fabrication. In the lecture we have encountered three 2D machines, namely the laser cutter, vinyl cutter and the Digital Embroider. This week’s assignment suggested that we use at least two of the above mentioned machines to fabricate physical objects. Before fabrication, we first had to design the objects using Adobe Illustrator and save them as SVG files.

For this week’s exercise I decided to use all three of the machines as well as create three different designs for each. While I used the laser cutter before, I did not do it on my own. So this week, I wanted to get familiar with the whole process, from design to fabrication. I wanted to use this opportunity to get familiar and comfortable with all three machines, as well as practice designing objects in the Adobe Illustrator.

LASER CUTTER:

Design:

I wanted to make a stamp, and keep it simple, consisting of simple shapes that overlapped. I decided to design a teddy bear stamp by using circles and overlapping them. However, I wanted to keep the lines separating its legs and head from the body, and this became a bit more challenging, given my experience in the illustrator. I used 0.1 stroke where I needed to cut, and red fill where I wished to engrave. The final design looked like this:

 

Fabrication:

I chose the size of the design to be 5cm in diameter because I already had an ink box in mind. I made an ink box from an old catnip container that happened to have two lids. I tightly closed one lid, cutting the container just under the lid, then I sanded down this part and used the second lid to close the container from this side.

Then I used some window insulation tape to cover the inside of the container. Because window insulation tape is made out of sponge I could use this to store ink for the stamp. Bellow is the picture of the finished ink box.

 

I fabricated the stamp using the laser cutter. I first prepared the file by setting the art-board to be the size of the cutting bed in the laser cutter ( 24 x 18 inches). I configured the laser settings automatically by selecting rubber as my fabrication material. For the first round of laser cutting I selected the option that combined both Vector and Raster. Once my file was ready, i turned on the laser cutter as well as the fan and the compressor. Then I clicked print and the file was sent to the laser cutter. I pressed start on the machine and the process began. 

 

After the process was over, I selected Raster without Vector and sent the file again to the machine. Then, I pressed start and repeated the process five times. I wanted to make sure that the engraved part is deep enough for a stamp. I would prefer the engraving to be a bit deeper than the way it turned out, but I was also worried that the material might get overheated and start to burn. Once I was done, I turned off the machine, the fan and the compressor. The stamps made are in the picture below. I only had calligraphy water based ink, but if I used acrylic paint I think the stamp would turn out much better. Also, using wood as the stamp material should work well with calligraphy ink. 

 

VINYL CUTTER:

Design:

The object which I had in mind was a steaming cup of coffee. I wanted to practice designing objects in illustrator, and the idea for this sticker came as a result of me having my morning coffee (which I can not live without). For this design I started to add anchor points to a square and shape it into a cup like object. Then I used the same method to shape circles into a handle, top part of the cup and smoke, as well as shape triangles into hearts. I encountered some issues using the fill option, as the handle hole would disappear. But I fixed this by working on a handle separately, and using fill on it, and only then adding it to the cup and grouping the whole object together. The design can be seen below.

 

Fabrication:

After the design was ready I saved it as an SVG file. Then I used the program called Canvas Workspace to import this file and export it as an .fcn file. I saved this file onto a USB and moved it to the vinyl cutter machine. Before I began to cut the sticker, I adjusted the knife to 3mm and loaded material onto the no slip cutting mat, making sure it is larger than the sticker size. Then, I opened the file on the USB, adjusted its position on the mat, loaded the mat and pressed cut. After the sticker was finished. I covered it with a patch of other sticker paper, to insure that everything stays in the same place, then I placed the sticker onto my computer. The only material color available was gray, but I think black would have been a better choice especially given that my computer color is also gray.

  —————->                 

 

DIGITAL EMBROIDER

Design:

Recently I finished knitting a hat for a friend, who loves to ski. I thought I could embroider a badge and place it onto the hat. I based the design on the following picture:

This design was the most challenging of the three. I created multiple layers and worked on separate parts. I first did the skis, then i did the body without arms. I did the arms and hands. Then, I did the ski poles, followed by a layer for the mask and boots. I wanted to make the badge a little more personal, so I wrote “Some Christians like to ski!”. Which was a funny play on words given that my friends name is Christian.  Below is the finished and grouped design.

Fabrication: 

Once I had an SVG file with my design, I used a program called Stitch ERA Universal to convert the lines made in the Illustrator into stitches. After creating the stitches, I exported the file in Embroidery Machine Format (.PES). Then I prepared the hoop and fabric. I later opened the .PES file in another program called Futura Software, where I selected an appropriate hoop to make sure the design fits its size. Lastly, I sent the design to the Embroidery Machine.  Once the file was sent, I prepared the machine. First, I checked the bottom thread to make sure there was enough. Then I chose the main thread color and installed it. I held the main tread as I pressed the start/stop button. After few stitches, I pressed the stop button and cut the excess thread, resuming the process. Bellow is the video of the process and the final product. The writing did not turn out well, so I tried removing it from the Illustrator design and adding it in the Futura Software. This worked better, but it was still not perfectly clear. Maybe experimenting with fonts and font sizes would be ideal for understanding how text might turn out.

 

Overall, I think I learned a lot in the process and improved my illustrator design skills. In particular I liked the embroidery machine best.

 

FINAL PROJECT DOCUMENTATION_ Milica Gligic

Class: Interaction Lab

Professor: Marcela Godoy

Student: Milica Gligic

05.13.2018

THE IDEA AND OVERVIEW:

I got the idea for this game from a computer game called Mine Sweeper. Growing up, I found this game very frustrating, and I wanted to recreate it with some kind of assistance. I wanted to make this game a little less frustrating and more fun for those who are not so familiar with it. Originally,  I wanted to 3D print an emoji character who would aid the player during game play. However, I later decided to use a buzzer instead. The buzzer sound would intensify as the mouse got closer to a mine.  After coming across a picture of a Mine Sweeper game in the shape of USA,  as a Bosnian citizen I thought it would be funny to use a Bosnian map. However, I also wanted to give a little bit of context for those unfamiliar with Bosnian mine situation. For this reason, I included the text once the game was finished.

To win the game, one needs to uncover the area around all mines (numbers 1,2,3). If a player accidentally uncovers a mine box, he will lose the game.

 

MATERIALS:

  1. An Arduino Uno                           5. Cardboard
  2. USB A to B cable,                         6. Tape.
  3. Hook-up wires,                             7. Hot-glue
  4. One buzzer,

CODE AND CIRCUIT BUILDING

  • Mask VS PNG images. 

Before I started writing the code, I wanted make sure that I will be able to create a game in the shape of Bosnia. After consulting a TA, I decided that the best way to go about doing this was to use a mask. Even after looking up the instructions on the processing website, I could not successfully set up a mask. Given that I had some experience in Photoshop, I decided to use the following image to create a 3200×1800 background for my project.
I cropped out the black part and created the three screens you have already seen above. For these screens, I used few other images which I retained from google images. The following are the mentioned images:

                                                      

 

  • PROCESSING CODE (Drawing the Boxes)

At the beginning I used a simple white background image, as I found it easier to work with. But I later supplemented that image with the three above mentioned screens. For each box to appear once clicked as number 1,2,3, 0,  or a bomb, and for each of them to send a different value to the Arduino if the mouse is positioned on the box, I needed to map each box and its mouseX and mouseY position. The whole Processing and the Arduino code is available below, so I will not discuss the technicalities.

One major issue with my code is that it is long and inefficient. I could not think of any way to loop through the MineSweeper map, mainly because I could not find any pattern. I also decided to use a single Mine Sweeper map rather than randomly generate a new one each time. I did this to make the project more manageable given the amount of time I had. Once, I had decided on the map, I wrote and tested the code for each number.

 

  • ARDUINO CODE (Adding Sound )

Originally I wanted to use an mp3 player to play four tracks with different speed and frequency. However, after talking to professor Marcela, she suggested that a simple buzzer would be suited for the task. In order to get a desired sound, I used a millis function to determine an interval. I also used a delay to  determine how closely together the sound is created.

The hardest part about establishing the serial communication was also the most trivial mistake that a couple of TAs and I struggled to find for hours. When sending the information to Arduino I wrote “A”, “B”, “C”, “D” ,”E” ,”F”, rather than ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’.  My understanding is that serial communication sends one bit at a time, and using “A” implies that you are sending a character rather than a single bit. I feel like we learned this in class, after this I will for sure remember it.

 

  • Building The Circuit and Designing The Physical Object

Building the circuit was very easy, all I needed to do was connect the positive side of the buzzer to a digital output pin and the negative side to GND. I soldered two longer wires to the buzzer and isolated them. I also used hot glue to insure that the wires are not going to come loose from the Arduino. Then I turned to making the physical object. The design for the object is based on a radiation measuring device rather than a metal detector used in demining. I went with this design because designing something more complex would distract from the game in processing.

 

 

 

 

 

 

USER TESTING AND MODIFICATIONS WHICH CAME LATER

I saw participation in the IMA show as a great way to get some user feedback. During the show my game did not work properly, it was impossible to win. Many liked the audio aid which came with the game. I did not account for the loudness of the room, so I had to modify the sound interval and delay to compensate for the noise.

An obvious issue which many pointed out was lag. The lag could be due to the long code or use of delay in Arduino. I was cautious to use minimal delay and the buzzer had worked well initially. So, another reason for the “lag” could be the fact that I had used mousePressed rather than mouseClicked(). If I was to use mouseClicked() some of the box display lag would most likely be resolved.

Most users did not know which boxes in the corners were active and which ones were just there. Some boxes were mostly visible while others were barely present. This was something I also struggled with. In fact, this was the main reason why it was impossible to win the game.For this reason I reassigned the values to the boxes and covered ambiguous spots. This was the result:

After fixing the corner issue, a player could actually win the game if she was to open each box without opening a mine box. Given the time it takes to open 96 boxes, I decided to change the rules of winning. Now , you only need to open boxes with numbers 1,2 and 3 in order to win the game. In other words, you need to open the boxes which are next to a mine. Below I have attached a video of a winning game.

 

IF I HAD MORE TIME:

If I had more time I would most likely add an explosion sound which would play if a bomb is pressed. Maybe also a winning sound. I would also add a stop watch, a feature typical of a mine sweeper game. These would be some small things on which I would like to work, but above all I would try to make the code more efficient.

 

 

//PROCESSING CODE

import processing.serial.*;
//import processing.sound.*;
//SoundFile explosion;


int check=0;
//String path;


Serial myPort;
PImage img;
PImage img2;
PImage img3;

int[] check_values = new int[96]; 
// check_values[0]= boom ; check_values[1-49]=1 ; check _values[50-69]= 2 ; 
//check _values [70-75]= 3; check _values [76-95]= 0
int[] check_values_x = new int[96]; //x location
int[] check_values_y = new int[96];  // y location

int[] positionX = new int[16];
int[] positionY = new int[16];
int x = 400;
int y = 200;
int rectSize= 100;
float locationX= mouseX;
float locationY= mouseY;

void setup() {
  //BACKGROUND SETUP
  background(0);
  img=loadImage("img_t1.png");
  img2=loadImage("img_t2.png");
  img3=loadImage("img_t3.png");
  //path = sketchPath("explosion1");
  //explosion = new SoundFile(this, path);
  size(3200, 1800);

  //printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.
  myPort = new Serial(this, Serial.list()[0], 9600);


  for (int i=0; i<positionX.length; i++) {
    positionX[i]= x;
    x=x+100;
  }
  for (int i=0; i<positionY.length; i++) {
    positionY[i]= y;
    y = y+100;
  }
  for (int i=0; i<check_values.length; i++) {
    check_values[i]=0;
  }
  for (int i=0; i<check_values_x.length; i++) {
    check_values_x[i]=0;
  }
  for (int i=0; i<check_values_y.length; i++) {
    check_values_y[i]=0;
  }
  for (int x=0; x<width; x+= rectSize) {
    for (int y=0; y<height; y+= rectSize) {
      fill(#959191);
      noStroke();
      triangle(x, y, x+rectSize, y, x, y+rectSize  );
      fill(#959191);
      noStroke();
      triangle(x+rectSize-10, y, x+rectSize-10, y+rectSize-10, x, y+rectSize-10);
      fill(#C4C0C0);
      strokeWeight(1);
      stroke(255);
      rect(x, y, rectSize-25, rectSize-25);
    }
  }
}


// \\\\\\\\
// \\\\\\\\
//CHECKING FOR MOUSE POSITION//



void draw() {
  //println(positionX[1]);
  locationX= mouseX;
  locationY= mouseY;
  
  //FIXES THE SIDES so it is clear which boxes can be clicked
  fill(#E51515);
  noStroke();
  rect(positionX[0], positionY[1], 100, 300);
  rect(positionX[1], positionY[4], 100, 100);
  rect(positionX[6], positionY[1], 600, 100);
  rect(positionX[12], positionY[2], 600, 100);
  rect(positionX[2], positionY[6], 100, 200);
  rect(positionX[3], positionY[8], 100, 100);
  rect(positionX[4], positionY[9], 100, 100);
  rect(positionX[5], positionY[10], 100, 100);
  rect(positionX[6], positionY[11], 100, 100);
  rect(positionX[7], positionY[12], 100, 200);
  rect(positionX[8], positionY[13], 100, 100);
  rect(positionX[9], positionY[14], 100, 100);
  rect(positionX[11], positionY[12], 100, 300);
  rect(positionX[12], positionY[12], 100, 100);
  rect(positionX[12], positionY[11], 200, 100);
  rect(positionX[13], positionY[10], 100, 200);
  rect(positionX[14], positionY[1], 100, 600);
  rect(positionX[13], positionY[5], 100, 100);
  rect(positionX[15], positionY[6], 100, 400);
  image(img, 0, 0);

  //textSize(32);//
  //fill(#1FB43B);
  //text( "x: " + locationX + " y: " + locationY, locationX, locationY );


  ////////////////////////////////////////////////////////////////CHECK VALUE ASSIGNMENT


  // Check values for Bombs
  if (((locationX>=positionX[1] && locationX<positionX[1]+100) && (locationY>=positionY[1] && locationY<positionY[1]+100))
    || ((locationX>=positionX[1] && locationX<positionX[1]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100))
    || ((locationX>=positionX[3] && locationX<positionX[3]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100))
    || ((locationX>=positionX[5] && locationX<positionX[5]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100))
    || ((locationX>=positionX[5] && locationX<positionX[5]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100))
    || ((locationX>=positionX[6] && locationX<positionX[6]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100))
    || ((locationX>=positionX[6] && locationX<positionX[6]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100))
    || ((locationX>=positionX[6] && locationX<positionX[6]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100))
    || ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[9] && locationY<positionY[9]+100))
    || ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100))
    || ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[9] && locationY<positionY[9]+100))
    || ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[10] && locationY<positionY[10]+100))
    || ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[13] && locationY<positionY[13]+100))
    || ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100))
    || ((locationX>=positionX[11] && locationX<positionX[11]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100))
    || ((locationX>=positionX[11] && locationX<positionX[11]+100) && (locationY>=positionY[11] && locationY<positionY[11]+100))
    || ((locationX>=positionX[12] && locationX<positionX[12]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) 
    || ((locationX>=positionX[12] && locationX<positionX[12]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100))
    || ((locationX>=positionX[12] && locationX<positionX[12]+100) && (locationY>=positionY[10] && locationY<positionY[10]+100))) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[0]=5;
    } else {
      myPort.write('A');
    }


    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    ///// NUMBER 1 CHECK
  } else if ((locationX>=positionX[1] && locationX<positionX[1]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[1]=1;
      check_values_x[1]=positionX[1];
      check_values_y[1]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[2] && locationX<positionX[2]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[2]=1;
      check_values_x[2]=positionX[2];
      check_values_y[2]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[2] && locationX<positionX[2]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[3]=1;
      check_values_x[3]=positionX[2];
      check_values_y[3]=positionY[4];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[2] && locationX<positionX[2]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[4]=1;
      check_values_x[4]=positionX[2];
      check_values_y[4]=positionY[5];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[3] && locationX<positionX[3]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[5]=1;
      check_values_x[5]=positionX[3];
      check_values_y[5]=positionY[4];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[3] && locationX<positionX[3]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[6]=1;
      check_values_x[6]=positionX[3];
      check_values_y[6]=positionY[6];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[4] && locationX<positionX[4]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[7]=1;
      check_values_x[7]=positionX[4];
      check_values_y[7]=positionY[4];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[4] && locationX<positionX[4]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[8]=1;
      check_values_x[8]=positionX[4];
      check_values_y[8]=positionY[5];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[5] && locationX<positionX[5]+100) && (locationY>=positionY[1] && locationY<positionY[1]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[9]=1;
      check_values_x[9]=positionX[5];
      check_values_y[9]=positionY[1];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[5] && locationX<positionX[5]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[10]=1;
      check_values_x[10]=positionX[5];
      check_values_y[10]=positionY[2];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[5] && locationX<positionX[5]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[11]=1;
      check_values_x[11]=positionX[5];
      check_values_y[11]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[5] && locationX<positionX[5]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[12]=1;
      check_values_x[12]=positionX[5];
      check_values_y[12]=positionY[4];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[5] && locationX<positionX[5]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[13]=1;
      check_values_x[13]=positionX[5];
      check_values_y[13]=positionY[5];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[5] && locationX<positionX[5]+100) && (locationY>=positionY[9] && locationY<positionY[9]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[14]=1;
      check_values_x[14]=positionX[5];
      check_values_y[14]=positionY[9];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[6] && locationX<positionX[6]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[15]=1;
      check_values_x[15]=positionX[6];
      check_values_y[15]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[6] && locationX<positionX[6]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[16]=1;
      check_values_x[16]=positionX[6];
      check_values_y[16]=positionY[4];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[6] && locationX<positionX[6]+100) && (locationY>=positionY[9] && locationY<positionY[9]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[17]=1;
      check_values_x[17]=positionX[6];
      check_values_y[17]=positionY[9];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[7] && locationX<positionX[7]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[18]=1;
      check_values_x[18]=positionX[7];
      check_values_y[18]=positionY[2];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[7] && locationX<positionX[7]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[19]=1;
      check_values_x[19]=positionX[7];
      check_values_y[19]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[7] && locationX<positionX[7]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[20]=1;
      check_values_x[20]=positionX[7];
      check_values_y[20]=positionY[4];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[7] && locationX<positionX[7]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[21]=1;
      check_values_x[21]=positionX[7];
      check_values_y[21]=positionY[5];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[7] && locationX<positionX[7]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[22]=1;
      check_values_x[22]=positionX[7];
      check_values_y[22]=positionY[7];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[7] && locationX<positionX[7]+100) && (locationY>=positionY[9] && locationY<positionY[9]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[23]=1;
      check_values_x[23]=positionX[7];
      check_values_y[23]=positionY[9];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[7] && locationX<positionX[7]+100) && (locationY>=positionY[10] && locationY<positionY[10]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[24]=1;
      check_values_x[24]=positionX[7];
      check_values_y[24]=positionY[10];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[25]=1;
      check_values_x[25]=positionX[8];
      check_values_y[25]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[26]=1;
      check_values_x[26]=positionX[8];
      check_values_y[26]=positionY[4];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[27]=1;
      check_values_x[27]=positionX[8];
      check_values_y[27]=positionY[5];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[11] && locationY<positionY[11]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[28]=1;
      check_values_x[28]=positionX[8];
      check_values_y[28]=positionY[11];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[12] && locationY<positionY[12]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[29]=1;
      check_values_x[29]=positionX[8];
      check_values_y[29]=positionY[12];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[30]=1;
      check_values_x[30]=positionX[9];
      check_values_y[30]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[31]=1;
      check_values_x[31]=positionX[9];
      check_values_y[31]=positionY[6];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[11] && locationY<positionY[11]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[32]=1;
      check_values_x[32]=positionX[9];
      check_values_y[32]=positionY[11];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[12] && locationY<positionY[12]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[33]=1;
      check_values_x[33]=positionX[9];
      check_values_y[33]=positionY[12];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[34]=1;
      check_values_x[34]=positionX[10];
      check_values_y[34]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[35]=1;
      check_values_x[35]=positionX[10];
      check_values_y[35]=positionY[6];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[36]=1;
      check_values_x[36]=positionX[10];
      check_values_y[36]=positionY[7];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[13] && locationY<positionY[13]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[37]=1;
      check_values_x[37]=positionX[10];
      check_values_y[37]=positionY[13];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[14] && locationY<positionY[14]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[38]=1;
      check_values_x[38]=positionX[10];
      check_values_y[38]=positionY[14];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[11] && locationX<positionX[11]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[39]=1;
      check_values_x[39]=positionX[11];
      check_values_y[39]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[11] && locationX<positionX[11]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[40]=1;
      check_values_x[40]=positionX[11];
      check_values_y[40]=positionY[6];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[12] && locationX<positionX[12]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[41]=1;
      check_values_x[41]=positionX[12];
      check_values_y[41]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[12] && locationX<positionX[12]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[42]=1;
      check_values_x[42]=positionX[12];
      check_values_y[42]=positionY[5];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[12] && locationX<positionX[12]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[43]=1;
      check_values_x[43]=positionX[12];
      check_values_y[43]=positionY[6];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[13] && locationX<positionX[13]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[44]=1;
      check_values_x[44]=positionX[13];
      check_values_y[44]=positionY[3];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[13] && locationX<positionX[13]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[45]=1;
      check_values_x[45]=positionX[13];
      check_values_y[45]=positionY[4];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[13] && locationX<positionX[13]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[46]=1;
      check_values_x[46]=positionX[13];
      check_values_y[46]=positionY[6];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[13] && locationX<positionX[13]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[47]=1;
      check_values_x[47]=positionX[13];
      check_values_y[47]=positionY[7];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[13] && locationX<positionX[13]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[48]=1;
      check_values_x[48]=positionX[13];
      check_values_y[48]=positionY[8];
    } else {
      myPort.write('B');
    }
  } else if ((locationX>=positionX[13] && locationX<positionX[13]+100) && (locationY>=positionY[9] && locationY<positionY[9]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[49]=1;
      check_values_x[49]=positionX[13];
      check_values_y[49]=positionY[9];
    } else {
      myPort.write('B');
    }



    //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   //222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
    // NUMBER 2

  } else if ((locationX>=positionX[2] && locationX<positionX[2]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[50]=2;
      check_values_x[50]=positionX[2];
      check_values_y[50]=positionY[2];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[4] && locationX<positionX[4]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[51]=2;
      check_values_x[51]=positionX[4];
      check_values_y[51]=positionY[6];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[4] && locationX<positionX[4]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[52]=2;
      check_values_x[52]=positionX[4];
      check_values_y[52]=positionY[7];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[4] && locationX<positionX[4]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[53]=2;
      check_values_x[53]=positionX[4];
      check_values_y[53]=positionY[8];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[7] && locationX<positionX[7]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[54]=2;
      check_values_x[54]=positionX[7];
      check_values_y[54]=positionY[6];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[7] && locationX<positionX[7]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[55]=2;
      check_values_x[55]=positionX[7];
      check_values_y[55]=positionY[8];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[56]=2;
      check_values_x[56]=positionX[8];
      check_values_y[56]=positionY[8];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[57]=2;
      check_values_x[57]=positionX[9];
      check_values_y[57]=positionY[5];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[58]=2;
      check_values_x[58]=positionX[9];
      check_values_y[58]=positionY[8];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[59]=2;
      check_values_x[59]=positionX[10];
      check_values_y[59]=positionY[4];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[60]=2;
      check_values_x[60]=positionX[10];
      check_values_y[60]=positionY[8];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[11] && locationY<positionY[11]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[61]=2;
      check_values_x[61]=positionX[10];
      check_values_y[61]=positionY[11];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[12] && locationY<positionY[12]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[62]=2;
      check_values_x[62]=positionX[10];
      check_values_y[62]=positionY[12];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[11] && locationX<positionX[11]+100) && (locationY>=positionY[4] && locationY<positionY[4]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[63]=2;
      check_values_x[63]=positionX[11];
      check_values_y[63]=positionY[4];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[11] && locationX<positionX[11]+100) && (locationY>=positionY[5] && locationY<positionY[5]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[64]=2;
      check_values_x[64]=positionX[11];
      check_values_y[64]=positionY[5];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[11] && locationX<positionX[11]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[65]=2;
      check_values_x[65]=positionX[11];
      check_values_y[65]=positionY[7];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[11] && locationX<positionX[11]+100) && (locationY>=positionY[9] && locationY<positionY[9]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[66]=2;
      check_values_x[66]=positionX[11];
      check_values_y[66]=positionY[9];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[11] && locationX<positionX[11]+100) && (locationY>=positionY[10] && locationY<positionY[10]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[67]=2;
      check_values_x[67]=positionX[11];
      check_values_y[67]=positionY[10];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[12] && locationX<positionX[12]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[68]=2;
      check_values_x[68]=positionX[12];
      check_values_y[68]=positionY[8];
    } else {
      myPort.write('C');
    }
  } else if ((locationX>=positionX[12] && locationX<positionX[12]+100) && (locationY>=positionY[9] && locationY<positionY[9]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[69]=2;
      check_values_x[69]=positionX[12];
      check_values_y[69]=positionY[9];
    } else {
      myPort.write('C');
    }



    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    // 33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333
    /// Checking for 3 s
  } else if ((locationX>=positionX[5] && locationX<positionX[5]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[70]=3;
      check_values_x[70]=positionX[5];
      check_values_y[70]=positionY[6];
    } else {
      myPort.write('D');
    }
  } else if ((locationX>=positionX[6] && locationX<positionX[6]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[71]=3;
      check_values_x[71]=positionX[6];
      check_values_y[71]=positionY[6];
    } else {
      myPort.write('D');
    }
  } else if ((locationX>=positionX[6] && locationX<positionX[6]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[72]=3;
      check_values_x[72]=positionX[6];
      check_values_y[72]=positionY[8];
    } else {
      myPort.write('D');
    }
  } else if ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[10] && locationY<positionY[10]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[73]=3;
      check_values_x[73]=positionX[8];
      check_values_y[73]=positionY[10];
    } else {
      myPort.write('D');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[9] && locationY<positionY[9]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[74]=3;
      check_values_x[74]=positionX[10];
      check_values_y[74]=positionY[9];
    } else {
      myPort.write('D');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[10] && locationY<positionY[10]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[75]=3;
      check_values_x[75]=positionX[10];
      check_values_y[75]=positionY[10];
    } else {
      myPort.write('D');
    }



    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
    /// EMPTY BOXES 0s
  } else if ((locationX>=positionX[3] && locationX<positionX[3]+100) && (locationY>=positionY[1] && locationY<positionY[1]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[76]=4;
      check_values_x[76]=positionX[3];
      check_values_y[76]=positionY[1];
    } else {
      myPort.write('E');
    }
  } else  if ((locationX>=positionX[3] && locationX<positionX[3]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[77]=4;
      check_values_x[77]=positionX[3];
      check_values_y[77]=positionY[2];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[3] && locationX<positionX[3]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[78]=4;
      check_values_x[78]=positionX[3];
      check_values_y[78]=positionY[3];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[3] && locationX<positionX[3]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[79]=4;
      check_values_x[79]=positionX[3];
      check_values_y[79]=positionY[7];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[4] && locationX<positionX[4]+100) && (locationY>=positionY[1] && locationY<positionY[1]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[80]=4;
      check_values_x[80]=positionX[4];
      check_values_y[80]=positionY[1];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[4] && locationX<positionX[4]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[81]=4;
      check_values_x[81]=positionX[4];
      check_values_y[81]=positionY[2];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[4] && locationX<positionX[4]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[82]=4;
      check_values_x[82]=positionX[4];
      check_values_y[82]=positionY[3];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[6] && locationX<positionX[6]+100) && (locationY>=positionY[10] && locationY<positionY[10]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[83]=4;
      check_values_x[83]=positionX[6];
      check_values_y[83]=positionY[10];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[7] && locationX<positionX[7]+100) && (locationY>=positionY[11] && locationY<positionY[11]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[84]=4;
      check_values_x[84]=positionX[7];
      check_values_y[84]=positionY[11];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[85]=4;
      check_values_x[85]=positionX[8];
      check_values_y[85]=positionY[2];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[6] && locationY<positionY[6]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[86]=4;
      check_values_x[86]=positionX[8];
      check_values_y[86]=positionY[6];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[8] && locationX<positionX[8]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[87]=4;
      check_values_x[87]=positionX[8];
      check_values_y[87]=positionY[7];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[88]=4;
      check_values_x[88]=positionX[9];
      check_values_y[88]=positionY[2];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[9] && locationX<positionX[9]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[89]=4;
      check_values_x[89]=positionX[9];
      check_values_y[89]=positionY[7];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[10] && locationX<positionX[10]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[90]=4;
      check_values_x[90]=positionX[10];
      check_values_y[90]=positionY[2];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[11] && locationX<positionX[11]+100) && (locationY>=positionY[2] && locationY<positionY[2]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[91]=4;
      check_values_x[91]=positionX[11];
      check_values_y[91]=positionY[2];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[14] && locationX<positionX[14]+100) && (locationY>=positionY[3] && locationY<positionY[3]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[92]=4;
      check_values_x[92]=positionX[14];
      check_values_y[92]=positionY[3];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[14] && locationX<positionX[14]+100) && (locationY>=positionY[7] && locationY<positionY[7]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[93]=4;
      check_values_x[93]=positionX[14];
      check_values_y[93]=positionY[7];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[14] && locationX<positionX[14]+100) && (locationY>=positionY[8] && locationY<positionY[8]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[94]=4;
      check_values_x[94]=positionX[14];
      check_values_y[94]=positionY[8];
    } else {
      myPort.write('E');
    }
  } else if ((locationX>=positionX[14] && locationX<positionX[14]+100) && (locationY>=positionY[9] && locationY<positionY[9]+100)) {
    if (mousePressed && mouseButton == LEFT) {
      check_values[95]=4;
      check_values_x[95]=positionX[14];
      check_values_y[95]=positionY[9];
    } else {
      myPort.write('E');
    }
  } else {
    myPort.write('F');
  }



  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  /////////////////////////////////////////////         DRAW  OBJECTS    DRAW  OBJECTS    DRAW  OBJECTS    DRAW  OBJECTS     DRAW  OBJECTS    DRAW  OBJECTS 
  /// DRAW the objects
  for (int i=0; i<check_values.length; i++) {
    if (check_values[i]==1) {
      num_1(check_values_x[i], check_values_y[i]);
      image(img, 0, 0);
    } 
    if (check_values[i]==2) {
      num_2(check_values_x[i], check_values_y[i]);
      image(img, 0, 0);
    }

    if (check_values[i]==3) {
      num_3(check_values_x[i], check_values_y[i]);
      image(img, 0, 0);
    }
    if (check_values[i]==4) {
      num_4(check_values_x[i], check_values_y[i]);
      image(img, 0, 0);
    }
  }
  if (check_values[0]==5) {
    check=1;
  }
  if (check==1) {
    boom_display(positionX[1], positionY[1]);
    boom_display(positionX[1], positionY[2]);
    boom_display(positionX[3], positionY[5]);
    boom_display(positionX[5], positionY[7]);
    boom_display(positionX[5], positionY[8]);
    boom_display(positionX[6], positionY[2]);
    boom_display(positionX[6], positionY[5]);
    boom_display(positionX[6], positionY[7]);
    boom_display(positionX[8], positionY[9]);
    boom_display(positionX[9], positionY[4]);
    boom_display(positionX[9], positionY[9]);
    boom_display(positionX[9], positionY[10]);
    boom_display(positionX[9], positionY[13]);
    boom_display(positionX[10], positionY[5]);
    boom_display(positionX[11], positionY[8]);
    boom_display(positionX[11], positionY[11]);
    boom_display(positionX[12], positionY[4]);
    boom_display(positionX[12], positionY[7]);
    boom_display(positionX[12], positionY[10]);
    check = 1;
    image(img2, 0, 0);
  }
  if (check_values[0]==0 && check_values[1]==1 && check_values[2]==1  && check_values[3]==1  &&
    check_values[4]==1  && check_values[5]==1  && check_values[6]==1  &&
    check_values[7]==1  && check_values[8]==1  && check_values[9]==1  && check_values[10]==1 && 
    check_values[11]==1  && check_values[12]==1  && check_values[13]==1  &&
    check_values[14]==1  && check_values[15]==1  && check_values[16]==1  && check_values[17]==1 && 
    check_values[18]==1  && check_values[19]==1  && check_values[20]==1  &&
    check_values[21]==1  && check_values[22]==1  && check_values[23]==1  && check_values[24]==1 && 
    check_values[25]==1  && check_values[26]==1  && check_values[27]==1  &&
    check_values[28]==1  && check_values[29]==1  && check_values[30]==1  && check_values[31]==1  && 
    check_values[32]==1  && check_values[33]==1  && check_values[34]==1  &&
    check_values[35]==1  && check_values[36]==1  && check_values[37]==1  && check_values[38]==1 && 
    check_values[39]==1 && check_values[40]==1 && check_values[41]==1 && check_values[42]==1 && 
    check_values[43]==1 && check_values[44]==1 && check_values[45]==1 && check_values[46]==1 &&
    check_values[47]==1 && check_values[48]==1 && check_values[49]==1 &&
    check_values[50]==2 && check_values[51]==2 && check_values[52]==2 && 
    check_values[53]==2 && check_values[54]==2 && check_values[55]==2 && 
    check_values[56]==2 && check_values[57]==2 && check_values[58]==2 && 
    check_values[59]==2 && check_values[60]==2 && check_values[61]==2 && 
    check_values[62]==2 && check_values[63]==2 && check_values[64]==2 &&
    check_values[65]==2 && check_values[66]==2 && 
    check_values[67]==2 && check_values[68]==2 && check_values[69]==2 && 
    check_values[70]==3 && check_values[71]==3 && check_values[72]==3 && check_values[73]==3 && check_values[74]==3 && check_values[75]==3){
    // check for 0s clicked
    //check_values[76]==4 && check_values[77]==4 && check_values[78]==4 && check_values[79]==4 && check_values[80]==4 &&
    //check_values[81]==4 && check_values[82]==4 && check_values[83]==4 && check_values[84]==4 && check_values[85]==4 &&
    //check_values[86]==4 && check_values[87]==4 && check_values[88]==4 && check_values[89]==4 && check_values[90]==4 && 
    //check_values[91]==4 && check_values[92]==4 && check_values[93]==4 && check_values[94]==4 && check_values[95]==4) {
    check=2;
  }

  if (check==2) {
    image(img3, 0, 0);
  }
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// FUNCTIONS FOR DRAWING SQUARES 
void boom_display(int xp, int yp) {
  strokeWeight(2);
  stroke(0);
  fill(#AFAFAF);
  rect(xp, yp, 100, 100);
  strokeWeight(10);
  fill(0);
  line(xp + 80, yp + 20, xp + 20, yp + 80);
  fill(#D82323);
  line(xp + 20, yp + 20, xp + 80, yp +80);
  strokeWeight(1);
  stroke(0);
  fill(#D82323);
  ellipse(xp + 50, yp + 50, 60, 60);
  textSize(25);
  strokeWeight(5);
  fill(255);
  text("BOOM!!!", xp + 10, yp + 55);
}
void num_1(int xp, int yp) {
  strokeWeight(2);
  stroke(0);
  fill(#AFAFAF);
  rect(xp, yp, 100, 100);
  textSize(35);
  strokeWeight(7);
  fill(255);
  text("1", xp + 10, yp + 55);
}
void num_2(int xp, int yp) {
  strokeWeight(2);
  stroke(0);
  fill(#AFAFAF);
  rect(xp, yp, 100, 100);
  textSize(35);
  strokeWeight(7);
  fill(255);
  text("2", xp + 10, yp + 55);
}
void num_3(int xp, int yp) {
  strokeWeight(2);
  stroke(0);
  fill(#AFAFAF);
  rect(xp, yp, 100, 100);
  textSize(35);
  strokeWeight(7);
  fill(255);
  text("3", xp + 10, yp + 55);
}
void num_4(int xp, int yp) {
  strokeWeight(2);
  stroke(0);
  fill(#AFAFAF);
  rect(xp, yp, 100, 100);
}







// ARDUINO CODE

int valueFromProcessing;
int buzzerPin = 11;
bool beeping = false;
long previousMillis = 0;


void setup() {
  Serial.begin(9600);
  pinMode(buzzerPin, OUTPUT);
}


void loop() {
  // to receive a value from Processing
  while (Serial.available()) {
    valueFromProcessing = Serial.read();
  }

  if (valueFromProcessing == 'A') {
    beep( 100,0 );
    //beep( 1000);
  }else if (valueFromProcessing == 'B') { // CHECK VALUE 1
    beep( 20, 900 );
    //beep( 100);
  } else if (valueFromProcessing == 'C') { // CHECK VALUE 2
    beep( 20, 700 );
    // beep( 500);
  } else if (valueFromProcessing == 'D') { // CHECK VALUE 3
    //beep( 700);
    beep( 20, 650 );
  } else if (valueFromProcessing == 'F') { // CHECK VALUE noTone
    noTone(buzzerPin);

  }else if (valueFromProcessing == 'E') { //CHECK VALUE 4 (0)
    beep( 20, 1500 );
    //beep( 30 );
  }else{
    noTone(buzzerPin);
  }
}

void beep(long interval, int delayy ) {
  unsigned long currentMillis = millis();
  if (currentMillis - previousMillis >= interval) {
    previousMillis = currentMillis;
    beeping = !beeping;
  }
  if (beeping) {
    tone(buzzerPin, 40);

  } else {
    noTone(buzzerPin);
    delay(delayy);
  }
}



Week 12_Recitation Documentation 10_Milica Gligic

Class: Interaction Lab

Professor: Marcela Godoy

Student: Milica Gligic

Partner:  Alua Nursila

May 3, 2018

 

OVERVIEW:

During this recitation we worked in pairs to create a Processing sketch that controls some media element such as images, videos, audio etc., using a physical controller made with Arduino.

MATERIALS:

  1.  Arduino Uno

2.  Pieso Disc Vibration Sensor

3. Hook-up Wires

4. USB A to B cable

DOCUMENTATION:

We were given a list of sensors which we could use for the physical controller. My partner was I decided to use a Vibration sensor. We connected the red wire to the A0 port and the blue wire to the ground port.

We used the processing example provided during the recitation on serial communication. Then we added some code from an example from this week’s class. This allowed us to use the camera on the computer to import the video into processing. Then we used the data sent from the Arduino to pixelate the video when the vibration sensor value was greater than 80. You can find the code for both Arduino and Processing at the end of the post.

 

 

REFLECTION:

What we had built during this recitation was relatively simple. However, there was some dose of excitement and uncertainty while testing this media controller.  During this exercise I could not help but think about all kinds of photograph and video filters we have available on our digital devices. It has been interesting to read about all sorts of techniques of media control and technicalities behind some of at first sight simple interactions. In particular, I liked Jonah Warren’s full body interaction. For his Master’s thesis he worked on a mechanism which can detect body pixels, and identify what kind of an interaction the body had with a graphic object. His algorithm isolated three interactions: contact, overlap, and reflection. This technique has been used in Video games, where for instance some games like PlayStation Eye-Toy allowed the player to observe his own image inside of a virtual scene. I can only imagine how much more advanced media controllers will become with development of even better techniques for detecting, recognizing, sorting and interacting with people, as well as all kinds of objects.

 

///////////PROCESSING CODE///////////////////

import processing.serial.*;
import processing.video.*;
Capture cam;// source
int size = 15;//size of diameter of ellipse

Serial myPort;
int valueFromArduino;



void setup() {
 background(0);
 size (800, 450);
 cam = new Capture(this, 800, 450);
 cam.start();
 printArray(Serial.list());
 // this prints out the list of all available serial ports on your computer.
 myPort = new Serial(this, Serial.list()[3], 9600);
}



void draw() {
 // to read the value from the Arduino
 while ( myPort.available() > 0) {
 valueFromArduino = myPort.read();
 
 }
 if (cam.available()){
 cam.read();
 cam.loadPixels();//source
 }

image(cam, 0,0);// turn on the camera and display 
 for (int y = 0; y < cam.height; y+=size) {
 for (int x = 0; x < cam.width; x+=size) {
 int location = x +y * cam.width; // this is important!!!

float r = red(cam.pixels[location]);
 float g = green(cam.pixels[location]);
 float b = blue(cam.pixels[location]);

if (valueFromArduino >= 80 ) {
 fill (r, g, b);
 ellipse (x, y, size, size );
 //} else {
 // fill (g, r, b);
 // rect (x, y, size, size);
 //}
 }
 cam.updatePixels();//source
 }
}
}


/////////////////ARDUINO CODE///////

int VibrationSensor = A0;

// Assign a variable for sensor value
int SensorReading = 0;
void setup() {
 Serial.begin(9600);
 pinMode(VibrationSensor, INPUT);
}



void loop() {
 int SensorReading = analogRead(VibrationSensor) / 4;
 Serial.write(SensorReading);

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

Week 11_ Recitation Documentation 9_ Milica Gligic

Class: Interaction Lab

Professor: Marcela Godoy

Student: Milica Gligic

26.04.2018

OVERVIEW:

During this recitation we were given a choice to attend one of the three workshops offered. The three being: Soldering, Object Oriented Programming and Serial Communication. Given that I had previously dealt with soldering and serial communication, I wanted to learn more about Object Oriented Programming.

DOCUMENTATION AND REFLECTION: 

During this workshop we learned how to better organize our code by using multiple tabs, sorting code in specific classes, and creating functions which can later be called in multiple sections of the code. I found this workshop particularly useful because I can use these techniques to significantly reduce number of lines as well as make my code more clear and accessible. The code for my midterm project was already starting to get a bit too long and hard to navigate. I am expecting the same to be the case with the code I will be writing for my final project. For this reason, I will find this workshop particularly helpful.

As an assignment for this weeks recitation, we were also asked to create a class with and object which we wish to animate.  We were required to use at least two functions e.g. move and display.  I decided to use a preexisting processing example which makes a ball bounce. This is the link to that example: https://processing.org/examples/bounce.html .                                                               I reorganized the code and created a class called “Ball”. Then I played around with the number of balls displayed and their colors. The reason why I used this particular example is because I wanted to become more comfortable with boundary control, as I might be needing this for my final project. Below you can see the video of the working code, as well as find the actual code attached to the end of the post.

 

// MAIN CODE

Ball[] Ball_Array = new Ball[35];
  float Size;        // Width of the shape
  float x;
  float y;    // Starting position of shape    
  float xs;  // Speed of the shape
  float ys;  // Speed of the shape
  int xd;  // Left or Right
  int yd;  // Top to Bottom
  float c1;
  float c2;
  float c3;

void setup(){
  //background(0);
  size(3500, 1560);
  //noStroke();
  frameRate(30);
  for (int i=0; i<Ball_Array.length; i++) {
      // Set the starting position of the shape
      x= random(width);
      y = random(height);
      Size = random(150);
      xs=5;
      ys=10.8;
      xd=1;
      yd=1;
      c1 = random(255);
      c2 = random(255);
      c3 = random(255);
      
      Ball_Array[i]= new Ball(x, y, Size, xs, ys, xd, yd, c1, c2, c3); 
  }
}
void draw() {
  background(0);
  for(int i=0;i< Ball_Array.length;i++){
    Ball_Array[i].display();
    Ball_Array[i].move();
  }
}

// CLASS CODE (CLASS NAME "Ball")
class Ball {
  float size;        // Width of the shape
  float xpos;
  float ypos;    // Starting position of shape    
  float xspeed;  // Speed of the shape
  float yspeed;  // Speed of the shape
  int xdirection;  // Left or Right
  int ydirection;  // Top to Bottom
  float c11;
  float c22;
  float c33;
  
  Ball(float x, float y, float Size, float xs, float ys, int xd, int yd, float c1,float c2,float c3){
    size = Size;        // Width of the shape
    xpos = x;
    ypos = y;    // Starting position of shape    
    xspeed =xs;  // Speed of the shape
    yspeed = ys;  // Speed of the shape
    xdirection = xd;  // Left or Right
    ydirection = yd; 
    c11 = c1;
    c22 = c2;
    c33 = c3;
    
  }
  
  void display(){
    ellipseMode(RADIUS);
    fill(c11,c22,c33);
    ellipse(xpos, ypos, size, size);

  }
  
  void move() {
    xpos = xpos + ( xspeed * xdirection );
    ypos = ypos + ( yspeed * ydirection );

    // Test to see if the shape exceeds the boundaries of the screen
    // If it does, reverse its direction by multiplying by -1
    if (xpos > width-size || xpos < size) {
      xdirection *= -1;
    }
    if (ypos > height-size || ypos < size) {
      ydirection *= -1;
    }
  }
}

Week 10_ Recitation Documentation 8_ Milica Gligic

Class: Interaction Lab

Professor: Marcela Godoy

Student: Milica Gligic

Partner: Alua Nursila

19.04.2018

OVERVIEW:

During this week’s recitation, we were expected to use methods of digital fabrication to realize and construct a model. We were provided with a series of examples which we could use as an inspiration for our model. My partner and I used the following earrings design as a basis of our laser cut model. You can see the laser cut model on the right.                                                                       

 

DESIGN AND FABRICATION:

Give the nature of the object we were creating, we decided to use laser cutting rather than 3D printing. We could have had 3D printed the earrings, but laser cutter would anyway give us a desired thickness and it would be less time consuming. To design the model, we used Adobe illustrator. Navigating the program was at first rather challenging. However, after learning how to work with multiple layers, editing certain parts became much easier.

One of the challenges was that we did not understand the instructions correctly, so the distinctions between laser cut area and etched area was incorrect. After working on our design with professor Marcela, we learned that laser cutter will only recognize 0.1 stroke width as the line we would like to cut. The area we do not wish to etch should not be white, it must have no fill.  In order to etch an outline, we should use a line with a stroke width greater than 0.1. If we wish to etch the whole area, we should also use a fill. Good practice is to use red color to mark areas we want to etch, and black to mark areas we want to laser cut.

After laser cutting our model we realized that we had an extra 0.1 line. That is how we got the rings which you can see in the picture below. Having some extra parts, we decided to create a third set of earrings by using hot glue to connect the rings with the part from inside of the face cut.

 

REFLECTION AND DOCUMENTATION QUESTIONS

The laser cutter model in the IMA lab was  Epilog Laser Helix. After the file was sent to the printer there was not much to do but press start and let the laser do its thing. I found this process rather amusing, as the laser cutter would first etch and then cut. We had to repeat the process two times because the laser did not cut all the way through the first time. Given that the process was relatively fast, this was not a big setback. In the end I was rather satisfied with the outcome.

 

  1. Compare the crafting method you have been using so far for the Stupid Pet Tricks and Midterms with the ones used during this recitation. How do you think that these digital fabrication methods can help you for your Final Project?

For the two previous assignments I made all of the boxes by hand. The SPT box was relatively simple to make, so using a laser cutter would most likely require more effort given that we need to prepare the design document and make an appointment to access the machine. However, for the Midterm project I created two controllers. They were identical and they had 8 sides each. It would have been a lot easier and faster to laser cut the controller boxes, especially given that I would need to design only one box and repeat the process for the second one. For my final project I am planning to create a physical character, which I will most likely laser cut or 3D print. Without these digital fabrication methods creating the character I have in mind would be much more time consuming and less precise. Thus, digital fabrication methods could be said to be both more efficient and more precise methods of fabrication.

2. How does the reading “The Digital Fabrication Revolution” set the context to the work you did?

The reading argues that digital fabrication is the next big thing. It offers a brief history of the development of digital fabrication methods, and their role in different disciplines such as mechanical engineering, medicine and business. The reading suggests that the importance of digital fabrication methods lays in its potential to produce objects far more complex than something we could make by hand. Even though the model I had created is not very complex, I still do not think that I could cut it out with such ease and precision as the laser did. However, digital fabrication methods should not be understood as something which replaces the craftsmanship of a hand made object, but as a technology which can aid our creative processes.

3. If you were to imagine an assignment using digital fabrication at IMA in the year 2149, what would be different and what would be similar?

“The Digita Fabrication Revolution” reading claimed that “the aim [of digitam fabrication] is to not only produce the parts for a drone, for example, but to build a complete vehicle that can fly right out of the printer”(45). I am not sure if this will be achieved by 2149, or if there would be a need for complete removal of human labor, but I am sure digital fabrication machines will be much more affordable and developed. I can imagine databases filled with all kinds of objects people could print at their homes if they wished. So, in 2149 using a laser cutter or a 3D printer in college would be as easy as making a PPT. In other words, it will be a common knowledge. For this reason, I imagine that the assignment would be much more centered around making a good and desired design rather than teaching the students how to design and print an object.

 

 

 

 

Week 10_ Final Project Essay_ Milica Gligic

Class: Interaction Lab

Professor: Marcela Godoy

Student: Milica Gligic

15.04.2018

 

WHAT IS INTERACTIVITY?

Many confuse the idea of interaction with an idea of reaction, me being one of those people. I find it rather hard to identify when an object is interactive and when it is merely reactive. When I think of a reactive experience I think of a tennis wall. There is nothing about the wall that interacts with a tennis player, as the player is the one who ultimately determines the speed and the direction of the ball. Thus, a reaction could be said to involve an object/person which has an effect on some other object. However, in the cases where two or more objects have an effect on one another,  I find this process to be an interactive one. In other words, I believe that an interaction must involve a two-way effect, mutual communication and exchange of information. In this sense, reaction could be said to have a predictable causal relationship, while an interaction is more complex and to some extent unpredictable. It is much like playing chess, where your next move is in a close relationship with the opponent’s last and future move.

Video Gaming is one form of interaction, and the fact that I had never doubted its interactive nature only highlight the deeper issue with distinguishing between interactive and reactive experience. After being exposed to IMA, I would argue that traditional gaming is more reactive than interactive. Obviously first person/third person and online games had to some level increased the level of interaction, or at least added to our interactive experience, but it was only with the development of Wii console and virtual reality that video gaming had started to depart from being a predominantly reactive experience. In fact, I would argue that Pokemon Go was a revolutionary undertaking which had managed to bridge the real and virtual world in a way no game had done before. With this being said, I still struggle to define something as a purely interactive experience, but as long as we can identify reactive we will be able to strive for interactive.

FINAL PROJECT PROPOSAL

For my Final project I would like to create a “MineSweeper” like game. Growing up I found this game to be the most annoying and the most confusing. However, this game is relatively easy to play. That number represents how many mines are surrounding that square. The goal is to open all mine free spots. Now, when the probability of opening a mine spot is 50%50, it would be nice to have a buddy to help you out.

For this project I would send multiple values from arduino to processing. In processing I want to animate a character which would interact with the player and display the game (Ideally, I would like to laser cut or 3D print  the “little helper” and place a speaker inside of him). The player would open the box by pressing the button in that box. But if he points the flashlight to that box, the animated character would tell him what he thinks about that move choice ( an LED would also light up inside of the 3D character, Red for dangerous, Green for safe, and Yellow for I am not sure). I want to add the “I am not sure option” to evade complete reliance on the “little helper”. If the user would press the button with a bomb, the little helper would ask him if he wants to try again. If the user wins the game, little helper would ask him to high five (lifting his hand up, I might also use a UV sensor in the arm to tell if the person is actually giving him a high five….if not the little helper would say “ don’t leave me hanging”).

Having a physical character is obviously more interesting than simply having the helper displayed on the screen. If he lifts up his hand for a high five or says “ don’t leave me hanging”, he is mainly creating a reactive experience. However, what makes this project an interactive one, is that the user and the little helper are exchanging information and mutually affecting each others actions. Moreover, they are working together on solving the same task.