Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design Changes - Brush Buttons, Layout, Color #2

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Design Changes - Brush Buttons, Layout, Color #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d0566b
testing again
Jun 10, 2019
3d71768
Changed brush buttons to circular buttons, icons to be changed. tried…
Jun 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file added Icons/.DS_Store
View file
Open in desktop
Binary file not shown.
13 changes: 13 additions & 0 deletions Icons/erase.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions Icons/wave.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions Icons/zigzag.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 10 additions & 9 deletions drawing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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) {
Expand All @@ -38,19 +38,19 @@ 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)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fill() takes color as a parameter. 300 means gray value = 300 which is out of bounds (0-255 being the permissible range). check this out - https://p5js.org/learn/color.html

viz.text('Preparing stuff', WIDTH / 2 - 60, HEIGHT / 2)
image(viz, 0, 0, WIDTH, HEIGHT)
return
}

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)
Copy link
Owner

@dash1291 dash1291 Jun 11, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fill() takes color as a parameter. 300 means gray value = 300 which is out of bounds (0-255 being the permissible range). check this out - https://p5js.org/learn/color.html

viz.text('Scribble, quibble, dribble, you know what to do. Hit spacebar when you’re done.', WIDTH / 2 - 300, HEIGHT / 2)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol

image(viz, 0, 0, WIDTH, HEIGHT)
return
}
Expand Down Expand Up @@ -117,6 +117,7 @@ var eraser = document.querySelector('#toolbox__eraser')

var tool = 0 // 0 = pen, 1 = eraser


Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should avoid extraneous changes

pencil.onclick = function (e) {
tool = 0
eraser.classList.remove('toolbox__item--selected')
Expand Down
52 changes: 26 additions & 26 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
70 changes: 54 additions & 16 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks nice!

color: #dbd8e3;
}
html, body {
Expand All @@ -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;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

space after :

bottom: 50px;
width:1600px;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is too wide. we might have to think about how to make it scale according to the viewport width until some minimum width. narrower than that will qualify for some mobile effort which could be done later

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);
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

indentation issue. 4 spaces before box-shadow instead of 8. } should be shifted to the beginning of the line



.toolbox__item--selected {
color: #333;
background: #dbd8e3;
background: #FF90C3;
box-shadow: 4px 10px 14px 0px rgba(168,137,26,0.4);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spaces after commas :)

}


Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extra blank lines could be removed here