dribnet/.block

## .block
license: mit
height: 960

## README.md

      
    Raw
  

              README.md
            
          
    Dress Designer

Instructions:

Mouse Drag
Spacebar clears the screen.
s to save an image (use open link to activate)


Silly code due to this tweet existing.
Image template taken from here.

  
## 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();
}


## five_faces.jpg

      
    Raw
  

              five_faces.jpg
            
          
## hips.png

      
    Raw
  

              hips.png
            
          
## 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>

## preview.jpg

      
    Raw
  

              preview.jpg
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## 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');
}
	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.2height, 0.1 height, c1*width, c2);
	ground_up(0.2height, 0.1 height, c1*width, c2);

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





	c1 = random(0.2,0.35);
	c2 = random(0.05, 0.2);
	crack(0.47height, 0.15height, c1*width, c2);
	ground_up(0.47height, 0.15height, c1*width, c2);

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



	c1 = random(0.5,0.65);
	c2 = random(0.05, 0.2);
	crack(0.75height, 0.2height, c1*width, c2);
	ground_up(0.75height, 0.2height, c1*width, c2);


	c1 = random(0.86,0.9);
	c2 = random(0.01, 0.05);
	crack(0.8height, 0.22height, c1*width, c2);
	ground_down(0.8height, 0.22height, 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.2h);
	curveVertex(s - c2 width, vpos-0.7h);
	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.2h);
	curveVertex(s - c2 width, vpos-0.7h);
	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.2h);
	curveVertex(s - c2 width, vpos-0.7h);
	curveVertex(width, vpos-h);
	curveVertex(width, vpos-h);
	curveVertex(width, height);
	curveVertex(0, height);
	curveVertex(0, vpos);

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