block by dribnet 08227ce66bc906a8f94fb21c14b47ac9

cracks

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

function setup() {
  createCanvas(windowWidth, windowHeight);
  let canvas = createCanvas(960, 540);
  canvas.parent('canvasContainer');
 
}

let c1, c2;

function draw() {
  background(255);
  noFill();
  strokeWeight(6);
  


   c1 = random(0.5,0.35);
   c2 = random(0.05, 0.2);
   crack(0.2*height,  0.1 *height, c1*width, c2);
    ground_up(0.2*height,  0.1 *height, c1*width, c2);
  
   c1 = random(0.6,0.8); 
   c2 = random(0.05, 0.2);
   crack(0.2*height, 0.1 *height, c1*width, c2);
   ground_down(0.2*height, 0.1 *height, c1*width, c2);
  
  


  
   c1 = random(0.2,0.35);
   c2 = random(0.05, 0.2);
   crack(0.47*height,  0.15*height, c1*width, c2);
    ground_up(0.47*height,  0.15*height, c1*width, c2);
  
   c1 = random(0.6,0.8); 
   c2 = random(0.05, 0.2);
   crack(0.5*height, 0.18*height, c1*width, c2);
   ground_down(0.5*height, 0.18*height, c1*width, c2);
  


   c1 = random(0.5,0.65); 
   c2 = random(0.05, 0.2);
   crack(0.75*height, 0.2*height, c1*width, c2);
   ground_up(0.75*height, 0.2*height, c1*width, c2);
  
  
   c1 = random(0.86,0.9); 
   c2 = random(0.01, 0.05);
   crack(0.8*height, 0.22*height, c1*width, c2);
   ground_down(0.8*height, 0.22*height, c1*width, c2);
  

  
  
  noLoop();
}

function crack( vpos, h, s, c2){
  
  
  noFill();
  
    for(let j=30; j>=0; j--){
    push();
    translate(0, j*5 );
    stroke( 220-j*4 +random(20));
      beginShape();
      curveVertex( 0, vpos);
      curveVertex( 0, vpos);
      curveVertex(s +  c2 *width, vpos-0.2*h);
      curveVertex(s -  c2 *width,  vpos-0.7*h);
      curveVertex(width,  vpos-h);
      curveVertex(width,  vpos-h);
      endShape();
    pop();  
  }
}

function ground_up( vpos, h, s, c2){
  fill(255);
  noStroke();
    beginShape();
    curveVertex( 0, vpos);
    curveVertex( 0, vpos);
    curveVertex(s +  c2 *width, vpos-0.2*h);
    curveVertex(s -  c2 *width,  vpos-0.7*h);
    curveVertex(width,  vpos-h);
    curveVertex(width,  vpos-h);
    curveVertex(width,vpos-h);
    curveVertex(0,vpos-h);
    curveVertex(0, vpos);
    endShape();
}

function ground_down( vpos, h, s, c2){
  fill(255);
  noStroke();
    beginShape();
    curveVertex( 0, vpos);
    curveVertex( 0, vpos);
    curveVertex(s +  c2 *width, vpos-0.2*h);
    curveVertex(s -  c2 *width,  vpos-0.7*h);
    curveVertex(width,  vpos-h);
    curveVertex(width,  vpos-h);
    curveVertex(width, height);
    curveVertex(0, height);
    curveVertex(0, vpos);
 
    endShape();
}

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');
}