Skip to content

Instantly share code, notes, and snippets.

@dribnet

dribnet/.block

Last active May 27, 2017 04:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dribnet/f3a285587b71523a95336cf966139238 to your computer and use it in GitHub Desktop.
Save dribnet/f3a285587b71523a95336cf966139238 to your computer and use it in GitHub Desktop.
Download ZIP
sketch-rnn experiment
Raw
.block
license: mit
Raw
.purview_helper.js
// 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');
}
Raw
README.md
Raw
index.html
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src=".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>
Raw
sketch.js
// first 3 faces for face.npz, smiley face.npz, horse,npz, and zebra.npz
var sketches = [
//face
[[127, 2, 0], [-85, -2, 0], [-17, 6, 0], [-12, 10, 0], [-8, 28, 0], [-4, 29, 0], [1, 97, 0], [15, 35, 0], [16, 18, 0], [24, 15, 0], [48, 15, 0], [25, 2, 0], [43, -2, 0], [13, -14, 0], [23, -44, 0], [24, -33, 0], [15, -30, 0], [5, -23, 0], [-1, -28, 0], [-7, -14, 0], [-14, -17, 0], [-32, -23, 0], [-32, -11, 0], [-63, -2, 1], [-59, 39, 0], [6, 0, 1], [70, -6, 0], [0, 0, 1], [-7, -2, 0], [1, 0, 1], [-61, 146, 0], [86, -23, 0], [45, -18, 1], [-96, -73, 0], [-9, 40, 0], [4, 3, 0], [17, 0, 1]],
[[111, 5, 0], [-16, 4, 0], [-26, 16, 0], [-28, 30, 0], [-10, 19, 0], [-6, 18, 0], [-5, 29, 0], [2, 13, 0], [15, 20, 0], [22, 14, 0], [26, 6, 0], [42, 1, 0], [13, -3, 0], [21, -12, 0], [10, -10, 0], [31, -57, 0], [2, -19, 0], [-6, -17, 0], [-34, -45, 0], [-22, -8, 0], [-31, -1, 1], [-25, 31, 0], [1, 40, 1], [31, -41, 0], [-5, 50, 1], [-52, 28, 0], [20, 17, 0], [25, 9, 0], [6, -1, 0], [5, -4, 0], [5, -19, 1], [-67, -68, 0], [13, -9, 0], [40, -10, 0], [30, -13, 0], [2, -13, 1], [-4, 6, 0], [6, 14, 0], [33, 27, 0], [29, 14, 0], [22, 3, 1], [-79, -52, 0], [82, 127, 0], [26, 62, 1], [-168, -200, 0], [-3, 21, 0], [-6, 13, 0], [-47, 63, 0], [-9, 30, 0], [1, 17, 1], [61, -131, 0], [-19, 16, 0], [-22, 36, 0], [-21, 58, 0], [-19, 38, 0], [-3, 21, 0], [6, 34, 1]],
[[91, 4, 0], [-7, -4, 0], [-33, 1, 0], [-28, 12, 0], [-11, 10, 0], [-11, 19, 0], [-1, 29, 0], [4, 19, 0], [46, 100, 0], [22, 31, 0], [14, 13, 0], [12, 9, 0], [29, 11, 0], [44, -1, 0], [16, -10, 0], [14, -12, 0], [25, -29, 0], [7, -14, 0], [5, -18, 0], [0, -33, 0], [-5, -20, 0], [-21, -39, 0], [-30, -32, 0], [-18, -11, 0], [-38, -13, 0], [-36, -2, 0], [-16, 2, 0], [-14, 6, 0], [-13, 13, 1], [37, 22, 0], [1, 29, 0], [4, 11, 1], [43, -53, 0], [1, 39, 0], [4, 6, 1], [-9, 45, 0], [0, 0, 1], [12, 10, 0], [-5, -2, 0], [5, -4, 0], [5, 0, 0], [1, 5, 0], [-5, 2, 0], [-1, -7, 1], [-42, 43, 0], [6, 14, 0], [24, 22, 0], [22, 7, 0], [25, -1, 0], [22, -19, 0], [21, -31, 0], [4, -8, 0], [3, -17, 1]],
//smiley face
[[192, 25, 0], [-27, -8, 0], [-45, -4, 0], [-43, 0, 0], [-20, 4, 0], [-20, 11, 0], [-27, 40, 0], [-10, 22, 0], [3, 28, 0], [18, 14, 0], [28, 11, 0], [48, 6, 0], [48, 1, 0], [23, -4, 0], [24, -11, 0], [26, -18, 0], [30, -31, 0], [6, -19, 0], [1, -18, 0], [-2, -9, 0], [-9, -13, 0], [-30, -23, 0], [-33, -4, 0], [-7, 5, 1], [-96, 39, 0], [0, 0, 1], [-6, 8, 0], [-2, 9, 0], [5, -6, 1], [94, -1, 0], [-14, 1, 0], [2, 11, 0], [3, 0, 0], [6, -10, 0], [-1, -6, 0], [-4, 0, 0], [-1, 3, 0], [3, 0, 0], [2, -5, 0], [-3, 5, 1], [-107, 38, 0], [5, 14, 0], [10, 13, 0], [8, 4, 0], [28, 4, 0], [27, -2, 0], [12, -9, 0], [11, -18, 1]],
[[163, 21, 0], [-9, -6, 0], [-3, -6, 0], [-22, -5, 0], [-16, -1, 0], [-29, 12, 0], [-2, 3, 0], [-24, 18, 0], [-31, 49, 0], [-14, 35, 0], [-13, 22, 0], [16, 53, 0], [13, 25, 0], [23, 32, 0], [13, 3, 0], [101, 0, 0], [18, -5, 0], [19, 2, 0], [13, -6, 0], [11, -15, 0], [9, -93, 0], [-11, -91, 0], [-28, -34, 0], [-16, -11, 0], [-19, -2, 0], [-34, 19, 1], [-11, 23, 0], [-20, 39, 0], [-7, 20, 0], [4, 1, 1], [68, -74, 0], [-10, 24, 0], [-19, 63, 1], [-73, 43, 0], [5, 15, 0], [28, 44, 0], [14, 11, 0], [14, 2, 0], [13, -5, 0], [24, -20, 0], [29, -66, 1]],
[[145, 23, 0], [-12, 65, 1], [50, -67, 0], [-18, 81, 1], [-68, -5, 0], [-5, 23, 0], [4, 20, 0], [24, 21, 0], [26, 9, 0], [25, 1, 0], [22, -8, 0], [10, -7, 0], [15, -22, 0], [3, -21, 1], [-29, -113, 0], [-65, 0, 0], [-19, 4, 0], [-17, 8, 0], [-37, 23, 0], [-29, 25, 0], [-20, 31, 0], [-4, 18, 0], [1, 32, 0], [5, 17, 0], [20, 32, 0], [15, 15, 0], [31, 23, 0], [29, 15, 0], [31, 6, 0], [37, -1, 0], [37, -12, 0], [30, -30, 0], [11, -19, 0], [5, -21, 0], [2, -31, 0], [-4, -14, 0], [-28, -66, 0], [-12, -19, 0], [-12, -12, 0], [-22, -7, 0], [-19, -2, 0], [-43, 1, 0], [-20, 5, 1]],
//horse
[[4, 177, 0], [-2, -29, 0], [5, -29, 0], [0, -22, 0], [-7, -40, 0], [124, -4, 0], [70, 13, 0], [20, -36, 1], [0, 0, 0], [15, 10, 0], [7, 1, 0], [5, -6, 0], [1, -8, 0], [-5, -14, 0], [-18, -5, 0], [-15, 5, 0], [-6, 7, 0], [0, 4, 0], [23, 1, 1], [-15, -19, 0], [13, 1, 0], [-18, 1, 0], [-1, 4, 0], [10, 1, 0], [-31, 1, 0], [31, -12, 0], [29, 0, 0], [2, 3, 0], [9, 4, 0], [-12, 14, 0], [6, 4, 0], [11, -5, 0], [-22, -12, 0], [0, -4, 1], [-26, 2, 0], [0, 0, 1], [-13, 58, 0], [-3, 19, 0], [-4, 83, 1], [0, 0, 0], [0, 0, 1], [-185, 8, 0], [12, 1, 0], [2, -6, 1], [0, -2, 0], [1, -7, 1], [1, -4, 0], [2, -11, 1], [0, -1, 0], [6, -41, 0], [5, -11, 0], [21, -2, 0], [32, 8, 0], [53, -2, 1], [18, 2, 0], [2, 2, 1], [0, 1, 0], [2, 29, 0], [7, 27, 0], [30, 7, 1], [-160, -71, 0], [-1, 20, 0], [7, 2, 0], [6, -7, 0], [-3, 22, 0], [7, -1, 0], [9, -9, 0], [6, -24, 0], [-2, 18, 1]],
[[110, 23, 0], [0, 0, 1], [-28, -21, 0], [-24, -1, 0], [-21, 16, 0], [-23, 8, 0], [4, 8, 1], [2, -13, 0], [-17, 6, 0], [-3, 8, 0], [11, 8, 0], [20, 0, 1], [-26, -14, 0], [0, 0, 1], [0, 0, 0], [0, 1, 1], [76, -27, 0], [0, 0, 1], [0, 0, 0], [0, 11, 0], [10, -5, 0], [1, 4, 0], [7, 3, 0], [4, 14, 0], [5, -2, 0], [9, 27, 0], [4, -5, 0], [8, 11, 0], [5, 1, 1], [-76, 0, 0], [8, 57, 1], [43, -51, 0], [13, 25, 0], [13, 34, 1], [19, -51, 0], [41, 36, 0], [19, 23, 1], [-15, -59, 0], [21, 7, 0], [20, 13, 0], [15, 20, 1], [-190, -86, 0], [0, 0, 1]],
[[193, 10, 0], [-8, 19, 0], [-38, 13, 1], [31, -16, 0], [11, -26, 0], [3, 22, 1], [-1, -4, 0], [19, 6, 0], [41, 0, 0], [4, 11, 0], [-1, 8, 0], [-11, 14, 0], [-42, -9, 0], [-4, 1, 0], [-6, 13, 0], [-3, 33, 0], [-8, 14, 0], [-30, 30, 0], [-13, 41, 0], [-8, 12, 0], [-14, -1, 0], [-7, -12, 0], [-2, -28, 0], [3, -26, 0], [-10, 4, 0], [-11, 32, 0], [-8, 5, 0], [-11, -4, 0], [-6, -9, 0], [-3, -21, 0], [4, -12, 0], [-12, 21, 0], [-6, 25, 0], [-7, 7, 0], [-5, 0, 0], [-12, -32, 0], [2, -31, 0], [-13, 55, 0], [-10, 6, 0], [-1, -66, 0], [11, -52, 0], [3, -8, 0], [12, -8, 0], [20, -6, 0], [47, -1, 0], [37, -11, 0], [7, 10, 0], [11, 5, 1]],
// zebra
[[55, 18, 0], [-11, -1, 0], [-14, 6, 0], [-9, 14, 0], [-15, 5, 0], [-6, 12, 0], [8, 4, 0], [23, -3, 0], [3, 20, 0], [15, 3, 0], [2, 3, 0], [1, 13, 0], [-16, 21, 0], [13, -2, 0], [15, -17, 0], [7, 15, 0], [7, 3, 0], [-2, 8, 0], [28, -13, 0], [9, 0, 0], [12, 3, 0], [19, 12, 0], [14, 3, 0], [6, 4, 0], [9, -18, 0], [14, 7, 0], [25, 3, 0], [4, -1, 0], [1, -8, 0], [-17, -8, 0], [15, -9, 0], [6, -8, 0], [3, -11, 0], [-3, -11, 0], [7, 13, 0], [13, 13, 0], [7, -4, 0], [6, -11, 0], [1, -8, 0], [-10, -14, 0], [-6, -2, 0], [-8, 11, 0], [-8, 1, 0], [-31, -29, 0], [-86, -13, 0], [-22, -18, 0], [-24, -6, 0], [-8, 0, 0], [-13, 8, 0], [-10, 15, 1], [91, -3, 0], [-65, 63, 0], [-17, 21, 1], [85, -61, 0], [21, -1, 0], [15, -4, 0], [-66, 96, 1], [115, -97, 0], [-40, 65, 0], [-26, 27, 1], [73, -66, 0], [-1, 8, 0], [-33, 52, 1], [-137, -101, 0], [-7, 2, 0], [-2, 10, 0], [6, -3, 0], [2, -6, 0], [-4, 0, 0], [-2, 4, 0], [2, -1, 1], [56, -5, 0], [-31, 31, 1]],
[[27, 46, 0], [-12, 2, 0], [-7, 5, 0], [-7, 11, 0], [0, 17, 0], [4, 5, 0], [7, 1, 0], [26, -25, 0], [19, -1, 0], [4, 2, 0], [4, 28, 0], [-8, 43, 0], [5, 13, 0], [8, 10, 0], [19, -1, 0], [-3, -30, 0], [5, -18, 0], [9, -3, 0], [5, 1, 0], [3, 6, 0], [-3, 21, 0], [4, 16, 0], [18, 8, 0], [10, -7, 0], [3, -16, 0], [-13, -45, 0], [10, -5, 0], [44, 9, 0], [2, 5, 0], [-4, 20, 0], [0, 21, 0], [24, 22, 0], [15, -4, 0], [6, -6, 0], [-6, -43, 0], [3, 14, 0], [15, 31, 0], [6, 3, 0], [8, -2, 0], [4, -4, 0], [1, -12, 0], [-10, -47, 0], [-17, -60, 0], [-10, -16, 0], [-58, 0, 0], [-49, 22, 0], [-29, -13, 0], [-11, -19, 0], [-20, 1, 0], [-8, 4, 0], [-11, 17, 0], [-9, 6, 0], [-21, 27, 1], [106, -40, 0], [8, 20, 0], [3, 23, 0], [-7, 42, 0], [-5, 7, 1], [41, -77, 0], [7, 4, 0], [4, 9, 0], [-1, 25, 0], [-6, 13, 1], [62, -86, 0], [-1, 26, 0], [-4, 20, 0], [-8, 19, 0], [-8, 9, 1], [22, -1, 0], [-4, 8, 0], [-46, 55, 1], [31, 13, 0], [26, -2, 1]],
[[36, 50, 0], [-25, 12, 0], [-3, 26, 0], [6, 7, 0], [9, -1, 0], [19, -8, 0], [16, -12, 0], [-20, 63, 0], [-1, 17, 0], [2, 5, 0], [10, -4, 0], [7, -10, 0], [8, -19, 0], [8, -37, 0], [-5, 21, 0], [-3, 31, 0], [0, 30, 0], [6, 12, 0], [12, -2, 0], [20, -25, 0], [14, -37, 0], [0, -28, 0], [-6, 9, 0], [-5, 35, 0], [0, 38, 0], [6, 14, 0], [13, 3, 0], [11, -10, 0], [9, -12, 0], [8, -31, 0], [6, -43, 0], [-5, 8, 0], [-2, 17, 0], [0, 28, 0], [3, 14, 0], [3, 4, 0], [9, 4, 0], [23, -3, 0], [21, -13, 0], [8, -16, 0], [0, -10, 0], [-11, -21, 0], [0, -17, 0], [7, -3, 0], [36, 0, 0], [5, -3, 0], [-4, -15, 0], [-18, -16, 0], [-39, -15, 0], [-24, -5, 0], [-87, -1, 0], [-46, 8, 0], [-21, 10, 0], [-16, 14, 1], [90, -35, 0], [-46, 89, 1], [79, -90, 0], [-11, 12, 0], [-34, 64, 1], [70, -79, 0], [-56, 66, 0], [-48, 73, 1], [132, -138, 0], [-21, 20, 0], [-43, 57, 0], [-38, 62, 0], [-17, 39, 1], [132, -157, 0], [-10, 3, 0], [-13, 12, 0], [-36, 41, 0], [-32, 51, 0], [-12, 27, 1], [150, -138, 0], [-19, 14, 0], [-37, 40, 0], [-35, 48, 0], [-15, 27, 0], [6, -3, 0], [30, -34, 1], [69, -69, 0], [-25, 18, 0], [-83, 95, 1], [-117, -119, 0], [3, -23, 0], [12, -21, 0], [9, -9, 0], [13, -6, 0], [-3, 19, 1]]
];
var curSketch =0;
var curSeg = 0;
function setup () {
createCanvas(960, 500);
setFrameRate(10);
}
function draw_sketch(s) {
var pen_down = false;
var cur_x = 0;
var cur_y = 0;
// ellipse(0, 0, 10);
noFill();
for (var i=0; i<s.length; i++) {
p = s[i];
next_x = cur_x + p[0];
next_y = cur_y + p[1];
if(pen_down) {
if(i == curSeg) {
stroke(0, 0, 220);
strokeWeight(2);
ellipse(cur_x, cur_y, 5);
ellipse(next_x, next_y, 5);
}
else {
strokeWeight(1);
stroke(0);
}
line(cur_x, cur_y, next_x, next_y);
}
cur_x = next_x;
cur_y = next_y;
pen_down = (p[2] == 0);
}
}
function draw () {
background(240);
// scale canvas so that -255, 255 is extent
push();
translate((width-height)/2, 5);
scale(490/255);
stroke(0, 255, 0);
fill(255);
strokeWeight(1);
rect(0, 0, 256, 256);
stroke(0, 255, 0);
strokeWeight(2);
draw_sketch(sketches[curSketch]);
pop();
curSeg = curSeg + 1;
if(curSeg == sketches[curSketch].length) {
curSeg = 0;
curSketch = (curSketch + 1) % sketches.length;
}
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
function keyPressed() {
if (keyCode == LEFT_ARROW) {
}
else if (keyCode == RIGHT_ARROW) {
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment