| license: mit |
This README should be updated as the code changes. Replace this placeholder text and use this README as a design journal to record your process. Be sure to use complete sentences, and you can reference your sketch which will appear above. The explanation should be short but complete, roughly 100 words.
Also update both images keeping their original sizes: preview.jpg (960x500) and thumbnail.png (230x120).
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.3/seedrandom.min.js""></script> | |
| <script src="https://d3js.org/d3-random.v1.min.js"></script> | |
| <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script> | |
| <script language="javascript" type="text/javascript" src="sketch.js"></script> | |
| <style> | |
| body { padding: 0; margin: 0; } | |
| .inner { position: absolute; } | |
| #controls { | |
| font: 300 12px "Helvetica Neue"; | |
| padding: 5; | |
| margin: 5; | |
| background: #f0f0f0; | |
| opacity: 0.0; | |
| -webkit-transition: opacity 0.2s ease; | |
| -moz-transition: opacity 0.2s ease; | |
| -o-transition: opacity 0.2s ease; | |
| -ms-transition: opacity 0.2s ease; | |
| } | |
| #controls:hover { opacity: 0.9; } | |
| </style> | |
| </head> | |
| <body style="background-color:white"> | |
| <div class="outer"> | |
| <div class="inner"> | |
| <div id="canvasContainer"></div> | |
| </div> | |
| <div class="inner" id="controls" height="500px"> | |
| <table> | |
| <tr> | |
| <td>(future interface here)</td> | |
| <td id="selector1Container"></td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| </table> | |
| </body> |
| const canvasWidth = 960; | |
| const canvasHeight = 500; | |
| function setup () { | |
| // create the drawing canvas, save the canvas element | |
| main_canvas = createCanvas(canvasWidth, canvasHeight); | |
| // position each element on the page | |
| main_canvas.parent('canvasContainer'); | |
| // rotation in degrees | |
| angleMode(DEGREES); | |
| } | |
| // global variables for colors | |
| const bg_color = "#c6bdab"; | |
| const fg_color1 = "#5b412a"; | |
| const fg_color2 = "#7b611a"; | |
| const stroke_color = "#c78a5b"; | |
| function draw () { | |
| // background color | |
| background(bg_color); | |
| // stroke color | |
| stroke(stroke_color) | |
| // move to position1, rotate, draw "head" ellipse | |
| push(); | |
| translate(960/4, 500/2); | |
| rotate(4); | |
| fill(fg_color1); | |
| ellipse(0, 0, 300, 400); | |
| // set fill to match background color | |
| fill(bg_color); | |
| // draw two eyes | |
| ellipse(-50, -80, 50, 30); | |
| ellipse( 50, -80, 50, 30); | |
| // set fill back to foreground for eyeballs | |
| fill(fg_color1); | |
| ellipse(-60, -80, 20, 20); | |
| ellipse( 40, -80, 20, 20); | |
| // mouth-hole with background color | |
| fill(bg_color); | |
| ellipse( 0, 70, 150, 20); | |
| pop(); | |
| // move to position2, rotate, draw "head" ellipse | |
| push(); | |
| translate(3*960/4, 500/2); | |
| rotate(30); | |
| fill(fg_color2); | |
| ellipse(0, 0, 300, 400); | |
| // set fill to match background color | |
| fill(bg_color); | |
| // draw two eyes | |
| ellipse(-50, -80, 50, 30); | |
| ellipse( 50, -80, 50, 30); | |
| // set fill back to foreground for eyeballs | |
| fill(fg_color2); | |
| ellipse(-60, -80, 20, 20); | |
| ellipse( 40, -80, 20, 20); | |
| // mouth-hole with background color | |
| fill(bg_color); | |
| ellipse( 0, 70, 150, 20); | |
| pop(); | |
| } | |
| function keyTyped() { | |
| if (key == '!') { | |
| saveBlocksImages(); | |
| } | |
| else if (key == '@') { | |
| saveBlocksImages(true); | |
| } | |
| } |
| // note: this file is poorly named - it can generally be ignored. | |
| // helper functions below for supporting blocks/purview | |
| function saveBlocksImages(doZoom) { | |
| if(doZoom == null) { | |
| doZoom = false; | |
| } | |
| // generate 960x500 preview.jpg of entire canvas | |
| // TODO: should this be recycled? | |
| var offscreenCanvas = document.createElement('canvas'); | |
| offscreenCanvas.width = 960; | |
| offscreenCanvas.height = 500; | |
| var context = offscreenCanvas.getContext('2d'); | |
| // background is flat white | |
| context.fillStyle="#FFFFFF"; | |
| context.fillRect(0, 0, 960, 500); | |
| context.drawImage(this.canvas, 0, 0, 960, 500); | |
| // save to browser | |
| var downloadMime = 'image/octet-stream'; | |
| var imageData = offscreenCanvas.toDataURL('image/jpeg'); | |
| imageData = imageData.replace('image/jpeg', downloadMime); | |
| p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg'); | |
| // generate 230x120 thumbnail.png centered on mouse | |
| offscreenCanvas.width = 230; | |
| offscreenCanvas.height = 120; | |
| // background is flat white | |
| context = offscreenCanvas.getContext('2d'); | |
| context.fillStyle="#FFFFFF"; | |
| context.fillRect(0, 0, 230, 120); | |
| if(doZoom) { | |
| // pixelDensity does the right thing on retina displays | |
| var pd = this._pixelDensity; | |
| var sx = pd * mouseX - pd * 230/2; | |
| var sy = pd * mouseY - pd * 120/2; | |
| var sw = pd * 230; | |
| var sh = pd * 120; | |
| // bounds checking - just displace if necessary | |
| if (sx < 0) { | |
| sx = 0; | |
| } | |
| if (sx > this.canvas.width - sw) { | |
| sx = this.canvas.width - sw; | |
| } | |
| if (sy < 0) { | |
| sy = 0; | |
| } | |
| if (sy > this.canvas.height - sh) { | |
| sy = this.canvas.height - sh; | |
| } | |
| // save to browser | |
| context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120); | |
| } | |
| else { | |
| // now scaledown | |
| var full_width = this.canvas.width; | |
| var full_height = this.canvas.height; | |
| context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120); | |
| } | |
| imageData = offscreenCanvas.toDataURL('image/png'); | |
| imageData = imageData.replace('image/png', downloadMime); | |
| // call this function after 1 second | |
| setTimeout(function(){ | |
| p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png'); | |
| }, 1000); | |
| } |
