お絵かきアプリ


カラーなどのメニューとキャンバスが別レイヤーのアプリです。

 let graphics;
let stc=0;
let saveButton;
let deleteButton;
let slider;
function setup() {
  createCanvas(400, 400);
  graphics = createGraphics(600, 400);
  colorMode(HSB, 100);
  graphics.clear();
  graphics.background(240);
  saveButton=createButton("save");
  saveButton.position(350,0);
  saveButton.mousePressed(saveImage);
  deleteButton=createButton(" X ");
  deleteButton.position(350,22);
  deleteButton.mousePressed(deleteImg);
  
  
  slider=createSlider(1,50,1);
  slider.position(210,0);
}

function draw() {
  background(240);
  let val=slider.value();
  graphics.stroke(stc);
  graphics.strokeWeight(val);
  if(mouseIsPressed&&mouseY>50){
  graphics.line(mouseX, mouseY, pmouseX, pmouseY);
  }
 paint();

  button(0,0,20,color(0));
  button(20,0,20,color(50));
  button(40,0,20,color(100));
  
  for(let i=0; i<7;i++){
   button(60+i*20,0,20,color(i*11,100,100)); 
    
  }
  
  
}
function button(x,y,s,c){
  let bc=c;
  if(mouseX>x&&mouseX<x+s&&mouseY>y&&mouseY<y+s&&mouseIsPressed){
    bc=0;
    stc=c;
  }else{
   bc=c; 
  }
  fill(bc);
  rect(x,y,s,s); 
}


function saveImage(){
 graphics.save(year()+"_"+month()+"_"+day()+"_"+hour()+"_"+minute()+"_"+second()+".jpg"); 
}



function paint() {
  image(graphics, 0, 0);
}

function deleteImg(){
    background(240);
  graphics.background(240);
}



カテゴリー: p5js

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です