| license: mit |
| // 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); | |
| p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png'); | |
| } |
Describe your choice of color here and the shapes below them that are meant to represent the color (replacing this text). Be sure to use complete sentences, and you can reference your image above. The explanation should be short but compete, no more than 100 words.
Also update both images keeping their original sizes: preview.jpg (960x500) and thumbnail.png (230x120).
| <head> | |
| <style> body {padding: 0; margin: 0;} </style> | |
| </head> | |
| <body style="background-color:white"> | |
| <img src="preview.jpg" width="960" height="500"/> | |
| </body> |
| <head> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script> | |
| <script language="javascript" type="text/javascript" src=".purview_helper.js"></script> | |
| <script language="javascript" type="text/javascript" src="clock.js"></script> | |
| <script language="javascript" type="text/javascript" src="sketch.js"></script> | |
| </head> | |
| <body style="background-color:white"> | |
| <div class="outer"> | |
| <div class="inner"> | |
| <div id="canvasContainer"></div> | |
| </div> | |
| </div> | |
| </table> | |
| </body> |
| var canvasWidth = 960; | |
| var canvasHeight = 500; | |
| function setup () { | |
| // create the drawing canvas, save the canvas element | |
| var main_canvas = createCanvas(canvasWidth, canvasHeight); | |
| main_canvas.parent('canvasContainer'); | |
| // this means draw will only be called once | |
| noLoop(); | |
| } | |
| // draw five colors and then five glyphs | |
| function draw () { | |
| var size=200; | |
| var xdiff = (width - 4 * size) / 4; | |
| var xstep = size + xdiff; | |
| var ydiff = (height - 2 * size) / 2; | |
| var ystep = size + ydiff; | |
| background(255, 255, 220); | |
| noStroke(); | |
| // red | |
| fill(210, 70, 50); | |
| rect(xdiff/2 + xstep * 0, ydiff/2 + ystep * 0, size, size); | |
| // yellow | |
| fill(245, 225, 50); | |
| rect(xdiff/2 + xstep * 1, ydiff/2 + ystep * 0, size, size); | |
| // blue | |
| fill(50, 120, 170); | |
| rect(xdiff/2 + xstep * 2, ydiff/2 + ystep * 0, size, size); | |
| // your own color here | |
| stroke(0); | |
| noFill(); | |
| rect(xdiff/2 + xstep * 3, ydiff/2 + ystep * 0, size, size); | |
| // Represent red here | |
| rect(xdiff/2 + xstep * 0, ydiff/2 + ystep * 1, size, size); | |
| // Represent yellow here | |
| rect(xdiff/2 + xstep * 1, ydiff/2 + ystep * 1, size, size); | |
| // Represent blue here | |
| rect(xdiff/2 + xstep * 2, ydiff/2 + ystep * 1, size, size); | |
| // Represent your color here | |
| rect(xdiff/2 + xstep * 3, ydiff/2 + ystep * 1, size, size); | |
| } | |
| function keyTyped() { | |
| if (key == '!') { | |
| saveBlocksImages(); | |
| } | |
| else if (key == '@') { | |
| saveBlocksImages(true); | |
| } | |
| } |
