Melanin

//create input

//create button

//createA

//one more element - create slider

​

​

let wallpaper;

let button;

let a;

let slider;

​

​

function preload(){

wallpaper = loadImage('hands.png');

}

​

function setup() {

  createCanvas(800,800);

  image(wallpaper,0,0);

//button

  let drawButton = createButton("click me for more --")

  drawButton.position(400,40)

 // button = createButton('press me');

 // button.position(0, 0);

  //button.mousePressed(changeBG);

  drawButton.style('color:brown')

  drawButton.size(200,30)

  drawButton.mousePressed(drawRectangle)

//a

  a = createA('https://www.melaninandmuscles.com/blog','Link: Melanin and Muscles')

  a.position(400,10)

//input

  let inp = createInput('search for more');

  inp.position(885, 0);

  inp.style('color:brown')

  inp.size(220,30);

  //inp.input(myInputEvent);

​

​

//4th element -slider

  slider = createSlider(0, 255, 100);

  slider.style('color:black')

  slider.position(900, 40);

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

​

}

​

function drawRectangle(){

  fill(99,53,44)

  noStroke();

  rect(50,200,300,100)

  rect(400,200,300,100)

​

}

​

function myInputEvent() {

  console.log('you are typing: ', this.value(50));

}

​

function changeBG() {

  //let val = random(255);

  background(val);

  window.open('link')

​

}

​

function draw() {

}

​

​