The Demogorgon by Abigail and Ahmed

Concept & Design

Initially, we wanted to create a simple art project using multiple servos to control panels.   That was very short-lived. Our concept slowly went from a simple interactive art piece that looked pretty to an interactive monster called a Demogorgon from the Netflix series Stranger Things. We wanted to make something interesting that could catch users’ attention longer than an art piece. Since our Demogorgon was not going to necessarily be a game with a winning or losing outcome, we still had to figure out ways to make it more interactive. We took our assigned reading: Emotion & Design: Attractive Things Work Better by Don Norman into consideration and decided that in order to convey what we wanted we needed to make the Demogorgon come to life and make it something that is interesting to look at in addition to the code and interact itive component. To make both the interactive component and the Demogorgon fit nicely together, we decided to use certain scenes of the show to inspire the movements. In the show, the protagonist Eleven defeats a Demogorgon by putting her hand up since she has the ability to manipulate living beings however she wants through her hands. This inspired us to make it so the user is able to open the Demogorgon face flaps we build as their hand gets closer to them through a distance-measuring sensor. As we went along with our project, we realized how ambitious we were with our concept and simply tried our best to make it happen.

For our project, we used the ultrasonic distance measuring sensors, LED lights, flex sensors, 3-d printing, cardboard, wood, acrylic, and paint. Though we went through a lot of hiccups including but not limited to spending hours soldering cables we ended up not using, one of us going into isolation because of COVID-19, short circuits, and re-thinking our concept a few times… we kind of did it.

Interaction Design

Physical

This was a very time-consuming aspect of project, especially since we really wanted it to make look as much as a Demogorgon’s head as possible with what we had. The wood that was available to us was pretty thick and we knew we had to cut holes in it to make openings for the 3-d printed and handmade Demogorgon flaps so it was going to take a long time to cut the wood and put everything together. Luckily, the woodshop was nice enough to let us borrow a Jigsaw so even though it was still a tedious process of drilling two holes where we wanted one hole for the flap to be and then using the Jigsaw to go in and follow the outline, it made it go a lot faster. We did this process seven times. For the flaps of the Demogorgon, at first, we 3-d printed three of them but it was taking a long time so for the last four we decided to build them out of cardboard for time’s sake. The 3-d printed ones still looked pretty cool though and definitely added an appeal to it, in our opinion. Plus, the different materials fit the Demogorgon vibe. We painted and added red and white for the skin tone. We also had to make longer cables to reach the Demogorgon flaps when our Arduino port is hidden beneath the box/head.

Arduino Code

Our Arduino code controlled the flex sensors, server motors, and ultrasonic measuring sensor. The sens0rs were mapped to values from 0 to 180 and then output at different rates depending upon the configuration. The output rates helped stabilize the servo motors which were prone to jittering.

We used some sources for these pieces:

1. Ultrasonic sensor controlling servos
2. Flex sensors controlling servos

Code for the servo motors with Ultrasonic sensor:

// Clears the trigPin condition
digitalWrite(trigPin, LOW);
delayMicroseconds(100);
// Sets the trigPin HIGH (ACTIVE) for 10 microseconds
digitalWrite(trigPin, HIGH);
delayMicroseconds(100);
digitalWrite(trigPin, LOW);
// Reads the echoPin, returns the sound wave travel time in microseconds
duration = pulseIn(echoPin, HIGH);
// Calculating the distance
distance = duration * 0.034 / 2; // Speed of sound wave divided by 2 (go and back)
// Displays the distance on the Serial Monitor
distanceMapped = map(distance, 0, 70, 22, 180);
distanceMapped=constrain(distanceMapped, 30, 180); //this allows the output to stay between the constraints. without this it goes up to like a few thousand for some reason

int distanceMappedforOuter = distanceMapped + 10; // the outer petals will open wider, to give a flared look

myOuterServos.write(distanceMappedforOuter);
delay(75);
myInnerServos.write(distanceMapped);
delay (75);

Code to control servos with the Flex Sensors:

int OutsideFlexValue;
int InnerFlexValue;

int servoPositionInside;
int servoPositionOutside;

OutsideFlexValue = analogRead(OutsideFlexPin);
// delay(15); //adding slight delays to make it stable

InnerFlexValue = analogRead(InsideFlexPin);
// delay(15);

servoPositionOutside = map(OutsideFlexValue, 170, 500, 0, 180);  // need it to rest at a midwards position
servoPositionOutside = constrain(servoPositionOutside, 0, 180);
// int round10(int servoPositionOutside);

servoPositionInside = map(InnerFlexValue, 100, 360, 0, 180);
servoPositionInside = constrain(servoPositionInside, 0, 180);

// servoPosition = constrain(servoPosition, 45, 180); //for the servos that go beyond 180

myOuterServos.write(servoPositionOutside);
delay(75);
myInnerServos.write(servoPositionInside);
delay(75);

 

To reduce jittering the following line of code was added to constrain the servo motors from going beyond set parameters.

 

distanceMapped = map(distance, 0, 70, 22, 180);
distanceMapped=constrain(distanceMapped, 30, 180); //this allows the output to stay between the constraints. without this it goes up to like a few thousand for some reason

p5.js Code

Our p5.js code focused on the screen that the user would see and use to interact with our Demogorgon.  We used the game state and included a starting screen followed by an introduction and instruction screen. We realize not everyone may know what a Demogorgon is or have watched Stranger Things, so we made it feel an arcade game you would go up to, get an introduction and instructions for, and start playing around with it whether or not you fully grasp the inspiration behind it.

There was an issue that we couldn’t quite figure out. After adding the second sound, the audio would start glitching after a while. At first, we thought it was just the sound so we tried it out with different sounds but no luck. When we decided to search if there was a solution or if the code was wrong, we found  a thread from 2020 that discussed how the newest versions of p5.js have audible distorted effects on Chrome and there is no fix yet. The audio just keeps getting distorted and eventually the window shuts down and you have to refresh the page.

The p5js code can be accessed on Abigail and I’s p5js sketches directory on the p5js website.

Circuit Diagram for the Project:

Since our project was rather complicated and needed a lot of cables, we decided to draw a schematic for it.

Problem(s) 🙁

Though we knew what needed to be communicated between the Arduino and p5.js, it worked only sometimes. The problems started when we started off by checking out the Arduino MEGA from the IM Lab and tailoring our code to it. However, since we got an extension past the last day to return items to the IM Lab due to reasons neither of us could control, we had to switch back to the Arduino we received in our kit. For some reason what we had did not work after that and we had to figure out why. We switched up the code again but only some parts of it would work and only sometimes as p5.js kept shutting down and the serial connection kept disconnecting. We tried to ask for help through friends and Facebook groups. No one was able to help us though and as we ran out of time we accepted our fate. The Demogorgon beat us (sorta).

Some testing and progress videos:

Testing the Flex sensors interfaced with the servo motors:

Testing the ultrasonic distance sensor interfaced with the servos:

 

Problems that we ran into and how we tried to solve them:

1. The first problem we ran into pretty early on was a jittering in the servo motors that could not be controlled. The jittering would make the servos move even when the code was not running. After some debugging, we realized that the problem originated with the 5v supply on the main board, and switching the servos to an external power source would reduce it. It could be made smoother by adding another earth wire connected to one of the unused GND pins
2. Another problem we ran into was the 3d printing of some of the parts. The models we had used were pulled off the internet and were supposed to be printed within a few hours but the first 3 iterations were all just a mess of melted filament since the model would move around. After consulting the lab assistants we realized scraping the surface of the building area of the printer solved the issue immediately.
3. A bug that we ran into while working on the Arduino-p5js serial communication was that the communication would halt and spout an error ‘Failed to open serial port’. We realized that this could be fixed most of the time by closing the serial monitor on the IDE.  However, at one point it persisted despite restarting, and according to some forums, it was a problem with incompatible drivers that plague computers with versions of Windows later than 10.
4. Another bug that we ran across that caused us the most trouble was that the p5js terminal would not work or crash periodically after adding sound effects that were to be played on the terminal. We could not find a viable solution to this problem.
5. We did not realize until the last moment that there were in fact some subtle differences between how Arduino mega and uno work. Other than the size and ram, there is also a difference in how we set up the ultrasonic distance sensor by following this tutorial. There were other differences too that for some reason broke the code when we tried running it on the Uno however we cannot seem to locate the exact piece of code that caused it.

Future Improvements:

• I think we focused on Professor’s warning that the physical component was going to take a really long time too much. Our concept depended a lot on being appealing to the audience so we wanted to make sure we made our Demogorgon look really good and spooky. However, we spent so much time on it considering the limited time we had that we did not think about how buggy the code would be considering everything we were trying to make it do at once.
• Figure out a more stable way for communication between p5js and Arduino.
• Use a stable operating system that causes the least amount of problems with regard to drivers
• Use a stable search engine to run p5js smoothly
• Employ a better and more rigorous documentation method along the progress of future projects to create a seamless reference system in case of mistakes. We spent way too much time trying to debug without knowing what resources I had accessed before or how we had implemented stuff.

Project Reflection:

This project was really challenging yet somewhat rewarding. I think personally, I would like to spend more time researching the project before actually starting with it. The technique of ‘forcing’ a project or completing it by brute force is not something that can be accomplished with such projects. This project also gave me experience with interfacing Arduino boards with p5js. And showed me how important it is to start early with developing a code that can work seamlessly, especially with tools that are relatively new to me, and are already known to have caused problems.

The project was also an opportunity for me to gain more knowledge and technical know-how from the Professor who has been teaching people about creative robotics for a long time. I was able to pick his brains but failed to capitalize on him as an incredible resource towards the final stretch which led to failure to achieve a favorable final project. It made me realise how important it was to reach out when there is a problem hampering progress.

Moreover, the project allowed me to push my boundaries to the extreme. Not only was it intellectually strenuous, requiring a great amount of technical know-how and problem-solving abilities but also physically straining and intensive. I am extremely disappointed in not being able to assemble the final project in a way that was, well, final. However, this project has only given me more drive to try and learn more about p5js, and Arduino and how these two tools can be merged to create working machines beyond their apparent limits.

Arduino code:

Link

Finalized Concept and Design

For this final project, I will be working with Abigail as a group. We decided to go with our initial idea of making an interactive art piece. However, we considered what Professor Shiloh advised us during class when we shared our idea and started thinking about how we can make it more interactive and not lose the attention of our audience in 5 seconds. Before we started thinking more creatively, we were set on just making an art piece inspired by graphic art. My first post on this concept is linked here.

The art piece looks as if you are looking from above into a room filled with interactive walls. This digital art interacts with the user through mouse or sound control. Initially, we just wanted to replicate this same idea using p5.js and Arduino and make it come to life with materials in the IM Lab.

However, after taking into consideration what Professor Shiloh told us, which was that it would only keep the user entertained for a maximum of five seconds and need to come up with a way to make it more engaging, we did just that.

First, no more boring colorful blocks that look like walls. To be more aligned with our initial theme of depicting a living, breathing, organisms that reacts to different inputs, we have a more specific theme now: Stranger Things. If you are not familiar with stranger things, below is a trailer to season 1.

There are 4 seasons of stranger things now. The monsters that the group of kids fight are living, breathing organisms of some kind. The main things you and the user need to know is that one of the monsters on the show is called a Demogorgon. Below is a picture. The picture shows how it looks when it’s head is closed versus when it is open.

It kinds of looks like a very scary version of the Venus Flytrap plant.

At first, we were thinking of a plant/nature theme where we would depict some type of garden or collection of ferns or Venus Flytraps interacting with each other. It would have been more on the pretty nature side of things, but we thought Stranger Things could spice things up a little. We started looking for inspiration and we found this 3-D printed Demogorgon. We will only 3-D print the head and it would sit upright on the board we built. We plan on having the heads open and close as the user interacts with them through different mediums.

Our interactive Demogorgon project will include speakers playing ominous music, flex sensors, an ultrasonic sensor, and big flaps of the monster’s head being controlled with Servo motors. Using these components, the user will be able to interact with the living, breathing Demogorgons and have a little fun with them.

To make the whole project even more immersive we created a narrative behind the Demogorgon and the user being able to choose to interact with it as the protagonist or the antagonist.

 

Description of Arduino program will do with each input and output and what it will send to and/or receive from P5

Using Adruino, we will be controlling the Servo Motors, and checking for any analog inputs from the flex and ultrasonic sensors. The sensor values are mapped to (0, 180) using the following section of code:

  OutsideFlexValue = analogRead(OutsideFlexPin);
  delay(15); //adding slight delays to make it stable

  InnerFlexValue = analogRead(InsideFlexPin);
  delay(15);

  servoPositionOutside = map(OutsideFlexValue, 24, 48, 45, 180);  // need it to rest at a midwards position

// int round10(int servoPositionOutside); 

  servoPositionInside = map(InnerFlexValue, 24, 48, 45, 180);

 

It will send out a signal to the p5js program every time it hits a pre-determined threshold value.  The out-sent value is to let the P5Js code know to play a growling sound along with the petals opening wide.

Description of what the P5 program will do and what it will send to and/or receive from Arduino

In order for the user to control or choose the interaction they would like to have with the Demogorgon, we will use p5.js. We will display an instruction screen followed by a digital button screen where the user can select presets and change between modes. For instance, the user will be able to choose between using the flex sensors with the glove or with the ultrasonic distance sensors to have different interactions with each.

From arduino it will receive the aforementioned serial communication to let it know when to play certain sounds.

Future Improvements:

1. Need to work on the mechanical aspect of the project more. The initial testing has shown that the servo motors cannot be used with a large armature due to force constraints.
2. Need to streamline the code to reduce input delay

 

Sources We Used for Inspiration and Resources:

1. For the fonts: https://www.dafontfree.net/play-regular/f157734.htm
2. For the coin animation: https://gifer.com/en/gifs/coin
3. For the background music:
4. For the Flex-Servo control: https://www.youtube.com/watch?v=iNmdfKcG9E0

Problems and Solutions:

1. The main problem we had from the start was that there was a lot of interference from the 5v pin on the Arduino which was causing the motors connected in parallel to jitter even when they were not being activated. We tried changing wires, changing components, making the digital pins far away as possible, and even using a different board but none of it worked.

Solution: The solution as the professor suggested was to use a separate battery to operate the servos with only digital PWM pins being connected to the board itself. This reduced the jitter to negligible.

Some Progress Pictures:

Preliminary flex component testing: flexsensor

A demonstration of the fitted component moving:

Progress Pictures Google Drive link

//Add abigails links

 

For this assignment we started by building the circuit for each part and made a circuit that would work for all of them.

Circuit:

 

 

Part 1:

Link

For the first part of the assignment we took inspiration from the following website to figure out an efficient way to complete the task:

Serial Input to P5.js Using the p5.serialport library

Instead of using the potentiometer to move around an ellipse, we decided to make it move around a ufo around on a background instead:

We ran into a delay problem that would make the ufo glitch around instead of moving smoothly so we figured out the optimal delay rate:

Serial.write(mappedPot);
//Serial.println(mappedPot);
// slight delay to stabilize the ADC:
delay(200);

Also during this exercise, we started experiencing disconnection issues where the Arduino and p5js would stop communication, give erratic readings or get stuck at values (170, 20, 13, and 0). After a lot of head-scratching our fix was:

Restart the computer.

By using the mapped data received directly from the Arduino we were able to move the ufo around easily:

image(ufo, inData, 150,50,30)

 

Part 2:

Link

For part 2 of the assignment, we wanted to create a slider on p5js that could control the brightness of the LED as we felt it was the most intuitive way of showing light levels.

We took some coding inspiration from the following Youtube tutorial in some places:

p5.js and Arduino serial communication – control an Arduino from p5js

We made it so the slider had a length of 255 and the interval at which the bar moved was + or – 5. This allowed us to do this without including the map() function to map the values to a range of 0 to 255.

// making the slider in setup function
slider = createSlider(0, 255, 10, 5);
slider.position(50, 200);
slider.style('width', '200px');

textSize(14)
text("Use the slider to adjust brightness of the LED:", 8, 150)
outByte = slider.value()
serial.write(outByte);

Also, to make the p5js part even more interactive we added a bit of code to change the background of the canvas which made it go from a dark shade of red on lower outData() values to match the brightness of the LED.

background(outByte,0,0); 
fill(255);

On the Arduino side of things we simply used the digitalWrite() function to turn on the LED and update the output values by using the following bit of code:

   digitalWrite(LED_BUILTIN, HIGH); // led on while receiving data
 
   int light = Serial.read();
   Serial.println(light);

 

Part 3:

Link

For this part of the project we wanted to edit the code provided to make the ball fall slower because of air resistance but later we decided to add the sideways wind functionality because the ball was not slowing down noticeably.

For controlling the direction and magnitude of the wind we decided to use a potentiometer that was mapped to output values between 0 and 255.

int mappedPotentiometer = map(analogRead(potentiometer), 0, 1023, 0, 255); 
Serial.write(mappedPotentiometer);

The direction of the wind on either axes could be altered using the following code in p5js:

// change wind direction
windStrength = 5;
newWindDirection = map(inData, 0, 255, -windStrength, windStrength);
wind.y = newWindDirection;  // make ball fall slower
wind.x = newWindDirection;  // make ball move on the horizontal axis

We noticed that there was a delay between the ball hitting and the LED on the circuit lighting up so we made the background change colors every time the ball hit the bottom of the screen to give us visual feedback of what we were looking at:

background(backgroundShade, 0, 10);

//where the value of backgroundShade updates everytime the ball hits the ground using //the following bit of code:
// if (positionOfBall.y > height - mass/2 - mass) {
//backgroundShade = backgroundShade + 5
//}

Video:

Interactive Artwork: Fern Plant Robot Instrument Thing

 

So for our project, we wanted to do something artistic. The idea we have, came from the following piece of computer graphic art:

Interactive Walls

The artwork is graphic and based around Max but we thought it would look really great if implemented in real life with servo motors and multicolored panels.

The panels will be mounted to servo motors and be multicolored to look aesthetically pleasing. The panels can be made out of acrylic material or something lighter like thin plywood or cardboard. Due to restrictions of the Arduino Uno, we will only be able to use a maximum of 12 panels for our interactive artwork.

 

Functionality:

We want the panels to depict a living, breathing, organism that reacts to different inputs; touch, noise, and input controls on a mounted panel. The artwork itself will have two speakers that will create a surround sound effect and can also output predetermined responses to different stimuli.

The control panel for the artwork will have a few buttons that will change modes. Modes can be an ambient mode that makes predetermined patterns, music mode which will make the artwork react to music playing, and a touch mode that will allow the audience to touch the artwork and have it react to their inputs.

The whole piece can be controlled by a single Arduino which will be responsible for the servo motors. For the buttons and knobs, we don’t think there will be enough I/O options on the Arduino Uno to make everything work so we will use a touchscreen with a p5js program to make digital buttons.

Concept Image:

 

Additional Information:

1. The speaker chamber behind the art piece
   
2. The initial look of the moving panels

We also found the following code that may help us during the production of this project:

Audio Reactive Program

 

 

Concept:

Honestly, we had some trouble brainstorming for this assignment at first. We weren’t sure what instrument to create or mimic and how. However, after watching a video about the theremin we decided to make an instrument that would react to the distance between our hands and some sensor. We also wanted to recreate the drone of old midi modulating synths.

For that, we needed to use an ultrasonic distance finder and the  HC-SR04 sensor in our kit was perfect for that. Also, we wanted to be able to control the itch of the sound being produced so we used a potentiometer for that. We decided to use a speaker available at the IM lab, a switch, and an enclosure to build the whole project.

 

Brainstorming:

While looking for inspiration and knowledge necessary for implementing our idea we came across the following youtube video that outlined how to make a simple ‘instrument’ using an ultrasonic distance sensor:

Musical Instrument Using Arduino + Ultrasonic Distance Sensor

This video allowed us to build a device that could convert distance measurements into different musical notes.

After this, we used some other sources to understand better the use of ultrasonic distance sensors and also how to integrate switches and potentiometers into the circuit:

Arduino Potentiometer – Complete Tutorial

Ultrasonic Sensor HC-SR04 with Arduino Tutorial

Process & Code

For the code, it was a bit difficult to figure out how to use the ultrasonic range finder at first. We had to figure out how to convert time to distance since the sensor needs to listen for a pulse from an object to return and the returning pulse is proportional to the distance of the object from the sensor. Luckily, we found exactly what we were looking for in a tutorial on the internet. However, it was calibrated for a few meters instead of a few inches. We needed something that was more sensitive and produced a different set of frequencies. We decided that we would do that by reducing the maximum distance to a few inches and increasing the sensitivity. We also tweaked the code to put the speaker in a continuous loop instead of just beeps to give us a more synth-esque sound.

The sensor itself was difficult to calibrate but after referring to the aforementioned sources we were able to discover some useful functions like the delayMicroseconds() and microsecondstoInches()

// The ping is triggered by a HIGH pulse of 2 or more microseconds.
// Give a short LOW pulse beforehand to ensure a clean HIGH pulse:
pinMode(3, OUTPUT);// attach pin 3 to Trig
digitalWrite(3, LOW);
delayMicroseconds(2);
digitalWrite(3, HIGH);
delayMicroseconds(5);
digitalWrite(3, LOW);

cm = microsecondsToCentimeters(duration);

For the potentiometer, we added the following code to make it emit certain frequencies of sound depending on the position of the knob:

int potVal= analogRead(potentiometerPin);
int speakerVal = potVal * 5  ;
Serial.println((String)potVal + " -> " + (String) speakerVal);
tone(speakerPin, speakerVal );

Below is our initial setup:

after hooking it up to the speaker this is what it sounded like:

However, we were still missing a key feature of the assignment which was a button to control the sound output. For that, we used the following simple line of code to detect whether the signal output from the switch was HIGH or not:

buttonState = digitalRead(buttonPin);
  if (buttonState == HIGH)

If this statement was held true, it would continue the loop that would initialize the ultrasonic distance sensor and then output a sound signal depending on the position of the hands.

To connect the wires to the button and the ultrasonic distance sensor we had to solder the wires to ensure a strong and secure connection:

 

The Full Code

The circuit diagram of the final circuit:

high res image

Final project:

The look of the final project assembled:

Reflection and Difficulties:

 

This project was a lot of fun for both of us. We both learned some important information about using distance sensors and the inbuilt functionality of Arduino IDE that helps make a lot of information processing very easy as a programmer. We also had to solder which was a new experience and allowed us to gain important hands-on knowledge in building practical circuits. Some of the difficulties we faced included code optimization and building usable circuits.

We also learned the importance of top-down development in building circuits; we used a multitude of resources and examples and our own creativity to create circuits with a lot of unnecessary parts. After tinkering and experimenting we were able to streamline not only our circuit to be as simple as functionally possible while losing no part of the usability.

With complex circuits, we discovered that cable management was very important and some of our components were regularly shorting. to reduce this effect we used tape and insulators but it was still far from perfect. Additionally, we could have used heat-shrinking insulating wraps to create better insulation.

Also, we had trouble using the buttons available in the kit because they were pushing buttons and not permanent switches. The fix was super easy thankfully and only required replacement parts that we found in the lab. The button initially would turn the whole board off but that was only because we hooked up the wires the wrong way.

 

Idea:

In class, the professor made us an example of a procedurally generated poem which was extremely fascinating. It was almost like an AI until you understood that the professor had already stored the words in an array that the program was accessing to create unique combinations. Initially, I wanted to try something similar but with more variety. However, while researching for this assignment I came across the following video by the Coding Train on Youtube:

Coding Challenge #97: The Book of Pi – Part 1

This piqued my interest greatly and I wanted to implement something similar for my assignment.

Similarly, I was also fascinated by neo-pointilist artists’ ability to make a matrix of dots into extremely satisfying art:

 

 

Process:

The first step was to find a list of digits that I could use to create my piece. My candidate was the Golden Ratio which I have been studying a lot recently, first through Professor Song’s  Bioinspiration and afterward while researching bio-aesthetics. I wanted to see if there was a secret hidden pattern in the golden ratio if I visualised it similar to the video.

I used the website https://www.goldenratio.org/ to extract the first 1,000,000 digits of the Golden Ratio and put it into a text file which was uploaded to the terminal to be preloaded.

To visualize the numbers I assigned each of them from 0 to 9 to a color of the spectrum. The colors I used were purposely not the same shades to give the maximum contrast when the image was rendered. the colors were stored in an array from which the program accessed the values depending upon what digit was supposed to be represented, e.g., for 2 it would be the color in the second row, and so on.

Probably the most challenging part of the assignment was figuring out how to make the program read a continuous line of numbers and rendering them row-by-row. However, the solution was quite simple and required only the following snippet of code:

// draw a whole row of digits
for (let columnNumber = 0; columnNumber < columnsTotal; columnNumber++) {
  const Index = columnsTotal * rowNumber + columnNumber;
  const GoldenRatioDigit = int(GoldenRatioString.substring(Index, Index + 1));
  const Color = colors[GoldenRatioDigit];

In this for() loop,  there are 3 key actions happening simultaneously:

1. Index is being updated with the number of digits that have been already read so that the next digit may be read
2. The digit of the golden ratio is being read and recorded
3. The digit is being assigned its respective color values

The code ends when the rowNumber reaches the RowsTotal value; the noLoop() function stops the for() loop from repeating.

Embedded Sketch:

 

 

Problems:

There were several coding challenges I faced during this assignment but perhaps the biggest obstacle that almost cost me a few hours was the following error message:

Error: [object Arguments]is not a valid color representation.

Initially, I thought my code was not working properly or the .txt file was corrupted. I tried using random numbers instead in the .txt file which worked fine. So then I assumed its perhaps had something to do with the golden ratio. however, after a simple stackoverflow.com search, I discovered there was something in my code that was not a recognized digit. And it turned out to be the decimal point on the second position of the .txt file… Needless to say I was very happy that it took me just a few minutes to figure it out.

 

Reflections:

The data, although beautifully represented, did not show any semblance to a pattern nor did it do justice to the reputation of the beauty of the Golden Ratio. In the future, while choosing ways to represent my data, I will research more to find out what works best for it. Furthermore, I also discovered the expansive world of Data Visualisation in P5JS and JavaScript overall. It was very exciting for me as a budding coder since I have always wanted to explore data visualization more but was constrained by the lack of knowledge of different visualization-specific languages. By studying P5JS more I can establish a strong base on which to build my skills on.

 

 

For this assignment, I wanted to play around a bit with the randomizer function in P5Js. the idea stemmed from the movie 2001: A space odyssey where in which there are scenes with psychedelic imagery, flashing on the screen in seemingly unending patterns;

Implementation: 

however, when I wanted to create the art, I decided on using squares instead because I wanted to portray reality as large messy pixels. for the color, I decided to have all the perimeters set to random so that it could have random RGB colors instead of just shades of white/black

for that I used this certain line of code:

fill(random(0, 255), random(0, 255), random(0, 255));

 

Additionally, I wanted it to change the moment I pressed my mouse so for that I used mousIsPressed() function to detect if the button had been pressed.

Initially I faced problems while deciding how to change the imagery from flashing cubes to the text but I decided to use an if() loop so that I could have the engine check for the conditional statement (mouseIsPressed) continuously and change the moment it became true. when it did become true it allowed the text to be generated along with the circles.

Embedded Sketch:

Reflection:

In the following classes after this assignment, I discovered game states and how useful they are so I could have used those to create a more efficient and functional way to change the images on the screen.

Additionally, I would have also benefitted from using the 3D rendering properties that p5js has to create a more visually appealing art piece.

 

As a newbie with Java Script and P5Js, I was hesitant initially and did not know what exactly to draw. However, after watching a meme video on youtube I got the idea of creating a simple vector-like face that represented the following emotion perfectly:

Embedded code:

The art is simple but it allowed me to experiment with the placement of elements in a simple Js background and manipulating them to present different features

 

Reflection:

I would have liked to make the portrait more interesting by playing around with different commands such as noStroke, Fill, etc. But this experience gave me an opportunity to work with the holes in my own experience which I look forward to filling going forwards.

 

Concept: 

For this assignment, I carried forward my concept from the last project. I wanted to make a circuit that included the use of a photoresistor, primarily because it could help me imitate a street lamp. As a child, I was always fascinated by street lamps and their magical tendency to somehow detect when it was dark and turn on.

The photoresistor could pick up environmental light levels and control one of the LEDs. However, I also wanted to enact the mental image of someone using a physical switch to control the lamps so that was also a conceptual integration

Implementation:

For the circuit for the light-dependant LED, I started put by connecting the LED in a pattern where the LDR would control the amount of voltage provided. My line of thinking was that I could in turn create a code that would give me light-level readings from the LDR and allow me to control the LED in real-time. However, I could not  figure out how to make it work so I decided to take inspiration from some sources;

LED Control with LDR (Photoresistor) and Arduino

Turn On & Off of LED with Photoresistor

After implementing the circuit, I was able to calibrate the code and modify it to fit the ambient light levels of my room. It allowed me to create a loop that runs constantly to detect the light and as soon as it drops below a certain level, it allows the LED to receive a charge and emit light.

The following code checks for the light levels and loops constantly and detect any changes in the light levels:

int ResistorStatus = analogRead(LDRPinNum);   //read the status of the LDR value

//check if the LDR status is more than/ equal to 500
//if it is, the LED is HIGH

 if (ResistorStatus <=500) {

  digitalWrite(LEDPinNum, HIGH);               //turns LED on
  Serial.println("It is  dark now, time for light");
  
 }
else {

  digitalWrite(LEDPinNum, LOW);          //turn LED off
  Serial.println(".............");
}

After this, I wanted to create a circuit and code that would control the button and the attached LED when the LDR circuit wasn’t working appropriately. For that, I used a code that would basically detect the state of the button and control the LED depending on that. if the button was pressed it would turn on and then a reversal statement would reverse the state of the button on the next press and turn the LED off.

The Diagram for the Circuit:

Video of the Project running:

Light-Sensitive Street Lamp Project Video Link

Reflection:

For this project, the main challenge was learning a seamless way to create unique code in C+. So far I have only dabbled in JS so this is a new experience for me but thankfully there are seemingly infinite resources online available for free for this. Additionally, I was also challenged by the hand-drawn diagram for my circuit. I think it took me way longer than it should have because I was scared of making mistakes but it seemed easier once I actually started making it. also, I’m glad I learned to draw circuits this way because it’s much more intuitive and takes less time than rendering it out on an editor.

also, one of the best things I learned during this exercise was that you can actually do cable management on Arduino! All you have to do is twist them into small loops. et voila! but i still have a ways to go lol