Drawscape

let cards = [];

let currentImg;

let img;

let img2;

let colorPicker;

let sel;

let slider;

let button;

​

function preload() {

  img = loadImage('rain.jpeg');

  img2 = loadImage('flower.png');

  img3 = loadImage('unico.png');

  img4 = loadImage('mer.png');

  img5 = loadImage('pup.jpeg');

  img6 = loadImage('kit.jpeg');

  img7 = loadImage('mon.jpeg');

  img8 = loadImage('egy.jpeg');

  img9 = loadImage('ely.jpeg');

  img10 = loadImage('star.jpeg');

  cards = [img,img2,img3,img4,img5,img6,img7,img8,img9,img10];

​

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(249,237,208);

  setupCanvas();

  currentImg = random(cards); // Initialize currentImg to a default image

  image(currentImg, 600, 60);

}

​

function setupCanvas() {

  noStroke();

  //colorpicker

  colorPicker = createColorPicker('#000000');

  colorPicker.position(60, 30);

​

  //dropdown menu

  sel = createSelect();

  sel.position(275, 35);

  sel.option("Normal Paint Brush (press 'N')");

  sel.option("Splatter Brush (press 'S')");

​

  //slider

  slider = createSlider(1, 100, 20, 1);

  slider.position(595, 35);

  slider.style('width', '180px');

​

  //button

  button = createButton("Save Canvas as Image (press 'i')");

  button.position(1100, 35);

  button.mousePressed(SaveImage);

}

​

function draw() {

  //underline

  stroke('#7D3C98');

  strokeWeight(3);

  line(60,115,370,115);

  noStroke();

  //title

  fill('#7D3C98');

  textSize(48);

  text("DRAWSCAPE", 60, 110);

  //explanation

  fill ('black');

  textSize(16);

  text("Welcome to our online coloring game!\nChoose your colors from the colorpicker\nUse the normal brush or the splatter brush to color the image\nAdjust the thickness of your brushes with the slider\nSave your canvas by hitting 'i'\nChange the image you're coloring over by pressing the space bar",60,150);

​

  //draw a menu bar

  fill('#d3d3d3');

  rect(0, 0, width, 60);

​

  //create text

  fill('black');

  textSize(16);

  text("Brush Thickness (press '+' to increase, '-' to decrease):", 595, 30);

​

  //create text

  fill('black');

  textSize(16);

  text("Brush Type", 275, 25);

​

  fill('black');

  textSize(16);

  text("Color of brush", 60, 25);

​

  if (mouseIsPressed && mouseY > 100) {

    if (sel.value() == "Normal Paint Brush (press 'N')") {

      //normal paint brush

      //draw a line with the correct color

      stroke(colorPicker.color());

      strokeWeight(slider.value());

      line(pmouseX, pmouseY, mouseX, mouseY);

    }

    if (sel.value() == "Splatter Brush (press 'S')") {

      //splatter brush

      //draw ellipses with the correct thickness at random locations a random amount of times

      for (i = 0; i < random(1, 10); i++) {

        //draw the ellipse

        noStroke();

        fill(colorPicker.color());

        ellipse(mouseX + random(-10, 10), mouseY + random(-10, 10), slider.value(), slider.value());

      }

    }

  }

​

}

​

function SaveImage() {

  var to_save = get(0, 100, width, height - 100);

  to_save.save("canvas.png");

}

​

//check for key press

function keyPressed() {

​

  if (key == 'n' || key == 'N') {

    //normal brush

    sel.selected("Normal Paint Brush (press 'N')");

  } else if (key == 's' || key == 'S') {

    //splatter brush

    sel.selected("Splatter Brush (press 'S')");

  } else if (key == 'e' || key == 'E') {

    //increase brush thickness

    slider.value(slider.value() + 1);

  } else if (key == '-') {

    //decrease brush thickness

    slider.value(slider.value() - 1);

  } else if (key == 'r' || key == 'R') {

    //colorpicker 

    var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);

    colorPicker = createColorPicker(randomColor);

    colorPicker.position(10, 50);

  } else if (key == 'i' || key == 'I') {

    //save the canvas as an image by calling saveImage()

    SaveImage()

     } else if (keyCode == 32) { // spacebar

    currentImg = random(cards);

    background(249,237,208); // clear the canvas

    image(currentImg, 600, 60);

  }

}

​