From 9d0566b757389cf1f34b9245368b55e8640a1cae Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 10 Jun 2019 22:16:19 +0530
Subject: [PATCH 1/2] testing again

---
 testing.html | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 testing.html

diff --git a/testing.html b/testing.html
new file mode 100644
index 0000000..e69de29

From 3d717682ba54f5e70fee04a33acc50829846f900 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 11 Jun 2019 17:19:55 +0530
Subject: [PATCH 2/2] Changed brush buttons to circular buttons, icons to be
 changed. tried to make canvas full screen

---
 .DS_Store        | Bin 0 -> 6148 bytes
 Icons/.DS_Store  | Bin 0 -> 6148 bytes
 Icons/erase.svg  |  13 +++++++++
 Icons/wave.svg   |  13 +++++++++
 Icons/zigzag.svg |  13 +++++++++
 drawing.js       |  19 +++++++------
 index.html       |  52 +++++++++++++++++------------------
 style.css        |  70 ++++++++++++++++++++++++++++++++++++-----------
 testing.html     |   0
 9 files changed, 129 insertions(+), 51 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 Icons/.DS_Store
 create mode 100644 Icons/erase.svg
 create mode 100644 Icons/wave.svg
 create mode 100644 Icons/zigzag.svg
 delete mode 100644 testing.html

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..b734202f0b02f8cb49226d0fa6a1e60c42d1c7a7
GIT binary patch
literal 6148
zcmeHK%Z}496us_)Ny8wz0F`AnNGwX#BC0M%BbCxwbb*A(2o`{5l1ViUN|UNdDMKmB
zhJP470r4a3Sn?r!031JPGihgw5aTP^$Fa}7j*lHXCL-3Gc`c$U5gAAvOD3`{#@l(?
zu!5@D1u_vMq6WR8co0M<8*E*n70?R&YYOmh*C2;x<dILA@7E0?7j1lF*h9MaOBhN-
zCb(1h%;6Ez>H3?`_<YIvlxaXGh#$(`A;aX+&oj|8Om`kn6!V)q3H&%|Hh-`}u~fdc
zV;H7k-Y{R=qiAj?PBM#o&h#aJdg>%2SCtQ=C|H#p_qjiuA60KXj>5$8!{Jmo``!?g
zS1<g~i{`y(7J9LWW6K7^s2G)_YHhK2*lyRY=CW=rI-O?SYBe8pmdlD!yW83y9FNc5
zFFq_ko^ye)9b!Kec2nUW_>4kkgm3L>7)0SIYPp9g6!mCG@1W|45*ky$chj|AtOj0o
zHp(=i_O>}-pK{C!J);A9M16V!Y#_Fmi~V!MBgQ+NQGhpUVE*F#>=m4x$1eCo@RHTq
z*gA^B_nhAj9g5Y#`%x#zdd$WB9Q*c)4KCfs+QPa*pHr;kG5QZtj<-honu~<TD{E?v
z8rQF^0(#(D0j<Dg3h@2GLgLs}m`W5|2QqO50G3cK3}ybyz<n%*U4^Mcw7{5j1xi<@
zt{6<Zqux@yuEJEJbSI`RA58Vk)D4A+-VxstbYfkJI@bzl1uiO3l#f+@{vTX^|G(&@
zpR@v6f&WSYR_fdR9)_gO){VjOv(`d7M&ibKsYKy|OdZFfz>nfPNW#!&@dB``FqMcJ
QnEnwEGU!Yz@K+W14axb~0RR91

literal 0
HcmV?d00001

diff --git a/Icons/.DS_Store b/Icons/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..6672a1d91091877630acb483a09353eb9d11cdb9
GIT binary patch
literal 6148
zcmeHKF-wC%3{A8{txGo@Z*&rzU5-)*Xa9h$mLe1iN-H?s-|<)Kdr2&Q^>Y&uNg#RY
zCAqurLGLaiqLa=2g~(V$hESr?=@Ab1h7Kb65U4iCLeAw$wz9ll^-S~^hq(76S;(Wz
zu=7v*U*FAF>p7yN<`sJOW&)3NJR^VmUA~^|<&We=9%KnSgWYk|S>tlAhU=sx1Ia)#
zkPIXPKhFT}Y|8N1F>NxC3?u_P26#RcD6s}MM>{%TtOWoLFl+*!4`$Ysz#7;b5rL?e
z0=-nD#ZWKDc!|6k*c`oFG@1{Ml|Pynwbe0yv2@Yum^K+m2D%Ke_l1mk|6k!R)7#`*
zN}6OK8ThXZ=wNy?o#5-@ZvFC|ylV^e7D{1WqXU88c?94G&yiCLdc4p_UJY!HoQ307
Q4$Oyu5t1eu_yq>u0c4#t)&Kwi

literal 0
HcmV?d00001

diff --git a/Icons/erase.svg b/Icons/erase.svg
new file mode 100644
index 0000000..7a584b4
--- /dev/null
+++ b/Icons/erase.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="5px" viewBox="0 0 14 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Path 3</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-48.000000, -173.000000)" stroke="#FFFFFF" stroke-width="4">
+            <g id="Group-2" transform="translate(40.000000, 160.000000)">
+                <path d="M8,15.6666667 L22,15.6666667" id="Path-3"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/Icons/wave.svg b/Icons/wave.svg
new file mode 100644
index 0000000..43b456f
--- /dev/null
+++ b/Icons/wave.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="9px" viewBox="0 0 22 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Path</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Artboard" transform="translate(-44.000000, -51.000000)" stroke="#FFFFFF" stroke-width="4">
+            <g id="Group-3" transform="translate(40.000000, 40.000000)">
+                <path d="M6.66666667,15.3333333 C9.36459466,12.3384576 12.2192522,12.3384576 15.2306392,15.3333333 C18.2420262,18.3282091 21.1651465,18.3282091 24,15.3333333" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/Icons/zigzag.svg b/Icons/zigzag.svg
new file mode 100644
index 0000000..84a0782
--- /dev/null
+++ b/Icons/zigzag.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="12px" viewBox="0 0 23 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Path 2</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
+        <g id="Artboard" transform="translate(-43.000000, -109.000000)" stroke="#FFFFFF" stroke-width="4">
+            <g id="Group" transform="translate(40.000000, 100.000000)">
+                <polyline id="Path-2" points="6.66666667 15 11.2651176 12 17.6113927 18 22.6666667 15"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/drawing.js b/drawing.js
index d14728d..6b910ea 100644
--- a/drawing.js
+++ b/drawing.js
@@ -1,7 +1,6 @@
 var x, y
-
-var WIDTH = 640
-var HEIGHT = 300
+var WIDTH = 900
+var HEIGHT = 900
 var viz, sketch
 var audioLoaded = false
 const STATE_AUDIO = 0
@@ -14,6 +13,7 @@ function createLines (offsetX, offsetY) {
 }
 
 var bgColor = '#dbd8e3'
+//how can i set this bgColor to 0% opacity?//
 function setup () {
   cursor(CROSS)
   if (windowHeight < HEIGHT) {
@@ -38,9 +38,9 @@ function draw () {
   if (state < STATE_AUDIO) {
     viz.background(bgColor)
 
-    viz.textSize(32)
-    viz.fill(150)
-    viz.text('Preparing stuff', WIDTH / 2 - 100, HEIGHT / 2)
+    viz.textSize(20)
+    viz.fill(300)
+    viz.text('Preparing stuff', WIDTH / 2 - 60, HEIGHT / 2)
     image(viz, 0, 0, WIDTH, HEIGHT)
     return
   }
@@ -48,9 +48,9 @@ function draw () {
   if (state < STATE_DRAW) {
     viz.background(bgColor)
 
-    viz.textSize(32)
-    viz.fill(150)
-    viz.text('Draw something here', WIDTH / 2 - 150, HEIGHT / 2)
+    viz.textSize(20)
+    viz.fill(300)
+    viz.text('Scribble, quibble, dribble, you know what to do. Hit spacebar when you’re done.', WIDTH / 2 - 300, HEIGHT / 2)
     image(viz, 0, 0, WIDTH, HEIGHT)
     return
   }
@@ -117,6 +117,7 @@ var eraser = document.querySelector('#toolbox__eraser')
 
 var tool = 0 // 0 = pen, 1 = eraser
 
+
 pencil.onclick = function (e) {
   tool = 0
   eraser.classList.remove('toolbox__item--selected')
diff --git a/index.html b/index.html
index b7843c0..344524e 100644
--- a/index.html
+++ b/index.html
@@ -14,31 +14,31 @@
     <div id="sketch-canvas">
 
     </div>
+
     <div class="spaced">
 
-      <div class="spaced toolbox">
-        <p>
-          Select tool
-        </p>
-        <button id="toolbox__pencil" class="toolbox__item toolbox__item--selected">Brush 1</button>
-        <button id="toolbox__pencil-2" class="toolbox__item">Brush 2</button>
-        <button id="toolbox__eraser" class="toolbox__item">Eraser</button>
+      <div id="floating-button-area" class="spaced toolbox">
+        <a id="toolbox__pencil" class="toolbox__item toolbox__item--selected"> <img class="brushicon" src="Icons/wave.svg"> </a>
+        <a id="toolbox__pencil-2" class="toolbox__item"> <img class="brushicon" src="Icons/zigzag.svg"> </a>
+        <a id="toolbox__eraser" class="toolbox__item"> <img class="brushicon" src="Icons/erase.svg">  </a>
       </div>
-      <div class="spaced">
-        <label for="triad">Select Scale</label>
-        <select id="triad">
-          <option value="A">A</option>
-          <option value="A#">A#</option>
-          <option value="B">B</option>
-          <option value="C">C</option>
-          <option value="C#">C#</option>
-          <option value="D">D</option>
-          <option value="D#">D#</option>
-          <option value="E">E</option>
-          <option value="F">F</option>
-          <option value="F#">F#</option>
-          <option value="G">G</option>
-          <option value="G#">G#</option>
+
+      <div id="key-selection-area"class="spaced">
+      
+          <button value="A">A</button>
+          <button value="A#">A#</button>
+          <button value="B">B</button>
+          <button value="C">C</button>
+          <button value="C#">C#</button>
+          <button value="D">D</button>
+          <button value="D#">D#</button>
+          <button value="E">E</button>
+          <button value="F">F</button>
+          <button value="F#">F#</button>
+          <button value="G">G</button>
+          <button value="G#">G#</button>
+       
+       <!-- to do: create drop-up from the Key selectors for these options
         </select>
         <select id="type">
           <option value="major">Major</option>
@@ -48,12 +48,12 @@
           <option value="myxolydian">Myxolydian</option>
           <option value="aeolian">Aeolian</option>
           <option value="locrian">Locrian</option>
-        </select>
+        </select> -->
+
       </div>
+
     </div>
-      <div class="spaced">
-        Use your cursor to draw patterns on the canvas to generate music. Use the dropdown to change the foundation scale/mode.
-      </div>
+     
         <!-- import the webpage's javascript file -->
     <script src="Tone.js"></script>
     <script src="Tonejs-Instruments.js"></script>
diff --git a/style.css b/style.css
index 496a33d..916ba3c 100644
--- a/style.css
+++ b/style.css
@@ -3,7 +3,7 @@
 body {
   font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
   margin: 2em;
-  background-color: #5c5470;
+  background-image: linear-gradient(100deg, #8256D6, #5943C8, #3C39BC);
   color: #dbd8e3;
 }
 html, body {
@@ -20,32 +20,70 @@ body {
   margin: 0;
   display: flex;
   flex-wrap: wrap;
+  /* Making this fullscreen smhow?. */
+  justify-content: left;
+  align-items: top;
+}
 
-  /* This centers our sketch horizontally. */
-  justify-content: center;
+#floating-button-area{
+  position: absolute;
+  left: 40px;
+  top: 60px;
+  width: 100px;
+  height: 200px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  flex-direction: column;
+}
 
-  /* This centers our sketch vertically. */
-  align-items: center;
+#key-selection-area {
+  position:absolute;
+  left:50px;
+  bottom: 50px;
+  width:1600px;
+  height:50px;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding: 50px 0;
 }
 
 #sketch-canvas {
    display: block;
+   position: absolute;
+   top:0;
+   right:0;
+   bottom:0;
+   left:100px;
 }
 
-.spaced {
-   margin: 16px;
-}
-
+  /* trying some code for brush buttons */
 .toolbox__item {
-    font-size: 14px;
+    position: relative;
+    height: 42px;
+    width: 42px;
+    border-radius: 40px;
+    text-align: center;
+    line-height: 42px;
+    background: #9566DF;
+    margin-bottom: 42px;
     cursor: pointer;
-    padding: 16px;
-    border: none;
-    background: #352f44;
-    color: #ccc;
+    transition: all .25s ease;
 }
 
+
+.toolbox__item:hover {
+      box-shadow: 4px 10px 14px 0px rgba(0,0,0,0.15);
+      }
+
+
 .toolbox__item--selected {
-    color: #333;
-    background: #dbd8e3;
+    background: #FF90C3;
+    box-shadow: 4px 10px 14px 0px rgba(168,137,26,0.4);
 }
+
+
+
+
+
diff --git a/testing.html b/testing.html
deleted file mode 100644
index e69de29..0000000