block by dribnet 848bf73441cea9b43ca1091827d7996e

p5js dress

Full Screen

Dress Designer

Instructions:

Silly code due to this tweet existing.

Image template taken from here.

index.html

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="dress.js"></script>
</head>
<body style="background-color:white">
    <div id="canvasContainer"></div><p>
    <pre>
Instructions: 
 * Mouse Drag
 * Spacebar clears the screen.
 * s to save an image (use open link to activate)
</pre>    	
</body>

dress.js

const bgcolor = "#e0d1bc";
let bgImage = null;
let lastX = null, lastY = null;

function preload() {
  bgImage = loadImage('hips.png');
}

function setup() {
  let canvas = createCanvas(960, 960);
  canvas.parent('canvasContainer');
  frameRate(60);
  do_clear();
}

function do_clear() {
  background(bgcolor);
  image(bgImage, 0, 0);
}

function mousePressed() {
  lastX = mouseX;
  lastY = mouseY;
  return false;
}

function draw() {
  if (mouseIsPressed) {
    let radius = 4 * (Math.abs(lastX - mouseX) + Math.abs(lastY - mouseY));
    ellipse(mouseX, mouseY, radius);
    ellipse((width-mouseX), mouseY, radius);
    lastX = mouseX;
    lastY = mouseY;
  }
}

function keyTyped() {
  if (key == ' ') {
    do_clear();
    return false;
  }
  if (key == 's') {
    saveImage();
    return false;
  }  
}

z_purview_helper.js

// note: this file is poorly named - it can generally be ignored.

// helper functions below for supporting blocks/purview

function saveImage() {
  // generate 960x500 preview.jpg of entire canvas
  // TODO: should this be recycled?
  var offscreenCanvas = document.createElement('canvas');
  offscreenCanvas.width = 960;
  offscreenCanvas.height = 960;
  var context = offscreenCanvas.getContext('2d');
  // background is flat white
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 960, 960);
  context.drawImage(this.canvas, 0, 0, 960, 960);
  // save to browser
  var downloadMime = 'image/octet-stream';
  var imageData = offscreenCanvas.toDataURL('image/jpeg');
  imageData = imageData.replace('image/jpeg', downloadMime);
  p5.prototype.downloadFile(imageData, 'dress.jpg', 'jpg');
}