DMS 121 / Bernard Aaron Dolecki / University at Buffalo / 2020

​

This project is a drawing program that I have made that allows the user to draw on the screen. This drawing is based on random color and size. The user is also able to save a photo of their drawing to their computer. In addition to this they are able to listen to a preloaded song while they draw if they want to.

​

Instructions: The frist button changes the background color

The seccond button changes the stroke color

The third button changes the stroke size

The fourth button adds music 

The fifth button turns off the music

The sixth button changes the stroke to an eraser

The sexenth button at the bottom right of the screen saves a photo to the users computer

list of references:

https://p5js.org/examples/drawing-continous-lines.html

https://p5js.org/reference/#/p5/cursor

https://p5js.org/reference/

​

link to final code on the p5.js web editor 

https://editor.p5js.org/rosarubi/sketches/Utp54Acod

*/

//variables

​

var song;

let playMode = 'restart';

var song2;

var song3;

let a = 0;

let b = 0;

let c = 0;

​

//preload audio

function preload(){

  song = loadSound('assets/Lindsey Stirling - Between Twilight.mp3');

  song2 = loadSound('assets/Lindsey Stirling - Lost Girls.mp3');

  song3 = loadSound('assets/Lindsey Stirling - Sleepwalking.mp3');

}

function setup() {

  createCanvas(710, 400);

}

​

function draw() {

  // print('mouseX ='+ mouseX, ' mousey ='+ mouseY);

  //buttons

  push();

  strokeWeight(1);

  rect(100, 10, 65, 20, 5);

  rect(200, 10, 30, 20, 5);

  rect(300,10,25,20,5);

  rect(400, 10,35,20,5);

  rect(500, 10,25,20,5);

  rect(600,10,35,20,5);

  rect(600, 370, 30, 20, 5);

    let s = 'background';

fill(50);

text(s, 100, 10, 10, 20);

  let z = 'color';

  fill(50);

text(z, 200, 10, 10, 20);

  let x = 'size';

  fill(50);

text(x, 300, 10, 10, 20);

  let y = 'sound';

  fill(50);

text(y, 400, 10, 10, 20);

let r = 'stop';

fill(50);

text(r, 500, 10, 10, 20);

  let t = 'eraser';

fill(50);

text(t, 600, 10, 10, 20);

  let q = 'save';

fill(50);

text(q, 600, 370, 10, 20);

  pop();

​

  //drawing

  if (mouseIsPressed === true && mouseY > 50) {

    line(mouseX, mouseY, pmouseX, pmouseY);

​

  }

  //change cursor

  if (mouseIsPressed === true) {

    cursor(CROSS);

  } else if (mouseIsPressed === false) {

    cursor('grab');

  }

​

​

}

​

//set what buttons are used for

function mousePressed() {

​

​

  //print('mouseX ='+ mouseX, ' mousey ='+ mouseY);

  if ((mouseX > 100) && (mouseX < 165) && (mouseY > 10) && (mouseY < 60)) {

​

     a = random(255);

    b = random(255);

    c = random(255);

    background(a, b, c);

  }

  if ((mouseX > 200) && (mouseX < 230) && (mouseY > 10) && (mouseY < 60)) {

    let d = random(255);

    let e = random(255);

    let f = random(255);

    stroke(d, e, f);

  }

   if ((mouseX > 300) && (mouseX < 325) && (mouseY > 10) && (mouseY < 60)){

     let g = random(50);

    strokeWeight(g);

   }

if ((mouseX > 400) && (mouseX < 435) && (mouseY > 10) && (mouseY < 60)){

 song.play();

 song.playMode('restart');

}

if ((mouseX > 500) && (mouseX < 525) && (mouseY > 10) && (mouseY < 60)){  

  song.stop();

  song2.stop();

  song3.stop();

}

if ((mouseX > 600) && (mouseX < 635) && (mouseY > 10) && (mouseY < 60)) {

  stroke(a,b,c);

}

if ((mouseX > 600) && (mouseX < 630) && (mouseY > 370) && (mouseY < 400)){

  save('myCanvas.png');

}

  if ((mouseX > 100) && (mouseX < 140) && (mouseY > 200) && (mouseY < 220)) {

    song2.play();

    song2.playMode('restart');

  } 

   if ((mouseX > 600) && (mouseX < 640) && (mouseY > 300) && (mouseY < 320)) {

    song3.play();

    song3.playMode('restart');

  } 

}

​