Skip to content

Instantly share code, notes, and snippets.

@AndrewMoffat

AndrewMoffat/.block

Forked from dribnet/.block
Last active July 26, 2016 06:43
Show Gist options
  • Save AndrewMoffat/655ddfe259b7ad5b0b926d2d27d5f753 to your computer and use it in GitHub Desktop.
Save AndrewMoffat/655ddfe259b7ad5b0b926d2d27d5f753 to your computer and use it in GitHub Desktop.
Download ZIP
PS1 MDDN 342 2016
Raw
.block
license: mit
Raw
README.md

PS1 MDDN 342 2016

FInal version of my face generator. This creates different shaped faces based on serveral variables, and does so in a sketch style, utilizing different functions to draw different elements to the page. Incorperates a unique solution for creating sketch stylke lines.

Raw
readme.purview_helper.js
// note: this file is poorly named - it can generally be ignored.
// helper functions below for supporting blocks/purview
function saveBlocksImages() {
// 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);
// 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);
imageData = offscreenCanvas.toDataURL('image/png');
imageData = imageData.replace('image/png', downloadMime);
p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
}
Raw
focusedRandom.js
function resetFocusedRandom() {
return Math.seedrandom(arguments);
}
function focusedRandom(min, max, focus, mean) {
// console.log("hello")
if(max === undefined) {
max = min;
min = 0;
}
if(focus === undefined) {
focus = 1.0;
}
if(mean === undefined) {
mean = (min + max) / 2.0;
}
if(focus == 0) {
return d3.randomUniform(min, max)();
}
else if(focus < 0) {
focus = -1 / focus;
}
sigma = (max - mean) / focus;
val = d3.randomNormal(mean, sigma)();
if (val > min && val < max) {
return val;
}
return d3.randomUniform(min, max)();
}
Raw
index.html
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js"></script>
<script src="https://d3js.org/d3-random.v1.min.js"></script>
<script language="javascript" type="text/javascript" src="focusedRandom.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">
<div id="canvasContainer"></div>
</body>
Raw
purview.json
{
"commits": [
{
"sha": "0000000000000000000000000000000000000012",
"name": "final_version"
},
{
"sha": "0000000000000000000000000000000000000011",
"name": "interaction_2"
},
{
"sha": "0000000000000000000000000000000000000010",
"name": "interaction_1"
},
{
"sha": "0000000000000000000000000000000000000009",
"name": "distribution_2"
},
{
"sha": "0000000000000000000000000000000000000008",
"name": "distribution_1"
},
{
"sha": "0000000000000000000000000000000000000007",
"name": "randomizer_3"
},
{
"sha": "0000000000000000000000000000000000000006",
"name": "randomizer_2"
},
{
"sha": "0000000000000000000000000000000000000005",
"name": "randomizer_1"
},
{
"sha": "0000000000000000000000000000000000000004",
"name": "drawing_styles_3"
},
{
"sha": "0000000000000000000000000000000000000003",
"name": "drawing_styles_2"
},
{
"sha": "0000000000000000000000000000000000000002",
"name": "drawing_styles_1"
},
{
"sha": "6e6db89be3cb99f99d07171faee645e84379dd06",
"name": "self_portrait"
}
]
}
Raw
sketch.js
var main_canvas;
function setup () {
// create the drawing canvas, save the canvas element
main_canvas = createCanvas(1500, 750);
background(215, 215, 215);
// rotation in degrees (more slider friendly)
angleMode(DEGREES);
// create two sliders
//create a button to gerenate faces
// position each element on the page
main_canvas.parent('canvasContainer');
}
function draw(){
if(mouseIsPressed){
background(215, 215, 215);
for(i=.5;i<=7.5;i++){
for(u=.5;u<=4.5;u++){
basegen=focusedRandom(45,65,47)
x=1500/8*i
y=750/5*u
drawface(x,y,basegen)
}
}
}
}
function drawface(x,y,basegen) {
top1 = basegen
bottom = basegen*random(1.04,1.17)
size=random(70,80)/100
side = basegen*random(size-.04,size+.04)
push()
translate(x, y);
head(top1,bottom,side)
eyes(top1,bottom,side)
eyebrows(top1,bottom,side)
mouth2(top1,bottom,side)
pop()
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
}
function head(top1,bottom,side){
top1 = top1
bottom = bottom
side = side
colorMode(HSB,360)
fill(33,34,random(270,340))
noStroke()
beginShape();
vertex(0, bottom);//chin
vertex(.6*side,.85*bottom);//bottomRight
vertex(side,0);//midRight
vertex(.9*side,-.66*top1);//topRight
vertex(0,-top1);//top of head
vertex(-.9*side,-.66*top1);//topLeft
vertex(-side, 0);//midleft
vertex(-.6*side,.85*bottom);//topRight
endShape();
linescol=random(25,255)
colorMode(RGB,255)
facelines(0,bottom,.6*side,.85*bottom,linescol)
facelines(.6*side,.85*bottom,side,0,linescol)
facelines(side,0,.9*side,-.66*top1,linescol)
facelines(.9*side,-.66*top1,0,-top1,linescol)
facelines(0,bottom,-.6*side,.85*bottom,linescol)
facelines(-.6*side,.85*bottom,-side,0,linescol)
facelines(-side,0,-.9*side,-.66*top1,linescol)
facelines(-.9*side,-.66*top1,0,-top1,linescol)
}
function facelines (ax1,ay1,ax2,ay2,colorfacelines){
noFill()
stroke(colorfacelines)
strokeWeight(random(2))
r1=-20
r2=20
i=0
for(var i=0;i<=5;i++){
controlx1=round(ax1+random(r1,r2)*cos(random(0,360)))
controly1=round(ay1+random(r1,r2)*sin(random(0,360)))
controlx2=round(ax2+random(r1,r2)*cos(random(0,360)))
controly2=round(ay2+random(r1,r2)*sin(random(0,360)))
strokeWeight(random(3))
bezier(ax1,ay1,controlx2,controly2,controlx1,controly1,ax2,ay2)
ellipse(ax1,ay1,5,5)
ellipse(ax2,ay2,5,5)
}
}
function eyes (top1,bottom,side){
top1=top1
bottom=bottom
side=side
r1=.1*20;
r2=random(2,8)
noFill()
stroke(65,65,65,150)
strokeWeight(.2)
ellipse(.4*side,.05*bottom,20,20)
for(var i=0;i<6;i++){
stroke(65,65,65,random(20,100))
strokeWeight(random(2))
ellipse(.4*side,.05*bottom,random(10-r1,10+r1),random(10-r1,10+r1))
//rect(.4*side-random(10-r1,10+r1),.05*bottom-random(10-r1,10+r1),random(20-r1,20+r1),random(20-r1,20+r1))
}
fill(0,0,0)
pupil1x=round((.4*side)+random(0,4-r2)*cos(random(0,360)))
pupil1y=round((.05*bottom)+random(0,4-r2)*sin(random(0,360)))
ellipse(pupil1x,pupil1y,random((r2-1)*2,(r2+1)*2),random((r2-1)*2,(r2+1)*2))
noFill()
stroke(65,65,65,150)
strokeWeight(.2)
ellipse(-.4*side,.05*bottom,20,20)
for(var i=0;i<6;i++){
stroke(65,65,65,random(20,100))
strokeWeight(random(2))
ellipse(-.4*side,.05*bottom,random(10-r1,10+r1),random(10-r1,10+r1))
//rect(-.4*side-random(10-r1,10+r1),.05*bottom-random(10-r1,10+r1),random(20-r1,20+r1),random(20-r1,20+r1))
}
fill(0,0,0)
pupil2x=round((-.4*side)+random(0,4-r2)*cos(random(0,360)))
pupil2y=round((.05*bottom)+random(0,4-r2)*sin(random(0,360)))
ellipse(pupil2x,pupil2y,random((r2-1)*2,(r2+1)*2),random((r2-1)*2,(r2+1)*2))
}
function eyebrows (top1,bottom,side){
top1=top1
bottom=bottom
side=side
//ellipse(.4*side,.05*bottom,20,20)
fill(65,65,65)
noStroke()
beginShape();
vertex(.3*side,-.12*bottom);
vertex(.6*side,-.03*bottom);
vertex(.6*side,-.02*bottom);
vertex(.3*side,-.09*bottom);
endShape();
strokeWeight(3)
stroke(0,0,0,random(200,255))
line(.3*side,-.12*bottom,.6*side,-.03*bottom)
noStroke()
beginShape();
vertex(-.3*side,-.12*bottom);
vertex(-.6*side,-.03*bottom);
vertex(-.6*side,-.02*bottom);
vertex(-.3*side,-.09*bottom);
endShape();
strokeWeight(3)
stroke(0,0,0,random(200,255))
line(-.3*side,-.12*bottom,-.6*side,-.03*bottom)
}
function mouth(){
mth=5
x1=35
y1=98
y2=88
y3=85
y4=95
fill(0,0,0)
beginShape();
vertex(x1, y1);
bezierVertex(-x1-mth, y2-mth, -x1+mth, y2-mth, -x1, y2);
bezierVertex(-x1, y3+mth, -x1, y3, -x1, y3);
bezierVertex(-x1, y4+mth, -x1, y4, x1, y4);
endShape();
}
function mouth2 (top1,bottom,side){
top1=top1
bottom=bottom
side=side
ax1=.3*side
ay1=.55*bottom
ax2=-.3*side
ay2=.55*bottom
noFill()
stroke(85,85,85,185)
strokeWeight(focusedRandom(0,3,.5))
r1=-5;
r2=5
for(var i=0;i<=5;i++){
controlx1=round(ax1+random(r1,r2)*cos(random(0,360)))
controly1=round(ay1+random(r1*3,r2*3)*sin(random(0,360)))
controlx2=round(ax2+random(r1,r2)*cos(random(0,360)))
controly2=round(ay2+random(r1*3,r2*3)*sin(random(0,360)))
strokeWeight(random(3))
bezier(ax1,ay1,controlx1,controly2,controlx2,controly1,ax2,ay2) }
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment