p5.js Web Editor

xxxxxxxxxx
/*
*** PAINT ***
​
Hacer un pixel art
​
Funciones:
-Cambiar tamaño del pincel con +/-
-Cambiar color con números 0-9
-Limpiar con c
-Guardar dibujo con s
- r-rectangle  t-triangle  l-line e-ellipse
​
Pendiente:
-Subir imagen
-Selector de color a partir de clicar en el lienzo
-Poner texto
​
 En otra capa
-Selector de color y guardar en las variables c0-c9
-Pantalla de help-H
​
Y más cosas cuando vea q se puede hacer con js
​
​
Made by Laura Pisa 
My web: www.sites.google.com/view/frogrammergames
​
*/
​
let c, size = 50;
let c1, c2, c3, c4, c5, c6, c7, c8, c9, c0;
let mode = "paint";
let posX = -1, posY = -1;
let alphaValue=255;
​
let menuW, menuH, margin;
let squareS;
​
let maxSize;
​
let proportion = 0, propX, propY;
​
let firstX=-1,firstY=-1;
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(255);
  stroke(size);
  c = color(0);
  
  menuH = height/6;
  margin = pow(width,1/6);
  menuW = width-margin;
  maxSize = menuH-margin*10;
  size = maxSize;
​
​
  //Colores iniciales
  c1 = color(255, 0, 0);
  c2 = color(250, 140, 29);
  c3 = color(255, 243, 18);
  c4 = color(0, 255, 0);
  c5 = color(24, 128, 34);
  c6 = color(7, 134, 252);
  c7 = color(177, 37, 250);
  c8 = color(252, 87, 245);
  c9 = color(0);
  c0 = color(255);
}
​
function draw() {
  fill(c);
  
  shape();
  
  menu();
  
}
​
function keyPressed() {
  
  //Aumentar
  if (key === "+") {
    if(size < maxSize){
      size++;
    }
  }
  if (key == "-") {
    if (size > 1) {
      size--;
    }
  }
​
  if (key == "c") {
    background(255); //Limpiar el lienzo
  }
  if (key == "s") {
    saveCanvas("mySketch", "png"); //Guardar el dibujo
  }
​
  //Cambiar de color
  if (key == "1") {
    c = c1;
  }
  if (key == "2") {
    c = c2;
  }
  if (key == "3") {
    c = c3;
  }
  if (key == "4") {
    c = c4;
  }
  if (key == "5") {
    c = c5;
  }
  if (key == "6") {
    c = c6;
  }
  if (key == "7") {
    c = c7;
  }
  if (key == "8") {
    c = c8;
  }
  if (key == "9") {
    c = c9;
  }
  if (key == "0") {
    c = c0;
  }
​
  if (key == "e") {
    if(mode == "elipse"){ proportion = abs(proportion-1);}
    else{ proportion = 0;}
    mode = "ellipse";
  }
  if (key == "r") {
    if(mode == "rectangle"){ proportion = abs(proportion-1);}
    else{ proportion = 0;}
    mode = "rectangle";
  }
  if (key == "t") {
    if(mode == "triangle"){ proportion = 1;}
    else{ proportion = 0;}
    mode = "triangle";
  }
  if (key == "l") {
    if(mode == "line"){ proportion = 1;}
    else{ proportion = 0;}
    mode = "line";
  }
  if (key == "p") {
    mode = "paint";
  }
}
​
function menu() {
  //Barra del menú
  fill(132, 209, 139);
  strokeWeight(margin);
  stroke(40, 107, 46);
  rect(margin / 2, margin / 2, menuW, menuH);
  
  //Cuadrado del pincel
  stroke(100, 167, 106);
  fill(194, 237, 197);
  rect(width - maxSize - margin * 6, margin * 4, maxSize + 2 * margin, maxSize + 2 * margin);
​
  //Tamaño del pincel
  noStroke();
  fill(c); 
  ellipse(
    width - margin * 5 - maxSize / 2,
    margin * 5 + maxSize / 2,
    size,
    size
  );
}
​
function shape(){
  
  if(proportion == 1){
    if(firstX == -1){
      firstX = mouseX;
      firstY = mouseY;
    }else if(propX == 0 && abs(firstX-mouseX)>10){
      propX = abs(mouseX - firstX)/abs(mouseY - firstY);
    }
  }
  else{
    propX = 0;
    propY = 0;
  }
  
  //Comprobar el modo actual(pintar, rect, circ, linea, trian)
  if (mode == "paint") {
    noStroke();
    if (mouseIsPressed) {
      circle(mouseX, mouseY, size);
    }
  } 
  else if (mode == "rectangle") {
    noStroke();
    if (mouseIsPressed) {
      if (posX == -1) {
        posX = mouseX;
        posY = mouseY;
      } else {
        if(propX == 0){
          rect(min(posX, mouseX), min(posY, mouseY), abs(posX - mouseX), abs(posY - mouseY));
        }else{
        rect(min(posX, mouseX), min(posY*propX, mouseY), propX*abs(posY - mouseY), abs(posY - mouseY));
        }
      }
    } else if (posX != -1) {
      posX = -1;
      posY = -1;
      propY = 0;
      propX = 0;
    }
  }
  else if (mode == "ellipse") {
    noStroke();
    if (mouseIsPressed) {
        if (posX == -1) {
            // Guardamos la posición inicial cuando se hace el primer clic
            posX = mouseX;
            posY = mouseY;
        } else {
            let width, height;
​
            // Si la proporción no está activada
            if (propX == 0) {
                width = abs(mouseX - posX);  // Ancho basado en la distancia horizontal
                height = abs(mouseY - posY); // Alto basado en la distancia vertical
            } else {
                // Si la proporción está activada, el ancho se ajusta según el alto
                height = abs(mouseY - posY);  // Usamos la distancia en Y para el alto
                width = propX * height;       // El ancho es proporcional al alto (según propX)
            }
​
            // Dibujamos la elipse con el centro en posX, posY
            ellipse(posX, posY, width * 2, height * 2);  // Multiplicamos por 2 porque la función ellipse usa el diámetro, no el radio
        }
    } else if (posX != -1) {
        // Restablecemos las variables cuando se suelta el ratón
        posX = -1;
        posY = -1;
    }
}
​
  else if (mode == "triangle") {
    noStroke();
  if (mouseIsPressed) {
    if (posX == -1) {
      posX = mouseX;
      posY = mouseY;
    } else {
      triangle( posX, posY, mouseX, mouseY, posX - (mouseX - posX), mouseY);
    }
  } else if (posX != -1) {
    posX = -1;
    posY = -1;
  }
}
​
  else if (mode == "line") {
    strokeWeight(size);
    stroke(c);
    if (mouseIsPressed) {
      if (posX == -1) {
        posX = mouseX;
        posY = mouseY;
      } else {
        line(posX, posY, mouseX, mouseY);
      }
    } else if (posX != -1) {
      posX = -1;
      posY = -1;
    }
  }
}
​
​
​
Cookies

Sketch Files

Console

Preview
