Skip to content

Instantly share code, notes, and snippets.

@oxbowmantella

oxbowmantella/.block

Forked from dribnet/.block
Created July 16, 2018 00:38
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 oxbowmantella/3cd28738454509899fdd5ddfa8a51671 to your computer and use it in GitHub Desktop.
Save oxbowmantella/3cd28738454509899fdd5ddfa8a51671 to your computer and use it in GitHub Desktop.
Download ZIP
PS1 MDDN 342 2018
Raw
.block
license: mit
Raw
README.md

PS1 MDDN 342 2017

So as my final I decided to stick with the simple design of the simple grey scale colors, mainly since it was the least distracting on the eyes, and allowed it to show the faces the best. I did include some green accents on the white/grey faces, since it give abit more contrast on screen.

For context, the idea behind my creation, was to show a varity of faces, through simple geometry, I used triangles mainly, and they can show the central focal point, of where the points maybe meeting. I intially planned for it to look like facial recognistion markers (i.e. when a Iphone is using is faceID app, and how it triangulates the points), but I ended kind of getting a hybrid of that along with tribal masks.

The white/grey faces are unbound, meaning they be excced there parameters, and show more expression, than the ones in black. This was mainly to show a difference in reaction/feature, and they are allowed to move more.

Raw
index.html
<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="z_focused_random.js"></script>
<script language="javascript" type="text/javascript" src="sketch_final.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>
<a href="index1.html">part1</a>
<a href="index2.html">part2</a>
</div>
<div class="inner" id="controls" height="500px">
<table>
<tr>
<td></td>
<td id="slider1Container"></td>
</tr>
<tr>
<td></td>
<td id="slider2Container"></td>
</tr>
<tr>
<td></td>
<td id="slider3Container"></td>
</tr>
<tr>
<td></td>
<td id="slider4Container"></td>
</tr>
<tr>
<td></td>
<td id="slider5Container"></td>
</tr>
<tr>
<td></td>
<td id="selector1Container"></td>
</tr>
</table>
</div>
</div>
</table>
</body>
Raw
index1.html
<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>
Raw
index2.html
<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="sketch2.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>
<a href="index1.html">part1</a>
</div>
<div class="inner" id="controls" height="500px">
<table>
<tr>
<td>Setting 1</td>
<td id="slider1Container"></td>
</tr>
<tr>
<td>Setting 2</td>
<td id="slider2Container"></td>
</tr>
<tr>
<td>Setting 3</td>
<td id="slider3Container"></td>
</tr>
<tr>
<td>Setting 4</td>
<td id="slider4Container"></td>
</tr>
<tr>
<td>Setting 5</td>
<td id="slider5Container"></td>
</tr>
<tr>
<td>Face</td>
<td id="selector1Container"></td>
</tr>
</table>
</div>
</div>
</table>
</body>
Raw
purview.json
{
"commits": [
{
"sha": "fd0a36c71529d3412461605520f752cae810cf0d",
"name": "final_version"
},
{
"sha": "4ae2dfe838d1daaa9b2ede396a761b288d31f95c",
"name": "stylyingTest_2"
},
{
"sha": "54c4f8ed0ae5fb08a0e37935eb91ee65f2393cbc",
"name": "stylyingTest_1"
},
{
"sha": "86dd6f559c7cb81dc2f094838d2c03e0966e1cff",
"name": "extra_experiment"
},
{
"sha": "b2ae57a9766ac7901dbd15645537a2d2e5cff9fd",
"name": "distribution_2 (Focuded FocusRandom)"
},
{
"sha": "f7ea9246ae71b4fa1a9c3a4dc7532f6089dd6701",
"name": "distribution_1 (UnFocuded FocusRandom)"
},
{
"sha": "15cbf7d623fe269f31775971f19ff0e3ab9727dc",
"name": "randomizer_2"
},
{
"sha": "67b7e7c7e24e26c6da9343099e0c9bd84c0ea747",
"name": "randomizer_1"
},
{
"sha": "8ab8b74adeee36c5752ae34104b0b8bfb81b5ab9",
"name": "intialTest"
}
]
}
Raw
sketch.js
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
//cat colors
const bg_color = "#BF6566";
const fg_color1 = "#2F2733";
const fg_color2 = "#09080A";
const stroke_color = "#09080A";
//spong colors
const fg_color3 = "#FFE300";
const fg_color4 = "#FDFFFB";
const fg_color5 = "#B2362B";
const fg_color6 = "#FFDA7E";
const stroke_color2 = "#09080A";
function draw () {
// background color
background(bg_color);
rectMode(CENTER);
// stroke color
stroke(0,0,0,0);
//face1 -------------------
// move to position1, rotate, draw "head" ellipse
push();
translate(960/4, 500/2);
//rotate(4);
fill(fg_color1);
//ellipse(0, 0, 300, 300);
rect(0,0, 250,250);
rect(-125,-150, 50,50);
rect(125,-150, 50,50);
stroke(stroke_color)
// set fill to match background color
fill(bg_color);
// wiskers
strokeWeight(4);
line( 80, -10, 200, -50);
line( 80, 0, 200, 0);
line( 80, 10, 200, 50);
line( -80, 10, -200, 50);
line( -80, -0, -200, -0);
line( -80, -10, -200, -50);
// nose
fill(fg_color1);
line( -20, 0, 0, -20);
line( 20, 0, 0, -20);
line( -20, 0, 20, 0);
// mouth-hole with background color
fill(bg_color);
//ellipse( 0, 70, 150, 20);
pop();
//face 2 -------------------
// move to position2, rotate, draw "head" ellipse
push();
translate(3*960/4, 500/2);
fill(fg_color3);
//ellipse(0, 0, 300, 300);
rect(0,0, 250,250);
fill(fg_color4);
rect(-15,80, 25,50);
rect(15,80, 25,50);
//stroke(stroke_color)
// set fill to match background color
fill(fg_color5);
ellipse(-80, 0, 15, 15);
ellipse(80, 0, 15, 15);
ellipse(-100, 10, 15, 15);
ellipse(100, 10, 15, 15);
ellipse(-80, 20, 15, 15);
ellipse(80, 20, 15, 15);
// holes
fill(fg_color6);
ellipse( -70, -90, 50, 20);
ellipse( -90, -50, 30, 20);
ellipse( 90, -40, 30, 20);
ellipse( 90, 40, 30, 20);
ellipse( -90, 100, 30, 20);
strokeWeight(4);
stroke(stroke_color)
ellipse( 0, 0, 30, 20);
//eyebrows
line( -50, -80, -50, -95);
line( -40, -80, -30, -95);
line( -60, -80, -70, -95);
line( 50, -80, 50, -95);
line( 40, -80, 30, -95);
line( 60, -80, 70, -95);
pop();
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
Raw
sketch2.js
var canvasWidth = 960;
var canvasHeight = 500;
var slider1, slider2, slider3, slider4, slider5;
var faceSelector;
function setup () {
// create the drawing canvas, save the canvas element
var main_canvas = createCanvas(canvasWidth, canvasHeight);
main_canvas.parent('canvasContainer');
// create sliders
slider1 = createSlider(0, 100, 50);
slider2 = createSlider(0, 100, 50);
slider3 = createSlider(0, 100, 50);
slider4 = createSlider(0, 100, 50);
slider5 = createSlider(0, 100, 50);
slider1.parent('slider1Container');
slider2.parent('slider2Container');
slider3.parent('slider3Container');
slider4.parent('slider4Container');
slider5.parent('slider5Container');
faceSelector = createSelect();
faceSelector.option('1');
faceSelector.option('2');
faceSelector.option('3');
faceSelector.option('all')
faceSelector.value('all');
faceSelector.parent('selector1Container');
// rotation in degrees
angleMode(DEGREES);
}
// global variables for colors
var bg_color1 = [225, 206, 187];
var bg_color2 = [47, 59, 64];
var bg_color3 = [70, 70, 120];
var fg_color1 = [151, 102, 52];
var fg_color2 = [56, 91, 194];
var fg_color3 = [206, 207, 180];
const fg_color4 = "#FDFFFB";
const fg_color5 = "#B2362B";
const fg_color6 = "#FFDA7E";
var fg_color7 = [255, 255, 0];
const fg_color8 = "#FFE300";
var stroke_color1 = [95, 52, 8];
var stroke_color2 = [210, 219, 189];
var stroke_color3 = [50, 50, 50];
const stroke_color = "#09080A";
var colorHair = [20, 20, 0];
function polygon(x, y, radius, npoints) {
var angle = TWO_PI / npoints;
beginShape();
for (var a = 0; a < TWO_PI; a += angle) {
var sx = x + cos(a) * radius;
var sy = y + sin(a) * radius;
vertex(sx, sy);
}
endShape(CLOSE);
}
function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {
push();
translate(x, y);
rotate(tilt_value);
rectMode(CENTER);
var extent = 0;
if(h < w) {
extent = h / 2;
}
else {
extent = w / 2;
}
var scale = extent / 220.0;
fill(fg_color1);
rect(0, 0, 300 * scale, 400 * scale);
// eyes
if (eye_value === 1 || eye_value == 3) {
fill(bg_color1);
rect( 0, -80 * scale, 50 * scale, 30 * scale, 30 * scale);
fill(fg_color1);
rect(-10 * scale, -80 * scale, 20 * scale, 20 * scale, 20 * scale);
}
if (eye_value >= 2) {
fill(bg_color1);
rect(-50 * scale, -80 * scale, 50 * scale, 30 * scale, 30 * scale);
rect( 50 * scale, -80 * scale, 50 * scale, 30 * scale, 30 * scale);
fill(fg_color1);
rect(-60 * scale, -80 * scale, 20 * scale, 20 * scale, 20 * scale);
rect( 40 * scale, -80 * scale, 20 * scale, 20 * scale, 20 * scale);
}
fill(255,174, 66);
//ellipse(0, 0, 300, 300);
rect(0,0, 250,250);
rect(-125,-150, 50,50);
rect(125,-150, 50,50);
// set fill to match background color
fill(bg_color2);
// wiskers
strokeWeight(4);
line( 80, -10, 200, -50);
line( 80, 0, 200, 0);
line( 80, 10, 200, 50);
line( -80, 10, -200, 50);
line( -80, -0, -200, -0);
line( -80, -10, -200, -50);
// nose
fill(fg_color1);
line( -20, 0, 0, -20);
line( 20, 0, 0, -20);
line( -20, 0, 20, 0);
// mouth
fill(bg_color1);
ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
rotate(215);
fill(0,0,0);
ellipse((0 * scale)-20, (70 * scale)+eye_value, 100 * scale, mouth_value * scale);
fill(255,255,255);
ellipse((0 * scale)-20, (70 * scale)+eye_value, (100 * scale)/4, (mouth_value * scale)/4);
rotate(-45);
fill(0,0,0);
ellipse((0 * scale)+40, (70 * scale)-eye_value, 100 * scale, mouth_value * scale);
fill(255,255,255);
ellipse((0 * scale)+40, (70 * scale)-eye_value, (100 * scale)/4, (mouth_value * scale)/4);
//print(mouth_value);
fill(bg_color2);
pop();
}
function drawFace2(x, y, w, h, hair_value, eye_value, blink_value) {
rectMode(CENTER);
push();
translate(x, y);
var extent = 0;
if(h < w) {
extent = h / 2;
}
else {
extent = w / 2;
}
var scale = extent / 220.0;
stroke(stroke_color3);
fill(fg_color3);
rect(0, 0, 300 * scale, 400 * scale, 3);
// eyes. first check for blinking
if(blink_value > 0) {
fill(bg_color3);
rect(-50 * scale, -80 * scale, 50 * scale, 2 * scale);
rect( 50 * scale, -80 * scale, 50 * scale, 2 * scale);
}
else {
fill(bg_color3);
rect(-50 * scale, -80 * scale, 50 * scale, 18 * scale);
rect( 50 * scale, -80 * scale, 50 * scale, 18 * scale);
fill(fg_color3);
rect((-50 + eye_value) * scale, -80 * scale, 20 * scale, 20 * scale);
rect(( 50 + eye_value) * scale, -80 * scale, 20 * scale, 20 * scale);
}
// mouth
fill(bg_color3);
rect(0 * scale, 70 * scale, 150 * scale, 20 * scale, 20 * scale);
var noise = 50;
// TODO: paramaterize hair
var follicles = [
/*
[346,138],
[391,120],
[391,67],
[439,76],
[463,42],
[487,18],
[481,101],
[520,102],
[520,78],
[533,54],
[560,108],
[580,76],
[596,124],
[618,124]
*/
[346,random(255)],
[391,random(255)],
[391,random(255)],
[439,random(255)],
[463,random(255)],
[487,random(255)],
[481,random(255)],
[520,random(255)],
[520,random(255)],
[533,random(255)],
[560,random(255)],
[580,random(255)],
[596,random(255)],
[618,random(255)]
];
resetMatrix();
fill(colorHair);
var radius = hair_value * scale;
for(var i=0; i<follicles.length; i++) {
rect(240+follicles[i][0]/2, 120 + (follicles[i][1]/2), radius, radius);
}
rectMode(CORNER);
resetMatrix();
}
function drawFace3(x, y, w, h, width_value, eye_value, mouth_value) {
/*
push();
rectMode(CENTER);
translate(x, y);
// rotate(width_value);
var extent = 0;
if(h < w) {
extent = h / 2;
}
else {
extent = w / 2;
}
var scale = extent / 220.0;
stroke(stroke_color2)
fill(fg_color2);
rect(0, 0, (300 + width_value) * scale, 400 * scale);
// eyes
if (eye_value === 1 || eye_value == 3) {
fill(bg_color2);
rect( 0, -80 * scale, 50 * scale, 30 * scale);
fill(fg_color2);
ellipse(-10 * scale, -80 * scale, 20 * scale, 20 * scale);
}
if (eye_value >= 2) {
fill(bg_color2);
rect(-60 * scale, -80 * scale, 50 * scale, 30 * scale);
rect( 60 * scale, -80 * scale, 50 * scale, 30 * scale);
fill(fg_color2);
ellipse(-60 * scale, -80 * scale, 20 * scale, 20 * scale);
ellipse( 60 * scale, -80 * scale, 20 * scale, 20 * scale);
}
// mouth
fill(bg_color2);
rect(0 * scale, 70 * scale, 150 * scale, mouth_value * scale);
rectMode(CORNER);
pop();
*/
push();
translate(x, y);
fill(fg_color7);
rectMode(CENTER);
var extent = 0;
if(h < w) {
extent = h / 2;
}
else {
extent = w / 2;
}
var scale = extent / 220.0;
fill(fg_color8);
rect(0, 0, 450 * scale, 450 * scale);
fill(fg_color4);
rect(-15,80,25,mouth_value/2);
rect(15,80, 25,mouth_value/2);
//stroke(stroke_color)
// set fill to match background color
fill(fg_color5);
ellipse(-80, 0, 15, 15);
ellipse(80, 0, 15, 15);
ellipse(-100, 10, 15, 15);
ellipse(100, 10, 15, 15);
ellipse(-80, 20, 15, 15);
ellipse(80, 20, 15, 15);
// holes
fill(fg_color6);
ellipse( -70, -90, 50, 20);
ellipse( -90, -50, 30, 20);
ellipse( 90, -40, 30, 20);
ellipse( 90, 40, 30, 20);
ellipse( -90, 100, 30, 20);
strokeWeight(4);
stroke(stroke_color)
ellipse( 0, 0, 30, 20);
//eyebrows
beginShape();
line( -50, mouth_value/2-90, -50, mouth_value/2-120);
line( -40, mouth_value/2-90, -30, mouth_value/2-120);
line( -60, mouth_value/2-90, -70, mouth_value/2-120);
line( 50, mouth_value/2-90, 50, mouth_value/2-120);
line( 40, mouth_value/2-90, 30, mouth_value/2-120);
line( 60, mouth_value/2-90, 70, mouth_value/2-120);
//eyes
strokeWeight(1);
if(mouth_value > 100) {
fill(1);
ellipse(-90 * scale, mouth_value-140, ( 50 * scale)*2, (2 * scale)*2);
ellipse( 90 * scale, mouth_value-140, ( 50 * scale)*2, (2 * scale)*2);
}
else {
fill(1);
ellipse(-90 * scale, mouth_value -140, (40 * scale)*2,(40 * scale)*2);
ellipse( 90 * scale, mouth_value -140, (40 * scale)*2,(40 * scale)*2);
fill(fg_color4);
ellipse((-90 + eye_value) * scale, mouth_value -140, (20 * scale)*2, (20 * scale)*2);
ellipse(( 90 + eye_value) * scale, mouth_value -140 , (20 * scale)*2, (20 * scale)*2);
}
endShape();
pop();
}
function draw () {
noStroke();
var mode = faceSelector.value();
if (mode != 'all') {
if (mode == '1') {
background(bg_color1);
}
else if (mode == '2') {
background(bg_color2);
}
else if (mode == '3') {
background(bg_color3);
}
}
var s1 = slider1.value();
var s2 = slider2.value();
var s3 = slider3.value();
var s4 = slider4.value();
var s5 = slider5.value();
// use same size / y_pos for all faces
var face_w = canvasWidth / 4;
var face_h = face_w;
var face_y = height / 2;
var face_x = width / 2;
if (mode == '1' || mode == 'all') {
// draw 1st face
fill(bg_color1);
rect(0, 0, width/3, height);
var tilt_value = map(s1, 0, 100, -90, 90);
var mouth_value = map(s3, 0, 100, 0, 200);
var eye_value = Math.floor(map(s2, 0, 100, 1, 3));
if (mode == 'all') {
face_x = width / 6;
}
drawFace1(face_x, face_y, face_w, face_h, tilt_value, eye_value, mouth_value);
}
if (mode == '2' || mode == 'all') {
// draw 2nd face
fill(bg_color2);
rect(width/3, 0, 2*width/3, height);
var hair_value = map(s1, 0, 100, 2, 90);
var blink_value = Math.floor(map(s3, 0, 100, 0, 1));
var eye_value = map(s2, 0, 100, -15, 15);
if (mode == 'all') {
face_x = 3 * width / 6;
}
drawFace2(face_x, face_y, face_w, face_h, hair_value, eye_value, blink_value);
}
if (mode == '3' || mode == 'all') {
// draw 3nd face
fill(bg_color3);
rect(2*width/3, 0, width, height);
var width_value = map(s1, 0, 100, 0, 100);
var mouth_value = map(s3, 0, 100, 0, 200);
var eye_value = Math.floor(map(s2, 0, 100, 0, 3));
if (mode == 'all') {
face_x = 5 * width / 6;
}
drawFace3(face_x, face_y, face_w, face_h, width_value, eye_value, mouth_value);
}
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
Raw
sketch_final.js
const canvasWidth = 960;
const canvasHeight = 500;
let curRandomSeed = 0;
function setup () {
// create the drawing canvas, save the canvas element
let main_canvas = createCanvas(canvasWidth, canvasHeight);
main_canvas.parent('canvasContainer');
curRandomSeed = int(focusedRandom(0, 1000));
// rotation in degrees
angleMode(DEGREES);
}
function changeRandomSeed() {
curRandomSeed = curRandomSeed + 1;
}
// global variables for colors
const bg_color1 = [225, 206, 187];
const bg_color2 = [47, 59, 64];
const bg_color3 = [70, 70, 120];
const fg_color1 = [151, 102, 52];
const fg_color2 = [56, 91, 194];
const fg_color3 = [206, 207, 180];
const stroke_color1 = [95, 52, 8];
const stroke_color2 = [210, 219, 189];
const stroke_color3 = [50, 50, 50];
let lastSwapTime = 0;
let millisPerSwap = 1000;
function drawRoundFace(x, y, w, h, tilt_value, Facical_modifier, mouth_value, addtional) {
push();
translate(x, y);
rotate(tilt_value);
let extent = 0;
if(h < w) {
extent = h / 2;
}
else {
extent = w / 2;
}
//let scale = extent / 220.0;
scale(0.7);
stroke(1);
//Face filled
fill(0);
beginShape();
//top of head
vertex(0, -75);
//left side
vertex(-50, -65);
vertex(-65, -45);
vertex(-60, 0);
vertex(-45, 35);
vertex(-35, 50);
vertex(-20, 55);
//bottem
vertex(0, 60);
//right side
vertex(20, 55);
vertex(35, 50);
vertex(45, 35);
vertex(60, 0);
vertex(65, -45);
vertex(50, -65);
endShape();
stroke(255,255,255);
//EYEBROWS LEFT
line( - 55, Facical_modifier - 40, - 45 - addtional, Facical_modifier - 50);
line(- 45 - addtional, Facical_modifier - 50, -10 - addtional, Facical_modifier - 50);
line(-10 - addtional, Facical_modifier - 50, - 30 - addtional, Facical_modifier - 48);
line(- 30 - addtional, Facical_modifier - 48, - 55, Facical_modifier - 40);
//EYEBROWS RIGHT
line( 55, Facical_modifier - 40, 45 + addtional, Facical_modifier - 50);
line( 45 + addtional, Facical_modifier - 50, 10 + addtional, Facical_modifier - 50);
line( 10 + addtional, Facical_modifier - 50, 30 + addtional, Facical_modifier - 48);
line( 30 + addtional, Facical_modifier - 48, 55, Facical_modifier - 40);
//EYES------------------
//LEFT EYE
line( - 45, Facical_modifier - 25, - 25, Facical_modifier - 30);
line( - 25, Facical_modifier - 30, - 15, Facical_modifier - 25 - Facical_modifier);
line( - 15, Facical_modifier - 25 - Facical_modifier, - 20, Facical_modifier - 15);
line( - 20, Facical_modifier - 15, - 30, Facical_modifier - 15);
line( - 30, Facical_modifier - 15, - 45, Facical_modifier - 25);
//RIGHT EYE
line( + 45, Facical_modifier - 25, + 25, Facical_modifier - 30);
line( + 25, Facical_modifier - 30, + 15, Facical_modifier - 25 - Facical_modifier);
line( + 15, Facical_modifier - 25 - Facical_modifier, + 20, Facical_modifier - 15);
line( + 20, Facical_modifier - 15, + 30, Facical_modifier - 15);
line( + 30, Facical_modifier - 15, + 45, Facical_modifier - 25);
//NOSE-----------------
//nose top
line( - 5, Facical_modifier - 15, 5, Facical_modifier - 15);
//sides
line( - 5, Facical_modifier - 15, -5 - Facical_modifier, 15);
line( 5, Facical_modifier - 15, 5 + Facical_modifier, 15);
line( -5 - Facical_modifier, 15, 0 - Facical_modifier, 18);
line( 5 + Facical_modifier, 15, 0 + Facical_modifier, 18);
line( 0 - Facical_modifier, 18, 0 + Facical_modifier, 18);
//inner
line( -5 - Facical_modifier, 15, 0 - Facical_modifier, 10);
line( 5 + Facical_modifier, 15, 0 + Facical_modifier, 10);
line( 0 - Facical_modifier, 10, 0 + Facical_modifier, 10);
//MOUTH
//right side
line( 5 + Facical_modifier, 30, 0 + Facical_modifier, 25);
line( 5 + Facical_modifier, 30, 0 + Facical_modifier, 35);
//left side
line( -5 - Facical_modifier, 30, 0 - Facical_modifier, 25);
line( -5 - Facical_modifier, 30, 0 - Facical_modifier, 35);
//inner
line( 5 + Facical_modifier, 30, -2 + Facical_modifier, 30);
line( -2 + Facical_modifier, 30, 0, 28);
line( -5 - Facical_modifier, 30, 2 - Facical_modifier, 30);
line( 2 - Facical_modifier, 30, 0, 28);
//top
line(0 + Facical_modifier, 25,0 - Facical_modifier, 25);
//bottem
line(0 + Facical_modifier, 35, 0, 42 );
line(0 - Facical_modifier, 35, 0, 42 );
//ADDITION LINES
stroke(100 ,100,100);
strokeWeight(2);
//left side----------------------------
line(-60, 0, - 45, Facical_modifier - 25);
line(-45, 35, - 45, Facical_modifier - 25);
line(-50,-65, - 55, Facical_modifier - 40);
line(-65, -45, - 55, Facical_modifier - 40);
line(-60, 0, - 55, Facical_modifier - 40);
line(-50,-65,- 45 - addtional, Facical_modifier - 50);
line(-50,-65,-10 - addtional, Facical_modifier - 50);
line(0, -75,-10 - addtional, Facical_modifier - 50);
line(-45, 35,- 5 - Facical_modifier, 30);
line(0, 60,- 5 - Facical_modifier, 30);
line(-20, 55,- 5 - Facical_modifier, 30);
line(- 5, Facical_modifier - 15, -10 - addtional, Facical_modifier - 50);
//right side---------------------------
line(60, 0, 45, Facical_modifier - 25);
line(45, 35, 45, Facical_modifier - 25);
line(50,-65, 55, Facical_modifier - 40);
line(65, -45, 55, Facical_modifier - 40);
line(60, 0, 55, Facical_modifier - 40);
line(50,-65, 45 + addtional, Facical_modifier - 50);
line(50,-65, 10 + addtional, Facical_modifier - 50);
line(0, -75, 10 + addtional, Facical_modifier - 50);
line(45, 35, 5 + Facical_modifier, 30);
line(0, 60, 5 + Facical_modifier, 30);
line(20, 55, 5 + Facical_modifier, 30);
//extra
line(- 45, Facical_modifier - 25, - 55, Facical_modifier - 40);
line( 45, Facical_modifier - 25, 55, Facical_modifier - 40);
line( 5, Facical_modifier - 15, 10 + addtional, Facical_modifier - 50);
pop();
}
function drawSquareFace(x, y, w, h, width_value, Facical_modifier, mouth_value, addtional) {
push();
rectMode(CENTER);
translate(x, y);
//rotate(width_value);
let extent = 0;
if(h < w) {
extent = h / 2;
}
else {
extent = w / 2;
}
//let scale = extent / 220.0;
scale(0.7);
stroke(1);
var on = 1;
if(on == 1){
//Face line art
line(0, -75, -50, -65);
line(0, -75, 50, -65);
line(-50, -65, -65, -45);
line(-65, -45, -60, 0);
line(-60, 0, -45, 35);
line(-45, 35, -35, 50);
line(-35, 50, -20, 55);
line(-20, 55, 0, 60);
line(0, 60, 20, 55);
line(20, 55, 35, 50);
line(35, 50, 45, 35);
line(45, 35, 60, 0);
line(60, 0, 65, -45);
line(65, -45, 50, -65);
}
stroke(0,255,0);
//EYEBROWS LEFT
line( - 55, Facical_modifier - 40, - 45 - addtional, Facical_modifier - 50);
line(- 45 - addtional, Facical_modifier - 50, -10 - addtional, Facical_modifier - 50);
line(-10 - addtional, Facical_modifier - 50, - 30 - addtional, Facical_modifier - 48);
line(- 30 - addtional, Facical_modifier - 48, - 55, Facical_modifier - 40);
//EYEBROWS RIGHT
line( 55, Facical_modifier - 40, 45 + addtional, Facical_modifier - 50);
line( 45 + addtional, Facical_modifier - 50, 10 + addtional, Facical_modifier - 50);
line( 10 + addtional, Facical_modifier - 50, 30 + addtional, Facical_modifier - 48);
line( 30 + addtional, Facical_modifier - 48, 55, Facical_modifier - 40);
//LEFT EYE
line( - 45, Facical_modifier - 25, - 25, Facical_modifier - 30);
line( - 25, Facical_modifier - 30, - 15, Facical_modifier - 25 - Facical_modifier);
line( - 15, Facical_modifier - 25 - Facical_modifier, - 20, Facical_modifier - 15);
line( - 20, Facical_modifier - 15, - 30, Facical_modifier - 15);
line( - 30, Facical_modifier - 15, - 45, Facical_modifier - 25);
//RIGHT EYE
line( + 45, Facical_modifier - 25, + 25, Facical_modifier - 30);
line( + 25, Facical_modifier - 30, + 15, Facical_modifier - 25 - Facical_modifier);
line( + 15, Facical_modifier - 25 - Facical_modifier, + 20, Facical_modifier - 15);
line( + 20, Facical_modifier - 15, + 30, Facical_modifier - 15);
line( + 30, Facical_modifier - 15, + 45, Facical_modifier - 25);
//NOSE-----------------
//nose top
line( - 5, Facical_modifier - 15, 5, Facical_modifier - 15);
//sides
line( - 5, Facical_modifier - 15, -5 - Facical_modifier, 15);
line( 5, Facical_modifier - 15, 5 + Facical_modifier, 15);
line( -5 - Facical_modifier, 15, 0 - Facical_modifier, 18);
line( 5 + Facical_modifier, 15, 0 + Facical_modifier, 18);
line( 0 - Facical_modifier, 18, 0 + Facical_modifier, 18);
//inner
line( -5 - Facical_modifier, 15, 0 - Facical_modifier, 10);
line( 5 + Facical_modifier, 15, 0 + Facical_modifier, 10);
line( 0 - Facical_modifier, 10, 0 + Facical_modifier, 10);
//MOUTH
//right side
line( 5 + Facical_modifier, 30, 0 + Facical_modifier, 25);
line( 5 + Facical_modifier, 30, 0 + Facical_modifier, 35);
//left side
line( -5 - Facical_modifier, 30, 0 - Facical_modifier, 25);
line( -5 - Facical_modifier, 30, 0 - Facical_modifier, 35);
//inner
line( 5 + Facical_modifier, 30, -2 + Facical_modifier, 30);
line( -2 + Facical_modifier, 30, 0, 28);
line( -5 - Facical_modifier, 30, 2 - Facical_modifier, 30);
line( 2 - Facical_modifier, 30, 0, 28);
//top
line(0 + Facical_modifier, 25,0 - Facical_modifier, 25);
//bottem
line(0 + Facical_modifier, 35, 0, 42 );
line(0 - Facical_modifier, 35, 0, 42 );
pop();
}
function mouseClicked() {
changeRandomSeed();
}
function changeRandomSeed() {
curRandomSeed = curRandomSeed + 1;
lastSwapTime = millis();
}
function mouseClicked() {
changeRandomSeed();
}
function draw () {
if(millis() > lastSwapTime + millisPerSwap) {
changeRandomSeed();
}
// reset the random number generator each time draw is called
resetFocusedRandom(curRandomSeed);
// clear screen
background(125,125,125);
noStroke();
// draw a 5x3 grid of circles, with SquareFace in the center
let w = canvasWidth / 9;
let h = canvasHeight / 5;
for(let i=0; i<5; i++) {
for(let j=0; j<9; j++) {
let y = h/2 + h*i;
let x = w/2 + w*j;
if ((i == 1 && j == 4) || (i == 2 && j == 3) || (i == 2 && j == 4) || (i == 2 && j == 5) || (i == 3 && j == 4)
|| (i == 0 && j == 4) || (i == 4 && j == 4) || (i == 2 && j == 2)|| (i == 2 && j == 6) || (i == 0 && j == 0)
|| (i == 0 && j == 8) || (i == 4 && j == 0) || (i == 4 && j == 8)) {
let width_value = focusedRandom(10, 50);
let Facical_modifier = int(focusedRandom(-20, 20));
let addtional = int(focusedRandom(-15, 15,5));
let mouth_value = focusedRandom(0, 200);
drawSquareFace(x, y+6, w, h, width_value, Facical_modifier, mouth_value, addtional);
}
else {
let tilt_value = focusedRandom(-15, 45);
let Facical_modifier = int(focusedRandom(1, 20));
let addtional = int(focusedRandom(-15, 15,5));
let mouth_value = focusedRandom(30, 90);
drawRoundFace(x, y+6, w, h, tilt_value, Facical_modifier, mouth_value, addtional);
}
}
}
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
Raw
z_focused_random.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;
}
let sigma = (max - min) / (2 * focus);
let val = d3.randomNormal(mean, sigma)();
if (val >= min && val < max) {
return val;
}
return d3.randomUniform(min, max)();
}
Raw
z_purview_helper.js
// 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment