Skip to content

Instantly share code, notes, and snippets.

@Michael-Kelly-Digital-Design

Michael-Kelly-Digital-Design/.block

Forked from dribnet/.block
Last active October 14, 2016 09:28
Show Gist options
  • Save Michael-Kelly-Digital-Design/04fe7dd7a756858dedf77d4672696e9c to your computer and use it in GitHub Desktop.
Save Michael-Kelly-Digital-Design/04fe7dd7a756858dedf77d4672696e9c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Michael-Kelly-Digital-Design revised this gist Sep 30, 2016. 3 changed files with 55 additions and 59 deletions.
    114 changes: 55 additions & 59 deletions glyph.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,90 +3,86 @@
    * size is the number of pixels for width and height
    * use p5.js to draw a round grawscale glpyh within the bounding box
    */
    function glyph4(values, size) {
    function glyph4( values, size ) {
    var v = values;
    var s = size;

    var scale;
    var strokeCol = 100;

    // ----- -----
    // ----- -----

    var el0 = { //background ellipse
    "radius": s,
    "diameter": s,
    "col": 210,
    "outline": 3
    };
    var el1 = { //
    "radius": 0,
    "diameter": 0,
    "col": 245
    };
    var el2 = {
    "radius": 0,
    "diameter": 0,
    "col": 0
    };
    var el3 = {
    "radius": 0,
    "diameter": 0,
    "col": 0
    }
    var connect = {
    "col": 0,
    "pos2":0,
    "pos2":0
    "pos2": 0,
    "pos2": 0
    };

    //calculate values
    el0.pos = createVector(s/2, s/2);
    //calculate values
    el0.pos = createVector( s/2, s/2 );

    el1.pos = createVector(s/2, s/2);
    el1.radius = s - map(values[0], 0, 100, el0.outline * 2, s/4);
    el1.pos = createVector( s/2, s/2 );
    el1.diameter = s - map( values[ 0 ], 0, 100, el0.outline * 2, s/4 );

    var scale = el1.radius/s;
    var centerOff = map(v[1]+v[2],0,200,0,el0.radius/5) +el0.radius/32 ; //distance from center for el2/el3
    centerOff *=scale;
    var scale = el1.diameter /s;
    var centerOff = map( v[ 1 ] + v[ 2 ], 0, 200, 0, el0.diameter /5 ) + el0.diameter /32; //distance from center for el2/el3
    centerOff *= scale;

    el2.pos = createVector(s/2 + (centerOff), s/2 + (centerOff));
    el2.radius = map(v[1],0,100,s/6,s/3);
    el2.radius *= scale;
    el2.pos = createVector( s/2 + ( centerOff ), s/2 + ( centerOff ) );
    el2.diameter = map( v[ 1 ], 0, 100, s/6, s/3 );
    el2.diameter *= scale;

    el3.pos = createVector(s/2 - (centerOff ), s/2 - (centerOff));
    el3.radius = map(v[2],0,100,s/6,s/3);
    el3.radius *= scale;
    el3.pos = createVector( s/2 - ( centerOff ), s/2 - ( centerOff ) );
    el3.diameter = map( v[ 2 ], 0, 100, s/6, s/3 );
    el3.diameter *= scale;

    connect.pos1 = createVector(0, s / 2);
    connect.pos2 = createVector(s, s / 2);
    connect.pos1 = createVector( s/2 - ( el1.diameter )/2 +el0.outline*2 , s/2 );
    connect.pos2 = createVector( s/2 + ( el1.diameter )/2 -el0.outline*2 , s/2 );

    //draw ellipses
    fill(el0.col);
    //draw ellipses
    fill( el0.col );
    noStroke();
    strokeWeight(el0.outline);
    ellipse(el0.pos.x, el0.pos.y, el0.radius); //background
    strokeWeight( el0.outline );
    ellipse( el0.pos.x, el0.pos.y, el0.diameter ); //background

    stroke(100); //TODO
    fill(el1.col);
    ellipse(el1.pos.x, el1.pos.y, el1.radius); //backfill
    stroke( 100 ); //TODO
    fill( el1.col );
    ellipse( el1.pos.x, el1.pos.y, el1.diameter ); //backfill

    ellipse(el2.pos.x, el2.pos.y, el2.radius); //ellipse 1
    ellipse( el2.pos.x, el2.pos.y, el2.diameter ); //ellipse 1

    ellipse(el3.pos.x, el3.pos.y, el3.radius);
    ellipse( el3.pos.x, el3.pos.y, el3.diameter );

    line(connect.pos1.x, connect.pos1.y, connect.pos2.x, connect.pos2.y);
    line( connect.pos1.x, connect.pos1.y, connect.pos2.x, connect.pos2.y );


    //DEBUG>
    //DEBUG>
    push();
    stroke(255, 0, 0);
    strokeWeight(1);
    stroke( 255, 0, 0 );
    strokeWeight( 1 );
    noFill();
    rect(0, 0, size + 2, size + 2);
    stroke(0, 255, 0);
    //ellipse(s / 2, s / 2, size - 2);
    rect( 0, 0, size + 2, size + 2 );
    stroke( 0, 255, 0 );
    //ellipse(s/2, s/2, size - 2);
    pop();
    println(el0);
    println(el1);
    println(el2);
    println(el3);
    //<DEBUG
    //<DEBUG

    }

    @@ -95,20 +91,20 @@ function glyph4(values, size) {
    * size is the number of pixels for width and height
    * use p5.js to draw a square color glpyh within the bounding box
    */
    function glyph8(values, size) {
    var red = [255, 0, 0];
    var green = [0, 255, 0];
    var blue = [0, 0, 255];
    var white = [255, 255, 255];
    var colors = [red, green, blue, white, red, green, blue, white];
    stroke(0);
    fill(0);
    rect(0, 0, size, size);
    for (var i = 0; i < 8; i++) {
    stroke(colors[i]);
    fill(colors[i]);
    offsety = i * size / 8;
    offsetx = (size * values[i]) / 100;
    rect(0, offsety, offsetx, size / 8);
    function glyph8( values, size ) {
    var red = [ 255, 0, 0 ];
    var green = [ 0, 255, 0 ];
    var blue = [ 0, 0, 255 ];
    var white = [ 255, 255, 255 ];
    var colors = [ red, green, blue, white, red, green, blue, white ];
    stroke( 0 );
    fill( 0 );
    rect( 0, 0, size, size );
    for ( var i = 0; i < 8; i++ ) {
    stroke( colors[ i ] );
    fill( colors[ i ] );
    offsety = i * size /8;
    offsetx = ( size * values[ i ] ) /100;
    rect( 0, offsety, offsetx, size /8 );
    }
    }
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  2. Michael-Kelly-Digital-Design revised this gist Sep 29, 2016. 3 changed files with 14 additions and 0 deletions.
    Binary file added Glyph4 conceptAsset 1.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    Binary file added Glyph4 conceptAsset 2.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    14 changes: 14 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,3 +3,17 @@
    This is the code for getting started with PS2. The drop down
    selects previous saved settings. The `show data` button exposes
    the current drawing as JSON so it can be added to the code.

    ##Concepts
    #### Glyph 4
    `Radial Glyph`
    {% img Glyph4 conceptAsset 1.png 220 'Glyph4 concept 1' %}
    `Bezier Glyph`
    {% img Glyph4 conceptAsset 2.png 220 'Glyph4 concept 1' %}
    #### Glyph 8
    ---
    ##Diary

    ### Thursday 29 September
    `12pm-3pm:`
    created objects to store variables for drawable shape
  3. Michael Kelly revised this gist Sep 29, 2016. 1 changed file with 100 additions and 33 deletions.
    133 changes: 100 additions & 33 deletions glyph.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,25 +2,92 @@
    * val4 is an array of 4 numbers that range from [0,100]
    * size is the number of pixels for width and height
    * use p5.js to draw a round grawscale glpyh within the bounding box
    */
    */
    function glyph4(values, size) {
    var color1 = map(values[0], 0, 100, 10, 70)
    stroke(color1);
    fill(color1)
    var s2 = size/2;
    ellipse(s2, s2, size);

    var inner_size = 0.2 + 0.4 * values[2] / 100.0;
    var s3 = size * inner_size;

    var color2 = map(values[1], 0, 100, color1+20, 240)
    fill(color2);
    stroke(color2);

    var shift_frac = (values[3] - 50.0) / 50.0;
    var max_shift = 0.5 * (size - s3);
    var x_shift = shift_frac * max_shift;
    ellipse(s2 + x_shift, s2, s3);
    var v = values;
    var s = size;

    var scale;
    var strokeCol = 100;

    // ----- -----

    var el0 = { //background ellipse
    "radius": s,
    "col": 210,
    "outline": 3
    };
    var el1 = { //
    "radius": 0,
    "col": 245
    };
    var el2 = {
    "radius": 0,
    "col": 0
    };
    var el3 = {
    "radius": 0,
    "col": 0
    }
    var connect = {
    "col": 0,
    "pos2":0,
    "pos2":0
    };

    //calculate values
    el0.pos = createVector(s/2, s/2);

    el1.pos = createVector(s/2, s/2);
    el1.radius = s - map(values[0], 0, 100, el0.outline * 2, s/4);

    var scale = el1.radius/s;
    var centerOff = map(v[1]+v[2],0,200,0,el0.radius/5) +el0.radius/32 ; //distance from center for el2/el3
    centerOff *=scale;

    el2.pos = createVector(s/2 + (centerOff), s/2 + (centerOff));
    el2.radius = map(v[1],0,100,s/6,s/3);
    el2.radius *= scale;

    el3.pos = createVector(s/2 - (centerOff ), s/2 - (centerOff));
    el3.radius = map(v[2],0,100,s/6,s/3);
    el3.radius *= scale;

    connect.pos1 = createVector(0, s / 2);
    connect.pos2 = createVector(s, s / 2);

    //draw ellipses
    fill(el0.col);
    noStroke();
    strokeWeight(el0.outline);
    ellipse(el0.pos.x, el0.pos.y, el0.radius); //background

    stroke(100); //TODO
    fill(el1.col);
    ellipse(el1.pos.x, el1.pos.y, el1.radius); //backfill

    ellipse(el2.pos.x, el2.pos.y, el2.radius); //ellipse 1

    ellipse(el3.pos.x, el3.pos.y, el3.radius);

    line(connect.pos1.x, connect.pos1.y, connect.pos2.x, connect.pos2.y);


    //DEBUG>
    push();
    stroke(255, 0, 0);
    strokeWeight(1);
    noFill();
    rect(0, 0, size + 2, size + 2);
    stroke(0, 255, 0);
    //ellipse(s / 2, s / 2, size - 2);
    pop();
    println(el0);
    println(el1);
    println(el2);
    println(el3);
    //<DEBUG

    }

    /*
    @@ -29,19 +96,19 @@ function glyph4(values, size) {
    * use p5.js to draw a square color glpyh within the bounding box
    */
    function glyph8(values, size) {
    var red = [255, 0, 0];
    var green = [0, 255, 0];
    var blue = [0, 0, 255];
    var white = [255, 255, 255];
    var colors = [red, green, blue, white, red, green, blue, white];
    stroke(0);
    fill(0);
    rect(0, 0, size, size);
    for(var i=0; i<8; i++) {
    stroke(colors[i]);
    fill(colors[i]);
    offsety = i * size / 8;
    offsetx = (size * values[i]) / 100;
    rect(0, offsety, offsetx, size/8);
    }
    var red = [255, 0, 0];
    var green = [0, 255, 0];
    var blue = [0, 0, 255];
    var white = [255, 255, 255];
    var colors = [red, green, blue, white, red, green, blue, white];
    stroke(0);
    fill(0);
    rect(0, 0, size, size);
    for (var i = 0; i < 8; i++) {
    stroke(colors[i]);
    fill(colors[i]);
    offsety = i * size / 8;
    offsetx = (size * values[i]) / 100;
    rect(0, offsety, offsetx, size / 8);
    }
    }
  4. @dribnet dribnet revised this gist Jul 14, 2016. 7 changed files with 308 additions and 11 deletions.
    0 readme.purview_helper.js → .purview_helper.js
    View file
    File renamed without changes.
    6 changes: 4 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    PS1 MDDN 342 2016
    ## PS2 MDDN 342 2016

    This sample code starts off as the canonical p5.js "Make Circles" sketch formatted as a p5.js block.
    This is the code for getting started with PS2. The drop down
    selects previous saved settings. The `show data` button exposes
    the current drawing as JSON so it can be added to the code.
    47 changes: 47 additions & 0 deletions glyph.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    /*
    * val4 is an array of 4 numbers that range from [0,100]
    * size is the number of pixels for width and height
    * use p5.js to draw a round grawscale glpyh within the bounding box
    */
    function glyph4(values, size) {
    var color1 = map(values[0], 0, 100, 10, 70)
    stroke(color1);
    fill(color1)
    var s2 = size/2;
    ellipse(s2, s2, size);

    var inner_size = 0.2 + 0.4 * values[2] / 100.0;
    var s3 = size * inner_size;

    var color2 = map(values[1], 0, 100, color1+20, 240)
    fill(color2);
    stroke(color2);

    var shift_frac = (values[3] - 50.0) / 50.0;
    var max_shift = 0.5 * (size - s3);
    var x_shift = shift_frac * max_shift;
    ellipse(s2 + x_shift, s2, s3);
    }

    /*
    * val8 is an array of 8 numbers that range from [0,100]
    * size is the number of pixels for width and height
    * use p5.js to draw a square color glpyh within the bounding box
    */
    function glyph8(values, size) {
    var red = [255, 0, 0];
    var green = [0, 255, 0];
    var blue = [0, 0, 255];
    var white = [255, 255, 255];
    var colors = [red, green, blue, white, red, green, blue, white];
    stroke(0);
    fill(0);
    rect(0, 0, size, size);
    for(var i=0; i<8; i++) {
    stroke(colors[i]);
    fill(colors[i]);
    offsety = i * size / 8;
    offsetx = (size * values[i]) / 100;
    rect(0, offsety, offsetx, size/8);
    }
    }
    86 changes: 82 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,87 @@
    <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
    <script language="javascript" type="text/javascript" src="readme.purview_helper.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="glyph.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <style> body {padding: 0; margin: 0;} </style>
    <style>
    body { padding: 0; margin: 0; }
    .inner { position: absolute; }
    #controls {
    font: 300 12px "Helvetica Neue";
    padding: 5;
    margin: 5;
    background: #f0f0f0;
    opacity: 0.1;
    -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>1</td>
    <td id="slider1Container"></td>
    </tr>
    <tr>
    <td>2</td>
    <td id="slider2Container"></td>
    </tr>
    <tr>
    <td>3</td>
    <td id="slider3Container"></td>
    </tr>
    <tr>
    <td>4</td>
    <td id="slider4Container"></td>
    </tr>
    <tr>
    <td>5</td>
    <td id="slider5Container"></td>
    </tr>
    <tr>
    <td>6</td>
    <td id="slider6Container"></td>
    </tr>
    <tr>
    <td>7</td>
    <td id="slider7Container"></td>
    </tr>
    <tr>
    <td>8</td>
    <td id="slider8Container"></td>
    </tr>
    <tr>
    <td>
    <hr>
    </td>
    </tr>
    <tr>
    <td>Glyph</td>
    <td id="selector1Container"></td>
    </tr>
    <tr>
    <td>Mode</td>
    <td id="selector2Container"></td>
    </tr>
    <tr>
    <td>Size</td>
    <td id="selector3Container"></td>
    </tr>
    <tr>
    <td></td>
    <td id="buttonContainer"></td>
    </tr>
    </div>
    </div>
    </table>
    </body>
    Binary file modified preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    180 changes: 175 additions & 5 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,189 @@
    var canvasWidth = 960;
    var canvasHeight = 500;

    var glyphSelector;
    var modeSelector;
    var sizeSelector;

    var val_sliders = [];
    function setup () {
    createCanvas(960, 500);
    // create the drawing canvas, save the canvas element
    var main_canvas = createCanvas(canvasWidth, canvasHeight);
    main_canvas.parent('canvasContainer');

    // create two sliders
    for (i=0; i<8; i++) {
    var slider = createSlider(0, 100, 50);
    slider.parent("slider" + (i+1) + "Container")
    val_sliders.push(slider);
    }

    glyphSelector = createSelect();
    glyphSelector.option('glyph4');
    glyphSelector.option('glyph8');
    glyphSelector.changed(modeChangedEvent);
    glyphSelector.parent('selector1Container');

    modeSelector = createSelect();
    modeSelector.option('drive');
    modeSelector.option('random_grid');
    // modeSelector.option('sorttest');
    modeSelector.changed(modeChangedEvent);
    modeSelector.parent('selector2Container');

    sizeSelector = createSelect();
    sizeSelector.option('64');
    sizeSelector.option('128');
    sizeSelector.option('256');
    sizeSelector.parent('selector3Container');
    sizeSelector.value('256');
    sizeSelector.changed(sizeChangedEvent);

    button = createButton('redo');
    button.mousePressed(buttonPressedEvent);
    button.parent('buttonContainer');

    refreshGridData();
    modeChangedEvent();
    }

    var numGridRows;
    var numGridCols;
    var gridValues; // row, col order
    var gridOffsetX, gridOffsetY;
    var gridSpacingX, gridSpacingY;
    // Generate data for putting glyphs in a grid
    function refreshGridData() {
    numGridCols = 7;
    numGridRows = 3;
    gridOffsetX = 10;
    gridSpacingX = 136;
    gridOffsetY = 20;
    gridSpacingY = 166;
    gridValues = new Array(numGridRows);
    for (var i=0; i<numGridRows; i++) {
    gridValues[i] = new Array(numGridCols);
    for (var j=0; j<numGridCols; j++) {
    gridValues[i][j] = new Array(8);
    for (var k=0; k<8; k++) {
    gridValues[i][j][k] = random(100);
    }
    }
    }
    }

    function sizeChangedEvent() {
    var mode = modeSelector.value();
    if (mode != "drive") {
    refreshGridData();
    }
    }

    function modeChangedEvent() {
    var mode = modeSelector.value();
    var glyph = glyphSelector.value();

    // enable/disable sliders
    if (mode === "drive") {
    // disable the button
    button.attribute('disabled','');

    // enable the first four sliders
    for(i=0; i<4; i++) {
    val_sliders[i].removeAttribute('disabled');
    }
    if(glyph === "glyph4") {
    for(i=4; i<8; i++) {
    val_sliders[i].attribute('disabled','');
    }
    }
    else {
    for(i=4; i<8; i++) {
    val_sliders[i].removeAttribute('disabled');
    }
    }
    }
    else {
    // disable the button
    button.removeAttribute('disabled');

    // disable the sliders
    for(i=0; i<8; i++) {
    val_sliders[i].attribute('disabled','');
    }
    }
    }

    function buttonPressedEvent() {
    refreshGridData();
    }

    var colorBack = [128, 128, 128];
    var colorFront = [200, 200, 200];

    function drawDriveMode() {
    var glyph_is_glyph4 = true;
    if(glyphSelector.value() === "glyph8")
    glyph_is_glyph4 = false;

    var glyphSize = parseInt(sizeSelector.value(), 10);
    var halfSize = glyphSize / 2;

    background(colorBack);
    var halfSize = glyphSize / 2;
    var middle_x = canvasWidth / 2;
    var middle_y = canvasHeight / 2;
    resetMatrix();
    translate(middle_x - halfSize, middle_y - halfSize);
    var val = [0,0,0,0,0,0,0,0];
    for(i=0; i<8; i++) {
    val[i] = val_sliders[i].value();
    }
    stroke(128, 128, 192);
    noFill();
    if(glyph_is_glyph4) {
    ellipse(halfSize, halfSize, glyphSize+2);
    glyph4(val, glyphSize)
    }
    else {
    rect(-1, -1, glyphSize+1, glyphSize+2);
    glyph8(val, glyphSize)
    }
    }

    function drawSortMode() {
    var glyph_fn = glyph4;
    if(glyphSelector.value() === "glyph8")
    glyph_fn = glyph8;

    background(colorBack);
    for (var i=0; i<numGridRows; i++) {
    for (var j=0; j<numGridCols; j++) {
    resetMatrix();
    translate(gridOffsetX + j * gridSpacingX, gridOffsetY + i * gridSpacingY);
    for (var k=0; k<8; k++) {
    glyph_fn(gridValues[i][j], 128);
    }
    }
    }
    }

    function draw () {
    if (mouseIsPressed) {
    fill(0);
    var mode = modeSelector.value();

    if (mode == "drive") {
    drawDriveMode();
    }
    else {
    fill(255);
    drawSortMode();
    }
    ellipse(mouseX, mouseY, 80, 80);
    }

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    }
    else if (key == '@') {
    saveBlocksImages(true);
    }
    }
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  5. @dribnet dribnet revised this gist Jun 23, 2016. 7 changed files with 99 additions and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: mit
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    PS1 MDDN 342 2016

    This sample code starts off as the canonical p5.js "Make Circles" sketch formatted as a p5.js block.
    9 changes: 9 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
    <script language="javascript" type="text/javascript" src="readme.purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <style> body {padding: 0; margin: 0;} </style>
    </head>

    <body style="background-color:white">
    </body>
    Binary file added preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
    67 changes: 67 additions & 0 deletions readme.purview_helper.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,67 @@
    // 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');
    }
    19 changes: 19 additions & 0 deletions sketch.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    function setup () {
    createCanvas(960, 500);
    }

    function draw () {
    if (mouseIsPressed) {
    fill(0);
    }
    else {
    fill(255);
    }
    ellipse(mouseX, mouseY, 80, 80);
    }

    function keyTyped() {
    if (key == '!') {
    saveBlocksImages();
    }
    }
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  6. @dribnet dribnet created this gist Jan 1, 1974.