​

​

let whitebrushs = ["💭","🦷","🦴","💀","🥚","🏐","🎲"];

let pinkbrushs = ["🌺","🌸","🐷","🩰" ];

let yellowbrushs = ["😶","🥎","🍌","🤚","😃","🐥","🍋"];

let orangebrushs = ["🏉","🔥","🏀","🍑","🐫"];

let redbrushs = ["🍅","🍎","👅","❤️","😡","🐙","📕"];

let greenbrushs = ["🐸","🍐","👽","🥦","🥬","🥒","♻️"];

let bluebrushs = ["🥶","💙","💦","💧","🐋","🐟"];

let blackbrushs = ["♠️","🌚","🕷️","💣","♟️","🎮"];

​

​

let white_id  = 0;

let pink_id = 0;

let yellow_id=0;

let orange_id=0;

let red_id=0;

let green_id=0;

let blue_id=0;

let black_id=0;

​

​

​

​

let cols = [

  "#FFFFFF",

  "#fbff98",

  "#98e3ff",

  "#00ffc6",

"#4AC0ED",

  "#FFC215",

  "#F42CB1",

   "#444444",

   "#555555"

];

​

let brushcolor = "#FFFFFF";

​

let brushsize = 1;

​

​

//var socket = io("https://socky-socky.glitch.me");

​

​

let ns = .004;

​

let dragging = false;

​

let speed_factor = 0;

let  shrink = 1;

​

let pos;

​

let is_fullscreen = false;

​

let initbtn;

​

let initiated = false;

​

let menuheight = 80;

let save_btn;

​

let clicksnd;

​

let man_brushsize = 1;

let man_brushsize_slider;

​

let draw_canvas;

​

let current_selected_brush_slot_id = 0;

​

function preload(){

​

  clicksnd = loadSound("ping.mp3");

​

}

​

​

let has_touch = false;

​

let active_brush_div;

​

function setup() {

  noSmooth();

  active_brush_div = document.getElementById("active_b");

  has_touch = is_touch_enabled();

  if(has_touch){print("hastouch");}else{print("has_NO_touch");}

  save_btn  = document.getElementById("save_btn");

   save_btn.addEventListener("click",saveIt);

  initbtn = document.getElementById("init_btn");

  initbtn.addEventListener("click",init);

  createCanvas(window.innerWidth,window.innerHeight);

​

  clear();

 // 

  //colorMode(HSB,100,100,100);

 // blendMode();

  rectMode(CENTER);

  pos = createVector(0,0);

  // socket.on("painty", someone_is_painting);

  frameRate(30);

  background(233);

 //man_brushsize_slider = document.createElement("INPUT");

  man_brushsize_slider =  document.createElement("INPUT");

// man_brushsize_slider = createSlider(2, 100, 10);

  man_brushsize_slider.className = "slider";

  man_brushsize_slider.id = "size_slider";

  //console.log( man_brushsize_slider);

  man_brushsize_slider.type="range";

  man_brushsize_slider.value = 10;

  document.body.append(man_brushsize_slider);

   update_color_bar();

  draw_canvas = createGraphics(window.innerWidth,window.innerHeight);

}

​

function saveIt(){

​

  console.log("save_shot");

  draw_canvas.save("erobics_drawn_together.png");

​

}

​

​

function draw() {

  //console.log(".");

  if(dragging){

    if(mouseY>height-menuheight || mouseY<menuheight || mouseX<menuheight/2 || mouseX>width-menuheight/2){

    return;

    }

    pos.x = mouseX/innerWidth;

    pos.y =( mouseY- scrollY)/innerHeight;

    speed_factor = dist(mouseX,mouseY,pmouseX,pmouseY)*.3+6;

    speed_factor = min(15,speed_factor);

     brushsize = speed_factor+ 5*shrink;

    //drawDot(pos.x,pos.y);

    drawDot_simple(pos.x,pos.y,brushcolor,brushsize,cbrushid);

     emmit();

    if(shrink>.2){

      shrink *=.98;

    }

  }

  if(man_brushsize != man_brushsize_slider.value*.4){

    man_brushsize = man_brushsize_slider.value*.4;

    active_brush_div.style.fontSize = (man_brushsize*.8+10)+"px";

  }

  noStroke();

  image(draw_canvas,0,0);

  image(brush_bar,0,height-menuheight*.75);

}

​

​

​

​

​

​

//---------------------------

//---------------------------

//---------------------------

​

​

let brush_bar;

​

function update_color_bar(){

​

  brush_bar = createGraphics(width,menuheight);

  brush_bar.background(233);

  let div = width/(cols.length);

     brush_bar.noStroke();

     brush_bar.textAlign(CENTER);

  brush_bar.fill(111);

   brush_bar.textSize(30);

​

  for(let i=0;i<ebrushes.length;i++){

    if(current_selected_brush_slot_id == i){

      brush_bar.textSize(40);

    }else{

     brush_bar.textSize(28);

    }

        brush_bar.text(returnCurrentColorBrushTip(i),

         div*i+div/2,menuheight*.5

         );

  }

​

​

}

​

​

//---------------------------

//---------------------------

//---------------------------

​

function someone_is_painting(data){

​

   drawDot_simple(data.x,data.y,data.col,data.speed,data.bid);

​

}

​

​

​

//---------------------------

//---------------------------

//---------------------------

​

​

function mouseReleased(){

    if(!has_touch){

     UP();

​

   }

​

​

}

​

​

​

//---------------------------

//---------------------------

//---------------------------

​

​

function init(){

​

  clear();

​

 //openFullscreen();

   //  is_fullscreen = true;

  initiated = true;

​

  initbtn.style.display = "none";

  //draw_canvas.background(244);

  draw_canvas.noStroke();

   draw_canvas.fill(250);

  draw_canvas.rect(menuheight/2,menuheight,width-menuheight,height-menuheight*2);

 // man_brushsize_slider.position(width*.2, 20);

  //man_brushsize_slider.size(width*.6, 20);

}

​

​

​

//---------------------------

//---------------------------

//---------------------------

​

function mousePressed(){

   if(!has_touch){

     DOWN();

​

   }

​

}

function touchStarted(){

​

  if(has_touch){

    DOWN();

  }

}

​

function touchEnded(){

if(has_touch){

  UP();

}

}

// -----------------------------------

// -----------------------------------

// -----------------------------------

function DOWN(){

​

  if(!initiated){return;}

   shrink = .8;

  click_ts = millis()*.01;

  dragging=true;

​

}

​

// -----------------------------------

// -----------------------------------

// -----------------------------------

​

function UP(){

   dragging=false;

   if(mouseY>height-menuheight){

      pickColor();

      update_color_bar();

    }else{

      // reactivate switch!

      picked = false;

      //update_color_bar();

    }

​

​

}

function returnCurrentColorBrushTip(_brushid){

​

   if(_brushid==0){return whitebrushs[white_id];}

   if(_brushid==1){return pinkbrushs[pink_id];}

   if(_brushid==2){return yellowbrushs[yellow_id];}

   if(_brushid==3){return orangebrushs[orange_id];}

   if(_brushid==4){return redbrushs[red_id];}

   if(_brushid==5){return greenbrushs[green_id];}

   if(_brushid==6){return bluebrushs[blue_id];}

   if(_brushid==7){return blackbrushs[black_id];}

   if(_brushid==8){return emojis_db[random_emoji_id];}

​

}

​

​

​

​

//---------------------------

//---------------------------

//---------------------------

​

​

let random_emoji_id=0;

​

​

function drawDot_simple(_x,_y,_col,_speed,_brushid){

​

  noSmooth();

 rectMode(CENTER);

  let cbstr = ebrushes[_brushid];

  cbstr = returnCurrentColorBrushTip(_brushid);

  for(let i=0;i<1;i++){

    let offx = random()-.5;

    let offy = random()-.5;

    _x += offx*.0001* _speed* man_brushsize;

    _y += offy*.0001* _speed* man_brushsize;

     draw_canvas.noStroke();

     draw_canvas.fill(_col);

     draw_canvas.textAlign(CENTER);

    let tsize = _speed*.3 + man_brushsize + random()*5;

    draw_canvas.textSize(tsize*1.3);

    draw_canvas.push();

    draw_canvas.translate(_x*width+2,_y*height+2);

    let r = random()*HALF_PI-HALF_PI*.5;

    draw_canvas.rotate(r*.5);

    draw_canvas.text(cbstr,0,0);

​

    draw_canvas.pop();

  }

​

}

​

​

​

//---------------------------

//---------------------------

//---------------------------

​

​

​

function windowResized() {

  /*

 resizeCanvas(windowWidth, windowHeight);

  draw_canvas = createGraphics(window.innerWidth,window.innerHeight);

  //draw_canvas.clear();

  //man_brushsize_slider.size(width*.6, 20);

  //man_brushsize_slider.position(width*.2, 20);

  draw_canvas.noStroke();

  draw_canvas.fill(250);

   draw_canvas.rect(menuheight/2,menuheight,width-menuheight,height-menuheight*2);

   update_color_bar();

   */

}

​

​

​

​

function emmit(){

   let data = { 

        bid:cbrushid,

        col:brushcolor,

        speed:brushsize,

        x:pos.x ,

        y:pos.y

      };

 // socket.emit("painty", data);

​

​

​

}

​

​

​

​

​

//---------------------------

//---------------------------

//---------------------------

​

​

let ebrushtip = ".";

let cbrushid = 0;

​

let picked = false;

​

function pickColor(){

​

  let cid = int(map(mouseX,0,width,0,cols.length));

​

   ebrushtip = ebrushes[cid];

   cbrushid = cid;

   brushcolor = cols[cid];

  clicksnd.play();

  clicksnd.amp(.25);

  clicksnd.rate(1.+random());

 //  console.log("picked");

  current_selected_brush_slot_id = cid;

   if(picked  == false){

    picked = true;

    return;

  }

   if(cid==0){white_id++; if(white_id>=whitebrushs.length){white_id=0;}}

   if(cid==1){pink_id++; if(pink_id>=pinkbrushs.length){pink_id=0;}}

   if(cid==2){yellow_id++; if(yellow_id>=yellowbrushs.length){yellow_id=0;}}

   if(cid==3){orange_id++; if(orange_id>=orangebrushs.length){orange_id=0;}}

   if(cid==4){red_id++; if(red_id>=redbrushs.length){red_id=0;}}

   if(cid==5){green_id++; if(green_id>=greenbrushs.length){green_id=0;}}

   if(cid==6){blue_id++; if(blue_id>=bluebrushs.length){blue_id=0;}}

   if(cid==7){black_id++; if(black_id>=blackbrushs.length){black_id=0;}}

   if(cid==8){random_emoji_id = int(random(emojis_db.length));}

​

​

}

​

​

function is_touch_enabled() {

     var msTouchEnabled = window.navigator.msMaxTouchPoints;

    var generalTouchEnabled = "ontouchstart" in document.createElement("div");

    if (msTouchEnabled || generalTouchEnabled) {

        return true;

    }

    return false;

}

​

​

​

function openFullscreen() {

  var elem = document.documentElement;

  if (elem.requestFullscreen) {

    elem.requestFullscreen();

  } else if (elem.webkitRequestFullscreen) { /* Safari */

    elem.webkitRequestFullscreen();

  } else if (elem.msRequestFullscreen) { /* IE11 */

    elem.msRequestFullscreen();

  }

}