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.
Last active
March 28, 2024 03:04
-
-
Save dribnet/08227ce66bc906a8f94fb21c14b47ac9 to your computer and use it in GitHub Desktop.
cracks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit | |
| height: 960 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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'); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment