Author: Simran Parwani

For my project, I’m building some sort of contraption to accompany Zoom classes. It’s been a chaotic week and I haven’t made as much progress as I would have liked, but I’ve been playing around with the speech recognition library in P5.js.

Here’s my code thus far:

	var myRec = new p5.SpeechRec('en-US', parseResult); // new P5.SpeechRec object
	myRec.continuous = true; // do continuous recognition
	myRec.interimResults = true; // allow partial recognition (faster, less accurate)
var recordedString = "";

	var x, y;
	var dx, dy;

	function setup()
	{
		// graphics stuff:
		createCanvas(800, 600);
		background(255, 255, 255);
		fill(0, 0, 0, 255);
	

		// instructions:
		textSize(20);
		textAlign(LEFT);
		

		//myRec.onResult = parseResult; // now in the constructor
		myRec.start(); // start engine
	}

	function draw()
	{
		text(recordedString, 20,20);
	}

	function parseResult()
	{
			var mostrecentword = myRec.resultString.split(' ').pop();
			recordedString += mostrecentword;

	}

I still need to add the functionality for wrapping the string and making sure that it removes a word printed if it realizes it’s actually a different word. For instance, when saying the word “happening’, “happy” would print to the screen and then “happening.”

This week, I hope to get started on building a capacitor sensor (foil inside pillow).

For my final project, I’m going to build something for this Zoom era. I get a lot of migraines and sometimes just need to put my head down during classes/meetings…but, I don’t want to fall asleep!

This contraption aims to detect when the user has put their head down and gently remind them to stay present. The user also will have the option to display the text of what is being said.

The Arduino program:

Input: when has the user put their head down. I will use either an ultrasonic sensor or use this Capacitor Sensor library to create a sensor using foil inside the pillow.

Output: gentle sound using piezo buzzer depending on input in Processing program, also sends signal to Processing program that user has put head down

(I would also like to explore creating vibrations as output but am not sure how to do this)

The Processing program (p5.js):

Input: signal from Arduino that user has put head down,  speech of class/meeting, time interval user wants to be reminded at

Output: display text of class/meeting, sends signal to Arduino of when to create sound/vibrations

Considerations:

The p5 program will have an alert: the user should only display the transcript if there is consent from the other participants in the Zoom call (ex: meeting is being recorded). The program will also not save the text anywhere and will be cleared from the screen after a certain time.

The P5 speech library I wanted to use (Thanks Aaron for the rec!) seems to be better than expected at recognizing names that aren’t typically used in English (it recognized a lot of my friends’ names and mine when I experimented), but it will definitely not be perfect, so I’m not sure whether to proceed with the name recognition alarm feature.

Exercise 1: I essentially modified the starter code such that the y position remained fixed in the middle of the screen.

Arduino:

int pot = A0;
 
void setup() {
  Serial.begin(9600);
  Serial.println("0");
  pinMode(pot, INPUT);
}
 
void loop() {
  while (Serial.available()) {
    if (Serial.read() == '\n') {
      int sensor = analogRead(A0);
      Serial.println(sensor);
    }
  }
}

Processing:

import processing.serial.*;
Serial myPort;
int xPos=0;
int yPos=height/2;
 
void setup(){
  size(960,720);
  printArray(Serial.list());
  String portname=Serial.list()[1];
  println(portname);
  myPort = new Serial(this,portname,9600);
  myPort.clear();
  myPort.bufferUntil('\n');
}
 
void draw(){
  background(255);
  ellipse(xPos,yPos,30,30);
}
 
void serialEvent(Serial myPort){
  String s=myPort.readStringUntil('\n');
  s=trim(s);
  if (s!=null){
    println(s);
    int val=int(s);
      xPos=(int)map(val,0,1023,0, width);
  }
  myPort.write("\n");
}

Exercise 2: I used the mouse speed from Processing to determine the brightness of the LED in Arduino.

Arduino code:

int ledPin = 5;
int bright;
 
void setup() {
  Serial.begin(9600);
  Serial.println("0");
  pinMode(ledPin, OUTPUT);
}
 
void loop() {
  while (Serial.available()) {
    bright = Serial.parseInt();
    if (Serial.read() == '\n') {
      analogWrite(ledPin, bright);
      Serial.print("\n");
    }
  }
}

Processing Code:

import processing.serial.*;
Serial myPort;
float mouseSpeed;
float smoothSpeed;
 
void setup(){
  size(960,720);
  printArray(Serial.list());
  String portname=Serial.list()[2];
  println(portname);
  myPort = new Serial(this,portname,9600);
  myPort.clear();
  myPort.bufferUntil('\n');
}
 
void draw(){
  background(255);
  ellipse(mouseX, mouseY, 25, 25);
  mouseSpeed =  5 * dist(mouseX, mouseY, pmouseX, pmouseY);
  smoothSpeed = lerp(smoothSpeed, mouseSpeed, 0.1);
  println(smoothSpeed);
}
 
void serialEvent(Serial myPort){
  float val = map(smoothSpeed, 0, 400, 0, 255);
  myPort.write((int)val + "\n");
}

Exercise 3: The photoresistor affected the wind direction and each time the ball bounced on Processing, I wrote to the serial to communicate to Arudino that the LED should light up. I originally used a photoresistor, but it felt a bit clunky. I still find the response in the wind vector kind of slow but find the movement more intuitive than the potentiometer.

Arduino Code:

int phot = A0;
int led = 2;
int bounce = 0;
int pastVal;
int val;
void setup() {
  Serial.begin(9600);
  Serial.println("0,0");
  pinMode(led, OUTPUT);
  pinMode(phot, INPUT);
  val = analogRead(phot);
  pastVal = val;

}

void loop() {

  while (Serial.available()) {
    bounce = Serial.parseInt();
    if (bounce == 1) {
      digitalWrite(led, HIGH);
    } else {
      digitalWrite(led, LOW);
    }
    if (Serial.read() == '\n') {
      

      val = analogRead(phot);
      if (pastVal != val) {
        if (val >= 34) {
          Serial.println(1);
        } else {
          Serial.println(-1);
        }
        pastVal = val;
      }
      else {
        Serial.println(0);
      }
      }
     
    }
  }

Processing Code:

PVector velocity;
PVector gravity;
import processing.serial.*;
Serial myPort;

PVector position;
PVector acceleration;
PVector wind;
float drag = 0.99;
float mass = 50;
float hDampening;
int bounce = 0;

void setup() {
  size(640,360);
  noFill();
  position = new PVector(width/2, 0);
  velocity = new PVector(0,0);
  acceleration = new PVector(0,0);
  gravity = new PVector(0, 0.5*mass);
  wind = new PVector(0,0);
  hDampening=map(mass,15,80,.98,.96);
  
  String portname=Serial.list()[2];
  myPort = new Serial(this,portname,9600);
  myPort.clear();
  myPort.bufferUntil('\n');
}

void draw() {
  background(255);
    velocity.x*=hDampening;
  applyForce(wind);
  applyForce(gravity);
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);
  ellipse(position.x,position.y,mass,mass);
  if (position.y > height-mass/2) {
      velocity.y *= -0.9;  // A little dampening when hitting the bottom
      position.y = height-mass/2;
      bounce = 0;
    }
}
  
void applyForce(PVector force){
  // Newton's 2nd law: F = M * A
  // or A = F / M
  PVector f = PVector.div(force, mass);
  acceleration.add(f);
}

void keyPressed(){

  if (key==' '){
    mass=random(15,80);
    position.y=-mass;
    velocity.mult(0);
  }
}

void serialEvent(Serial myPort){
  
  String s=myPort.readStringUntil('\n');
  s=trim(s);
  
  if (s!=null) {
    int windVal = int(s);
    println(windVal);
    if (wind.x >= -1 || wind.x <= 1) {
      wind.x = windVal;
    }
  }
  
  if (round(velocity.y) < 0) {
    bounce = 1;
  } else {
    bounce = 0;
  }
  myPort.write(bounce + "\n");
}

1. Sometimes you just need to put your head down…

I want to create some sort of contraption fitting for the era of Zoom classes. When the user places their head on a pillow, an Arduino sensor will detect if a certain distance is crossed. At that point, there will be some sort of timer activated on Processing that will allow the user to nap for three minutes and sound an alarm. It would be pretty cool to also use a speech to text library from Processing to also record the transcript of the Zoom class so the user can make sure they didn’t miss anything when they wake up. I’m not sure how technologically feasible this is as it would depend on the accuracy of the speech processing library but it would be nice to have some sort of giant alarm that sounds if the user’s name is said in class.

2. Some sort of drawing game. What you draw on Processing is connected to a grid of LEDs/neopixels that correspond to what you draw.

3. Some sort of data visualization web piece using P5.js and Arduino. The user can filter the visualization on P5.js and see the effects on the analog piece (led output).

An instrument I’ve always admired is the theremin–it reminds me a bit of the smooth movement of the harp. Thus, for my practice this week, I decided to build a very mini version.

I wanted to try to use the ultrasonic sensor in our kits and wanted to be able to control at least one more variable such as volume or pitch. I decided to use the sensor for determining the note played and the potentiometer for controlling the volume.

I must admit I broke the rules of this assignment…I used serial communication between processing and arduino!  In my defense, I broke the piezo buzzer and didn’t have a soldering station to fix it. Thus, my only way to test whether my instrument was working was to play using the output of my computer.

I used this tutorial to understand how the ultrasonic sensor worked and how to connect the four pins. One went to ground, one went to 5V, and the other two went to pins on my arduino (though one pin is input and the other is output).  The code I used to find the distance of an object near the sensor seemed pretty standard between tutorials, but essentially a sound wave is emitted and then bounces back when it hits an object.  We multiply by the speed of sound and then divide by 2 (so its just one way the wave travels).

From there, it was pretty straightforward. I read the value from the potentiometer and wrote the potentiometer value and sensor distance to the serial for Processing to read.

In Processing, I used an array of notes that mapped to the distance of the sensor. I used this documentation to learn more about creating a triangle wave. Essentially, all I did in Processing was read from the Serial and map the values and then play the triangle wave with the frequency depending on the sensor distance value and the amplitude (volume) depending on the potentiometer value.

I think it could be cool to experiment further by changing octaves and seeing if the photoresistor was more smooth than the ultrasonic sensor and adding LEDs that respond.

Here is my instrument!

Here is my Arduino code:

int trigger = 4;
int echo = 3;
int pot = A0;
int distance;
int duration;
int volume;
int c_notes[] = {35, 65, 131, 262, 523,1047, 2093, 4186};


void setup() {
  Serial.begin(9600);
  pinMode(trigger, OUTPUT);
  pinMode(echo, INPUT);
  pinMode(pot, OUTPUT);

}

void loop() {
   digitalWrite(trigger, LOW);
   delayMicroseconds(2);
  digitalWrite(trigger, HIGH);
  delayMicroseconds(10);
  digitalWrite(trigger, LOW);
  duration = pulseIn(echo, HIGH);
  volume = analogRead(pot);
  // Use 343 metres per second as speed of sound
  distance= duration*0.034/2;
  Serial.print(distance);
  Serial.print(",");
  Serial.print(volume);
  Serial.print("\n");

}

Here is my Processing code:

import processing.sound.*;
import processing.serial.*;
Serial myPort;
TriOsc triOsc;

//array of notes
int[] midiSequence = { 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83};

float amp;
int note = 0; 

void setup() {
  size(640, 360);

  
  String portname=Serial.list()[2];
  println(portname);
  myPort = new Serial(this,portname,9600);
  myPort.clear();
  myPort.bufferUntil('\n');

  // Create triangle wave and start it
  triOsc = new TriOsc(this);


void draw() { 
  //frequency, amplitude (volume)
    triOsc.play(midiToFreq(midiSequence[note]), amp);
  }


// This helper function calculates the respective frequency of a MIDI note  
// taken from example 2 in processing documentation https://processing.org/tutorials/sound/
float midiToFreq(int note) {
  return (pow(2, ((note-69)/12.0))) * 440;
}


void serialEvent(Serial myPort){
  String s=myPort.readStringUntil('\n');
  s=trim(s);
  if (s!=null){
    int values[]=int(split(s,','));
    if (values.length==2){
      note=(int)map(values[0],-100,350,0, midiSequence.length);
      amp = map(values[1], 0, 1023, 0, 1);
    }
  }
}

I love throwing dance parties (in non-COVID times of course). One of the things on my “To build” dream list is an LED cube synchronized to music.

Sort of like this:

But, alas, senior year is not the most compatible with the desire to just build the things I want to build.

Thus, I decided to use this project to get a bit closer to that LED cube. I probably could have just built the LED cube for this project but I lack access to a laser cutter right now which I would want to use to organize the cube.

I first built a simple led sequencer with the speed controlled by the potentiometer and a button to turn it on and off.

Then, I moved to creating the synchronization with music. The potentiometer controls the brightness of the pins with PWM…I would have liked to be able to control the brightness of all of them but was limited by the pin capacity on the arduino uno. The digital write uses the minim processing library to find attributes of the song playing and turn on certain LEDs accordingly.

EDIT:

I realize it is difficult to see the effects of the potentiometer so I adjusted my circuit and code so that there are only 6 LEDs that are ALL connected to PWM pins.

My code is based on this instructable. I also relied on the method documentation in the Arduino for Processing library here. 

One difficult thing I encountered was differing datatypes for inputs/outputs of functions in the Arduino library in processing versus what I did when coding in the Arduino IDE.

Part 1 code:

int led[] = {2,3,4,5,6,7,8,9};
int buttonPin = 12;
int analogPin = A0;
bool onOff = false;
bool prevState = false;
int val = 0;

void setup() {
  for (int i = 0; i < sizeof(led); i++) {
    pinMode(led[i], OUTPUT);
  }
  pinMode(analogPin, INPUT);

  Serial.begin(9600);

}

void loop() {
  bool buttonState = digitalRead(buttonPin);
  Serial.println(buttonState);
  int pot = analogRead(analogPin);
  val = map(pot, 0, 1023, 0, 500);

  if (buttonState == HIGH && prevState == LOW) {
    onOff = !onOff;
  }
  for (int i = 0; i < sizeof(led); i++) {
    digitalWrite(led[i], onOff);
    delay(val);  
  }
  if (onOff) {
    for (int i = 0; i < sizeof(led); i++) {
      digitalWrite(led[i], !onOff);
      delay(val);  
    }
  }

  prevState = buttonState;

}

LED synchronization with music:

import processing.sound.*;
import processing.serial.*;
import ddf.minim.*;
import ddf.minim.analysis.*;
import cc.arduino.*;

Minim minim;
AudioPlayer song;
BeatDetect beat;
BeatListener bl;
Arduino arduino;
//the pin numbers I'm using
int led[] = {2,3,4,5,6,7,8,9};
int buttonPin = 12;
int analogPin = 0;
boolean onOff = false;
int prevState = 0;
float val = 0;

//based on the instructable https://www.instructables.com/How-to-Make-LEDs-Flash-to-Music-with-an-Arduino/
//kick is the bass drum
//snare is the higher pitch component
//hat (hi-hat) is the cymbal-like beat


void setup() {
  size(100,100);
  
  minim = new Minim(this);
  //57600 is the speed of connection -- this appears to be a standard value used
  //[2] is the port that I am using
  arduino = new Arduino(this, Arduino.list()[2], 57600);

  song = minim.loadFile("redbone.mp3", 2048);
  song.play();
 //BeatDetect is a class in the minim library that will allow me to use built-in methods to detect the types of beats
  beat = new BeatDetect(song.bufferSize(), song.sampleRate());
 //the algorithm will wait for 100 milliseconds before detecting another beat
  beat.setSensitivity(100);  
  //used BeatListener class from instructable
  bl = new BeatListener(beat, song);  
 //set up pins for output
   for (int i = 0; i < led.length; i++) {
    arduino.pinMode(led[i], Arduino.OUTPUT);
  }
  //analog pin for potentiometer
  arduino.pinMode(analogPin, Arduino.INPUT);
}

void draw() {
  background(0);
  //this turned out to take an integer value. originally tried to make it take a boolean instead.
  int buttonState = arduino.digitalRead(buttonPin);
  println(buttonState);
  
  if (buttonState == 1 && prevState == 0) {
    onOff = !onOff;
  }
  println(onOff);
  //gets value from potentiometer
  float pot = arduino.analogRead(analogPin);
  println(pot);
  val = map(pot, 0, 1023, 0, 255);

  //if(onOff) {
  //uses beat detect method to detect for bass
  //digitally writes to specific LEDs
  //analog writes brightness of pot to pin 3
  if(beat.isKick()) {
      arduino.digitalWrite(led[0], Arduino.HIGH);   // set the LED on
      arduino.analogWrite(led[1], int(val));   // set the LED on
      arduino.digitalWrite(led[6], Arduino.HIGH);   // set the LED on
      arduino.digitalWrite(led[7], Arduino.HIGH);   // set the LED on

  }
  //uses beat detect method to detect for snare
  //digitally writes to LED pins 4 and 7
  if(beat.isSnare()) {
      arduino.digitalWrite(led[2], Arduino.HIGH);   // set the LED on
            arduino.digitalWrite(led[5], Arduino.HIGH);   // set the LED on
  }
    //uses beat detect method to detect for cymbal
  //analog writes to LED pins 5 and 6 depending on pot brightness
  if(beat.isHat()) {
      arduino.analogWrite(led[3], int(val));   // set the LED on
            arduino.analogWrite(led[4], int(val));   // set the LED on

  }
  //}
for (int i = 0; i < led.length; i++) {
    arduino.digitalWrite(led[i], Arduino.LOW);   // set the LED off
  }
            arduino.analogWrite(led[1], 0);   
            arduino.analogWrite(led[3], 0);   
            arduino.analogWrite(led[4], 0); 
  prevState = buttonState;

}

void stop() {
  song.close();
  minim.stop();
  super.stop();
}

I really wanted to use the Network library in Processing as this was something new to me. Thus, I hoped to create some sort of two player game.

As a kid, my siblings and I would make a grid of dots on napkins and play the dots and boxes game where you’d have to form as many boxes as possible by drawing lines between the dots.

I hoped to implement a version of this game with a limitation of what dots you could draw on.

I began by creating the Dot class. I thought about user feedback a lot for this object. When the user hovered over a dot, I wanted it to become lighter. I wanted there to be a beep tone. Upon selection, the dot’s color would change. I originally just kept the posX and posY of each dot object, but later realized it would be useful to be able to have the row and column number as attributes to avoid multiple for loops.

Working with the server and client was easier than I expected because it was quite simple to send data over the socket. Originally, I sent a longer string, also including variables like whether a box was created, etc. I realized this was redundant and I would just need to send the selected row and column dot numbers and have a function to handle the data on each side and see whether a box was created, etc.

Some of the edge cases I identified for error validation:

• Does the user select exactly two dots?
• Does the user select “opponent dots?”
• Does the user select dots that are next to each other (not including diagonals)?

To keep track of the dots selected before they were sent to the other player, I used an ArrayList to hold the dots. When the user clicked the user button, the error validation process would occur. If it was okay, then the data was actually sent.

The most difficult aspect for me was designing how to track boxes. I first created another ArrayList to hold all the pairs of a dot, but that was quite inefficient. I also tried manually checking each potential box position, but that was also unsuccessful. I ended up creating a Box class that matched row and column numbers with the dots. This worked because I could simply refer to the x and y position attributes in the dot class when drawing elements like lines between dots and rectangles for the boxes.

Another challenge was making sure to avoid having an array out of bounds error when checking dots/boxes on the edge of the grid. I solved this by only checking a dot if it was within the boundaries of the grid.

Finally, I did not redraw the background each time. Redrawing the background would remove the lines and boxes. Perhaps, I could have redesigned my architecture to draw lines and boxes each frame depending on certain attributes of the objects. However, my choice to not redraw made things difficult when updating the error message and scores. I ended up cheating a bit and redrawing a rectangle on top of the old messages with the same color as the background.

I relied on the Processing function mouseMoved() to help detect hover state of the dots and make the color slightly lighter. I used mouseReleased to help click the dots and do error validation.

I created a start screen to fulfill the image requirement of the project. I designed the screen image in Figma. When the user clicks, the game state changes.

The end screen comes up when every box has been completed.

Overall, this project was fun to complete and I became a lot more familiar with the Network library.

As always, there is room for improvement. I would make the project better by:

• having a grid size option so the user could make more or less squares depending on their preference
• having background music in the beginning
• having an option to mute sound
• having an instructions/pause game state
• having a more beautiful method of filling in the rectangles
• changing the “end turn” button if it is not the user’s turn.
• use ngrok to make it more playable

But, I suppose there is always more one can do so here is my game for now. The game takes around 12-20 minutes to play through, so here is my game in about a minute. The audio is quite messed up in the demo video since I am playing it at 20x speed.

Here’s the code:

https://github.com/simranparwani/introtoIM_midtermproject

//be sure to read the README.md to start the server and client correctly!

When I was a kid, my siblings and I would play this dot game on the napkins if we were ever in a restaurant waiting for our food. We would draw a grid of dots and draw lines between them, seeing who could form the most “houses”–drawing four lines between the dots to form a box.

For my midterm, I wanted to build a digital version of this game. I will use the Processing Network library to design it for two players.

Here are the requirements and how I play to include them.

• • At least one shape –> will definitely use dots and lines to form the grids and player drawings
  • At least one image –> think I will incorporate this into the start screen
  • At least one sound –> think it would be cool to have a little beep each time a dot is clicked or some sound while the other player is drawing.
  • At least one on-screen text –> I will have room on the bottom of the screen to indicate in text whose turn it is.
  • The game must start with a screen giving instructions, and must wait there until a button or key (your choice) is pressed.
  • After the game is won or lost, there must be a way to restart the game without closing and restarting the program. –> will create a play again button.

Here’s what my grid structure looks like for both the server and client sketches. Not sure if they should have different colored boards.

If I’m being honest, my capstone draft for our community presentation is due the day before this project, so here is what I hope to get out of this project:

• Use Network library for the first time
• Create a game that is simple but has sentimental value

In regard to my progress, I’ve created the Dot class and implemented drawing things on both the server and client.

Perhaps it was the fact that we spent last class doing translate and rotate to place objects in a circle or perhaps because I love radar charts, I gravitated towards doing a visualization resembling lines in a circle.

Using data from Google Calendar and my memory, I first logged how I spent my last week in terms of the number of hours spent in class and meetings, working, socializing, and practicing self-care.

Next, I started with the layout of the piece, drawing some dummy rectangles to organize the sketch.

From there, I began experimenting with drawing the strokes in a circle.

It was rather unclear how long the lines actually were which was important since the length was supposed to convey the number of hours I spent engaged in a particular activity. I also was not vibing with the font.

I ended up drawing smaller circles for each day to have gridlines to show the number. I also learned how to load a font into Processing and used one of my favorite typefaces: Avenir!

One thing I needed to pay particular attention to was the order of drawing all the elements. Originally, I had my circles in the inner for loop which meant they kept getting drawn on top of so they were thicker than intended, they got drawn on top of the chart lines, and the obvious harm to performance.

Here is my final sketch!

And the code!

//class, meetings, social, work, self-care
float[][] data ={{1.25, 6.5, 1.0, 3.0, 2.25}, {4.25, 2.0, 4.0, 5.0, 1.0}, {3.75, 0.0, 4.0, 3.0, 1.0}, {2.5, 1.25, 3.0, 2.0, 3.0}, 
{1.25, 2.5, 3.0, 6.0, 3.0}, {0.0, 0.5, 6.0, 6.0, 3.0}, {0.0, 1.0, 3.0, 8.0, 2.0}};

PFont av;

String[] days = {"Sunday Feb 7", "Monday Feb 8", "Tuesday Feb 9", 
"Wednesday Feb 10", "Thursday Feb 11", "Friday Feb 12", "Saturday Feb 13"};

color[] palette = {#28464B, #855A5C, #8A8E91, #B8D4E3, #FED766};

String[] legend = {"class", "meetings", "social", "work", "self-care"};

int scale = 20;

void setup(){
  av = loadFont("Avenir-Book-48.vlw");
  hint(ENABLE_STROKE_PURE);
  size(1300, 500);
  background(255);
   fill(#6D7174);
  textAlign(CENTER);
  textFont(av, 36);
  text("How I Spend My Week (and too much time in meetings)", width/2, 50);
  drawKey();
  drawLines();
  textAlign(CENTER);
  textFont(av, 10);
  fill(#6D7174);
  textAlign(LEFT);
  text("Notes: The length of line corresponds to the number of hours spent that day engaging in that activity. The color corresponds to the activity.", 15, height-15);
}

//draws lines at top showing the colors and activities
void drawKey(){
  int x = 800/data[0].length;
  for (int a = 0; a < data[0].length; a++){
    stroke(palette[a]);
    strokeWeight(3);
    line(width/6 * a + x, 100, width/6 *a +x + 50, 100);
    textFont(av, 12);
    textAlign(LEFT);
    text(legend[a], width/6 *a +x + 65, 102);
  }
}

void drawLines() {
  textAlign(CENTER);
  int x = width / days.length;
  float angle = 360/data[0].length;
  for (int i = 0; i < data.length; i++) {
    //draws guiding circle gridlines
    textFont(av, 12);
 noFill();
      strokeWeight(0.5);
      stroke(#D4D8D8);
      circle(x * i + 100, height/2, 2*scale);
      fill(#D4D8D8);
      text("2", x * i + 100 + scale, height/2);
      noFill();
      circle(x * i + 100, height/2, 4*scale);
      fill(#D4D8D8);
      text("4", x * i + 100 + 2* scale, height/2);
      noFill();
      circle(x * i + 100, height/2, 6*scale);
      fill(#D4D8D8);
      text("6", x * i + 100 + 3* scale, height/2);
    fill(#6D7174);
    //draw day labels
    text(days[i], x * i + 100,height- 100);
    for (int j = 0; j < data[i].length; j++){
      //draws the chart lines
      translate(x * i + 100, height/2);
      rotate(angle * j);
      strokeWeight(3);
      stroke(palette[j]);
      line(0,0,0,data[i][j] * scale);
      fill(255);
      strokeWeight(1);
      ellipse(0, data[i][j] * scale, 7, 7);
      rotate(-angle * j);
      translate(-(x * i + 100), -height/2);
    }
  }
}