Computer vision

2F: Your first program

Creating the first sketch, the void Setup Size 200 by 200 is the size of your canvas. The Ellipse mode contains your different ellipses which are defined by the fill works with RGB notation. If you take the first ellipse you can see that its' center is 100 pixels from the left and 100 pixels from the top, the second one is 50 from the left and 50 from the top. The next to numbers is the with and height of the object drawn.

2I – Your second program

Different shapes and colours, one I had learned about the positioning it was This exercise were a bit challenging me on the first day as you can see I hid my triangle behind. So I tried something different tested drawing within 3D

For this used these sources and combined them into a 3D drawing of several shapes. Reference to https://processing.org/

The first step to creating the 3D box, is to have the right window settings in this case the regular screen size like in the previous example Height+Width doesn't work, it is needed to ad P3D as it adapts the canvas areas so that a 3D rendering can be displayed. The first drawing I made was without colour only the outline but I borrowed the fill line from the 3D sphere. Once I had the first shape, I proceeded to add a second shape, for this I tried to add it onto draw but would give an error as both the box and the sphere had the same mouse rotation setting it would result in the box first appearing then glitch and only the sphere would be visible. Removing the background, stroke and mouse interactions as well as sphere detail made it possible for the two 3D drawings to work on the same canvas. I also tried adding some 2D to the picture but these were a bit difficult to center more onto the canvas.

elipse1 _ Processing 3.5.4 2021-11-05 21-36-23.mp4

elipse1 _ Processing 3.5.4 2021-11-05 21-38-39.mp4

2-O

Whenever hovering over the initial ellipse it would keep producing more into the screen following the mouse.

elipse1 2021-11-05 21-04-45.mp4

3B: Processing to Arduino

The adapted codes below were the speaker was used as an output and the processing shapes and colours have been changed. Top righ the video and bottom right the original code. In the third example shown above the Arduino controller was synchronized with processing, This makes it possible to pass serial data from the Arduino code to send commands for the processing sketch. The serial read and serial available make the data available for transition between the Arduino and processing. From the side of processing a serial myPort has been added through their library to be able to read the data received from the Arduino. The processing code line 9 creates the object from the serial code library, while the string is in charge of collecting the serial data.

WhatsApp Video 2021-06-25 at 18.37.31 (1).mp4

5C Random colour the Sketch

Example 5C has a canvas of 400 by 400 pixels and the function draw as used to draw ellipses of 80 by 80 in diameter which are drawn in different colour coded between 0 and 255 each time the mouse button is pressed. The Drawing was made in P5js online processing/code tool.

5E – Camera filters

The filters were not a big succes with my I tried several in the end I just changed small details such as the amound of spots their color and positioning.

For the last sketch I added more shapes into the code, changed their colours. To add more shapes it is needed to add a keypoint for each with their own parameters of fill stroke/nostroke and details for drawing the shape such as position and size.

HCI_5E_PaulinaMartina.mp4