Skip to content

Instantly share code, notes, and snippets.

@uwcc

uwcc/.block

Last active August 10, 2021 05:05
Show Gist options
  • Save uwcc/e2e81f4f2cf73c0c345c8f5bf3444f8b to your computer and use it in GitHub Desktop.
Save uwcc/e2e81f4f2cf73c0c345c8f5bf3444f8b to your computer and use it in GitHub Desktop.
Download ZIP
Urena Kuang: Randomised Collections
Raw
README.md

Final Design These faces represent the three main emotions, happiness, sadness and impatience. The style and colors were mainly inspired by some abstract illustrations on Pinterest. //https://www.pinterest.nz/pin/698128379742675263/

PROCESSING: When I first designed the draft of these faces, I drew a total of 18 faces. Because it mainly relies on the bezier curve to complete and does not have some basic flat graphics. This leads to the fact that when I use code to draw these graphics, the feasibility is not very high.(first sketch.jpg) Therefore, in the second graphic design, I added some manipulable color blocks as parameter variables.

PARAMETERS:

//first pink base foundation_size_1=size foundation_pos_x_1=position x foundation_pos_y_1=position y foundation_alphy_1=transparency foundation_angle_1=rotate angle

//second pink base (repeat) foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,

corner_type=corner decoration draw_neck_or_blush=line and ellipse mouth_type= changing between three type of mouth

Raw
arrangement.js
/*
* This program draws your arrangement of faces on the canvas.
*/
const canvasWidth = 960;
const canvasHeight = 500;
let curRandomSeed = 0;
let lastSwapTime = 0;
const millisPerSwap = 3000;
function setup() {
// create the drawing canvas, save the canvas element
let main_canvas = createCanvas(canvasWidth, canvasHeight);
main_canvas.parent('canvasContainer');
curRandomSeed = int(random(0, 1000));
// rotation in degrees
angleMode(DEGREES);
}
function changeRandomSeed() {
curRandomSeed = curRandomSeed + 1;
lastSwapTime = millis();
}
// global variables for colors
const bg_color1 = [255];
function mouseClicked() {
changeRandomSeed();
}
function draw() {
if (millis() > lastSwapTime + millisPerSwap) {
changeRandomSeed();
}
// reset the random number generator each time draw is called
randomSeed(curRandomSeed);
// clear screen
background(20);
strokeWeight(0.3);
let cols = 8; // x
let rows = 4; // y
let w = canvasWidth / cols;
let h = canvasHeight / rows;
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
let y = h / 2 + h * i;
let x = w / 2 + w * j;
let foundation_size_1 = random(8, 14);
let foundation_pos_x_1 = random(-1, 1);
let foundation_pos_y_1 = random(-1, 1);
let foundation_alphy_1 = random(20, 180);
let foundation_angle_1 = random(-0.5, 0.5);
let foundation_size_2 = random(10, 16);
let foundation_pos_x_2 = random(-5, 5);
let foundation_pos_y_2 = random(-5, 5);
let foundation_alphy_2 = random(50, 200);
let foundation_angle_2 = random(-0.5, 0.5);
let corner_type = floor(random(0, 8));
let draw_neck_or_blush = floor(random(0, 2));
let mouth_type = floor(random(0, 3));
if (j == 0) {
// center face
push();
translate(x, y);
scale(w / 25, h / 25);
drawFace3(
foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
corner_type, draw_neck_or_blush, mouth_type
);
pop();
} else if (j > 0) {
// all other faces
push();
translate(x, y);
scale(w / 25, h / 25);
if (random(2) < 1) {
drawFace1(
foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
corner_type, draw_neck_or_blush, mouth_type
);
} else {
drawFace2(
foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
corner_type, draw_neck_or_blush, mouth_type
);
}
pop();
}
}
}
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
} else if (key == '@') {
saveBlocksImages(true);
}
}
Raw
editor.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
<script language="javascript" type="text/javascript" src="face_code.js"></script>
<script language="javascript" type="text/javascript" src="editor.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="index.html">arrangement</a>
(<a href="arrangement.js">arrangement code</a>,
<a href="face_code.js">face code</a>)<br>
<a href="editor.html">editor</a>
(<a href="editor.js">editor code</a>,
<a href="face_code.js">face code</a>)<br>
<a href="sketch.html">sketch</a>
</div>
<div class="inner" id="controls" height="500px">
<table>
<tr>
<td>foundation_size_1</td>
<td id="slider1Container"></td>
</tr>
<tr>
<td>foundation_pos_x_1</td>
<td id="slider2Container"></td>
</tr>
<tr>
<td>foundation_pos_y_1</td>
<td id="slider3Container"></td>
</tr>
<tr>
<td>foundation_alpha_1</td>
<td id="slider4Container"></td>
</tr>
<tr>
<td>foundation_angle_1</td>
<td id="slider5Container"></td>
</tr>
<tr>
<td>foundation_size_2</td>
<td id="slider6Container"></td>
</tr>
<tr>
<td>foundation_pos_x_2</td>
<td id="slider7Container"></td>
</tr>
<tr>
<td>foundation_pos_y_2</td>
<td id="slider8Container"></td>
</tr>
<tr>
<td>foundation_alpha_2</td>
<td id="slider9Container"></td>
</tr>
<tr>
<td>foundation_angle_2</td>
<td id="slider10Container"></td>
</tr>
<tr>
<td>corner_type</td>
<td id="slider11Container"></td>
</tr>
<tr>
<td>draw_neck_or_blush</td>
<td id="slider12Container"></td>
</tr>
<tr>
<td>mouth_type</td>
<td id="slider13Container"></td>
</tr>
<tr>
<td>Show Target</td>
<td id="checkbox1Container"></td>
</tr>
<tr>
<td>Face</td>
<td id="selector1Container"></td>
</tr>
</table>
</div>
</div>
</table>
</body>
Raw
editor.js
/*
* This editor shows the possible faces that can be created
*/
const canvasWidth = 960;
const canvasHeight = 500;
let slider1, slider2, slider3, slider4, slider5;
let slider6, slider7, slider8, slider9, slider10;
let slider11, slider12, slider13;
let faceSelector;
let faceGuideCheckbox;
function setup() {
// create the drawing canvas, save the canvas element
let 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);
slider6 = createSlider(0, 100, 50);
slider7 = createSlider(0, 100, 50);
slider8 = createSlider(0, 100, 50);
slider9 = createSlider(0, 100, 50);
slider10 = createSlider(0, 100, 50);
slider11 = createSlider(0, 100, 50);
slider12 = createSlider(0, 100, 50);
slider13 = createSlider(0, 100, 50);
slider1.parent('slider1Container');
slider2.parent('slider2Container');
slider3.parent('slider3Container');
slider4.parent('slider4Container');
slider5.parent('slider5Container');
slider6.parent('slider6Container');
slider7.parent('slider7Container');
slider8.parent('slider8Container');
slider9.parent('slider9Container');
slider10.parent('slider10Container');
slider11.parent('slider11Container');
slider12.parent('slider12Container');
slider13.parent('slider13Container');
faceGuideCheckbox = createCheckbox('', false);
faceGuideCheckbox.parent('checkbox1Container');
faceSelector = createSelect();
faceSelector.option('1');
faceSelector.option('2');
faceSelector.option('3');
faceSelector.value('3');
faceSelector.parent('selector1Container');
}
const bg_color = [255];
function draw() {
strokeWeight(0.2);
let mode = faceSelector.value();
background(bg_color);
let s1 = slider1.value();
let s2 = slider2.value();
let s3 = slider3.value();
let s4 = slider4.value();
let s5 = slider5.value();
let s6 = slider6.value();
let s7 = slider7.value();
let s8 = slider8.value();
let s9 = slider9.value();
let s10 = slider10.value();
let s11 = slider11.value();
let s12 = slider12.value();
let s13 = slider13.value();
let show_face_guide = faceGuideCheckbox.checked();
// use same size / y_pos for all faces
let face_size = canvasWidth / 5;
let face_scale = face_size / 10;
let face_y = height / 2;
let face_x = width / 2;
push();
translate(face_x, face_y);
scale(face_scale);
// 粉底的 大小、位置、透明度、旋转角度
let foundation_size_1 = map(s1, 0, 100, 10, 20);
let foundation_pos_x_1 = map(s2, 0, 100, -5, 5);
let foundation_pos_y_1 = map(s3, 0, 100, -5, 5);
let foundation_alphy_1 = map(s4, 0, 100, 50, 255);
let foundation_angle_1 = map(s5, 0, 100, 0, TWO_PI);
let foundation_size_2 = map(s6, 0, 100, 10, 20);
let foundation_pos_x_2 = map(s7, 0, 100, -5, 5);
let foundation_pos_y_2 = map(s8, 0, 100, -5, 5);
let foundation_alphy_2 = map(s9, 0, 100, 50, 255);
let foundation_angle_2 = map(s10, 0, 100, 0, TWO_PI);
// 边角装饰的类型
let corner_type = floor(map(s11, 0, 100, 0, 8));
// 是否绘制项链或腮红
let draw_neck_or_blush = floor(map(s12, 0, 100, 0, 2));
// 嘴巴类型
let mouth_type = floor(map(s13, 0, 100, 0, 3));
push();
if (mode == '1') {
drawFace1(
foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
corner_type, draw_neck_or_blush, mouth_type
);
}
if (mode == '2') {
drawFace2(
foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
corner_type, draw_neck_or_blush, mouth_type
);
}
if (mode == '3') {
drawFace3(
foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
corner_type, draw_neck_or_blush, mouth_type
);
}
pop();
if (show_face_guide) {
strokeWeight(0.1);
rectMode(CORNER);
noFill()
stroke(0, 0, 255);
// ellipse(0, 0, 20, 20);
rect(-10, -10, 20, 20);
line(0, -11, 0, -10);
line(0, 10, 0, 11);
line(-11, 0, -10, 0);
line(11, 0, 10, 0);
}
pop();
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
} else if (key == '@') {
saveBlocksImages(true);
}
}
Raw
face_code.js
/*
* This file should contain code that draws your faces.
*
* Each function takes parameters and draws a face that is within
* the bounding box (-10, -10) to (10, 10).
*
* These functions are used by your final arrangement of faces as well as the face editor.
*/
function drawFace1(
foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
corner_type, draw_neck_or_blush, mouse_type) {
let palette = [
color(247, 194, 163),
color(244, 163, 160),
color(246, 226, 215),
color(246, 204, 180)
];
let col_1 = color(244, 163, 160, foundation_alphy_1);
drawFoundation(
foundation_pos_x_1, foundation_pos_y_1,
foundation_size_1, foundation_size_1 * 1.25,
foundation_angle_1, col_1
);
let col_2 = color(245, 177, 140, foundation_alphy_2);
drawFoundation(
foundation_pos_x_2, foundation_pos_y_2,
foundation_size_2, foundation_size_2 * 1.25,
foundation_angle_2, col_2
);
if (draw_neck_or_blush) {
drawNecklace(color(244, 146, 147));
} else {
drawBlush(color(240, 159, 157));
}
let col_corner = palette[3];
drawCorner(col_corner, corner_type > 3, (corner_type % 4) * HALF_PI);
push();
if (mouse_type !== 0) {
translate(0, 1.5);
}
drawMouth(mouse_type);
pop();
noFill();
beginShape();
curveVertex(-9.440000, -4.280000);
curveVertex(-8.600000, -5.040000);
curveVertex(-6.360000, -5.560000);
curveVertex(-3.800000, -5.240000);
curveVertex(-1.880000, -3.280000);
curveVertex(-1.600000, 1.320000);
curveVertex(-1.639999, 6.119999);
curveVertex(-1.639999, 7.520000);
endShape();
line(-1.639999, 6.119999, 0.360001, 5.880001);
beginShape();
curveVertex(-0.480000, -2.240000);
curveVertex(0.120000, -4.520000);
curveVertex(2.400000, -5.800000);
curveVertex(4.600000, -5.680000);
curveVertex(6.400000, -4.680000);
curveVertex(7.760000, -2.120000);
endShape();
// left eye
beginShape();
curveVertex(-3.480000, -1.040000);
curveVertex(-3.960000, -2.480000);
curveVertex(-5.040000, -3.280000);
curveVertex(-5.960000, -3.320000);
curveVertex(-6.880000, -3.120000);
curveVertex(-7.560000, -2.760000);
curveVertex(-7.160000, -1.880000);
curveVertex(-5.920000, -1.240000);
curveVertex(-4.680000, -1.560000);
curveVertex(-4.000000, -2.400000);
curveVertex(-3.240000, -2.440000);
curveVertex(0.120000, -2.960000);
endShape();
beginShape();
curveVertex(-5.760000, -1.880000);
curveVertex(-6.960000, -3.280000);
curveVertex(-7.520000, -3.800000);
curveVertex(-8.360000, -4.559999);
endShape();
beginShape();
curveVertex(-6.000000, -2.120000);
curveVertex(-5.960000, -3.320000);
curveVertex(-6.040000, -3.960000);
curveVertex(-6.320000, -4.320000);
curveVertex(-7.520000, -5.240000);
endShape();
beginShape();
curveVertex(-5.640000, -2.240000);
curveVertex(-5.120000, -3.280000);
curveVertex(-3.880000, -4.000000);
curveVertex(-2.440000, -3.920000);
endShape();
// left pupil
push();
beginShape();
curveVertex(-8.800000, -2.000000);
curveVertex(-7.040000, -3.000000);
curveVertex(-5.960000, -3.360000);
curveVertex(-4.559999, -2.960000);
curveVertex(-5.280000, -2.280000);
curveVertex(-6.400000, -2.360000);
curveVertex(-7.040000, -2.960000);
curveVertex(-8.400000, -4.920000);
endShape();
beginShape();
curveVertex(-7.880000, -4.480000);
curveVertex(-6.800000, -2.900000);
curveVertex(-6.160000, -2.540000);
curveVertex(-5.460000, -2.700000);
curveVertex(-4.820000, -2.720000);
curveVertex(-5.100000, -2.960000);
curveVertex(-5.720000, -2.800000);
curveVertex(-6.400000, -3.020000);
curveVertex(-5.840000, -3.080000);
curveVertex(-5.340000, -3.040000);
curveVertex(-6.240000, -3.220000);
curveVertex(-5.280000, -5.100000);
endShape();
pop();
// right eye
beginShape();
curveVertex(0.280000, -1.880000);
curveVertex(1.240000, -3.040000);
curveVertex(3.040000, -3.720000);
curveVertex(5.000000, -3.000000);
curveVertex(5.679999, -1.320001);
endShape();
beginShape();
curveVertex(2.320000, -6.040000);
curveVertex(1.000000, -3.200000);
curveVertex(2.960000, -1.960000);
curveVertex(5.039999, -3.240000);
curveVertex(5.880001, -6.920000);
endShape();
beginShape();
curveVertex(0.360001, -2.240000);
curveVertex(1.300000, -1.620000);
curveVertex(1.760000, -2.300000);
curveVertex(1.219999, -3.580000);
endShape();
beginShape();
curveVertex(3.620000, -1.000000);
curveVertex(3.099999, -1.360000);
curveVertex(2.940001, -2.020000);
curveVertex(3.760000, -2.960000);
endShape();
beginShape();
curveVertex(5.820000, -1.780000);
curveVertex(4.960001, -1.680000);
curveVertex(4.119999, -2.460000);
curveVertex(3.639999, -2.960000);
endShape();
// right pupil
beginShape();
curveVertex(4.119999, -4.800000);
curveVertex(3.920000, -3.420000);
curveVertex(2.960000, -2.860000);
curveVertex(1.879999, -3.320000);
curveVertex(1.320000, -4.240000);
endShape();
beginShape();
curveVertex(2.400000, -4.360000);
curveVertex(1.980000, -3.340000);
curveVertex(3.059999, -2.960000);
curveVertex(3.639999, -3.260000);
curveVertex(3.099999, -3.500000);
curveVertex(2.600000, -3.440000);
curveVertex(2.560000, -3.220000);
curveVertex(2.880000, -3.220000);
curveVertex(3.340000, -3.320000);
curveVertex(3.420000, -3.580000);
endShape();
}
function drawFace2(
foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
corner_type, draw_neck_or_blush, mouse_type) {
let palette = [
color(247, 194, 163),
color(244, 163, 160),
color(246, 226, 215),
color(246, 204, 180)
];
let col_1 = color(244, 163, 160, foundation_alphy_1);
drawFoundation(
foundation_pos_x_1, foundation_pos_y_1,
foundation_size_1, foundation_size_1 * 1.25,
foundation_angle_1, col_1
);
let col_2 = color(245, 177, 140, foundation_alphy_2);
drawFoundation(
foundation_pos_x_2, foundation_pos_y_2,
foundation_size_2, foundation_size_2 * 1.25,
foundation_angle_2, col_2
);
if (draw_neck_or_blush) {
drawNecklace(color(244, 146, 147));
} else {
drawBlush(color(240, 159, 157));
}
corner_type = (corner_type + 2) % 7;
let col_corner = palette[3];
drawCorner(col_corner, corner_type > 3, (corner_type % 4) * HALF_PI);
drawMouth(mouse_type);
noFill();
// nose
beginShape();
curveVertex(-3.600000, -6.360000);
curveVertex(-2.440000, -4.960000);
curveVertex(-3.760000, -3.440000);
curveVertex(-5.660000, -3.520000);
curveVertex(-6.880000, -5.080000);
curveVertex(-5.800000, -6.840000);
curveVertex(-3.780000, -7.480000);
curveVertex(-2.080000, -6.920000);
curveVertex(-0.860001, -5.140000);
curveVertex(-0.840000, -2.480000);
curveVertex(-2.180000, 1.420000);
curveVertex(-3.340000, 3.500000);
curveVertex(-3.880000, 4.040001);
endShape();
line(-3.340000, 3.500000, -0.200000, 3.099999);
line(-0.200000, 3.099999, -1.360000, -0.680000);
push();
fill(0);
ellipse(-6.880000, -3.220000, 0.4);
ellipse(-5.080000, -2.720000, 0.36);
noFill();
ellipse(-3.200000, -3.080000, 0.44);
pop();
// right eye
beginShape();
curveVertex(1.100000, -6.760000);
curveVertex(1.200000, -4.860000);
curveVertex(2.940001, -3.840000);
curveVertex(4.559999, -4.200000);
curveVertex(5.780000, -5.700000);
curveVertex(5.120000, -6.980000);
endShape();
push();
fill(0);
ellipse(3.580000, -2.980000, 0.42, 0.35);
noFill();
ellipse(1.580000, -3.260000, 0.3, 0.4);
strokeWeight(0.25);
ellipse(5.440001, -3.380000, 0.4);
pop();
}
function drawFace3(
foundation_size_1, foundation_pos_x_1, foundation_pos_y_1, foundation_alphy_1, foundation_angle_1,
foundation_size_2, foundation_pos_x_2, foundation_pos_y_2, foundation_alphy_2, foundation_angle_2,
corner_type, draw_neck_or_blush, mouth_type) {
let palette = [
color(247, 194, 163),
color(244, 163, 160),
color(246, 226, 215),
color(246, 204, 180)
];
let col_1 = color(244, 163, 160, foundation_alphy_1);
drawFoundation(
foundation_pos_x_1, foundation_pos_y_1,
foundation_size_1, foundation_size_1 * 1.25,
foundation_angle_1, col_1
);
let col_2 = color(245, 177, 140, foundation_alphy_2);
drawFoundation(
foundation_pos_x_2, foundation_pos_y_2,
foundation_size_2, foundation_size_2 * 1.25,
foundation_angle_2, col_2
);
if (draw_neck_or_blush) {
drawNecklace(color(244, 146, 147));
} else {
drawBlush(color(240, 159, 157));
}
corner_type = (corner_type + 6) % 7;
let col_corner = palette[3];
drawCorner(col_corner, corner_type > 3, (corner_type % 4) * HALF_PI);
push();
if (mouth_type !== 2) {
translate(1, 0);
}
drawMouth(mouth_type);
pop();
noFill();
// nose
beginShape();
curveVertex(-1.460000, 0.100000);
curveVertex(-1.219999, 2.440000);
curveVertex(-0.120000, 2.240000);
curveVertex(0.280000, 0.100000);
curveVertex(-0.160000, -2.760000);
curveVertex(0.580000, -5.780000);
curveVertex(2.640000, -7.780000);
curveVertex(5.000000, -7.960000);
curveVertex(7.180000, -6.140000);
curveVertex(7.900000, -3.840000);
curveVertex(7.400000, -0.320000);
curveVertex(5.500000, 3.719999);
curveVertex(3.220000, 6.240000);
curveVertex(0.260000, 7.219999);
curveVertex(-2.480000, 6.380001);
curveVertex(-4.780000, 3.760000);
curveVertex(-5.660000, 0.180000);
curveVertex(-5.500000, -2.059999);
curveVertex(-4.000000, -3.740000);
endShape();
// left eye
beginShape();
curveVertex(-7.000000, -0.620000);
curveVertex(-7.520000, -2.540000);
curveVertex(-4.980000, -3.760000);
curveVertex(-2.460000, -2.560000);
curveVertex(-4.080000, -0.059999);
endShape();
beginShape();
curveVertex(-6.780000, -4.720000);
curveVertex(-7.680000, -2.560000);
curveVertex(-5.080000, -1.280001);
curveVertex(-2.340000, -2.440000);
curveVertex(-2.540000, -5.080000);
endShape();
// tears
push();
fill(0);
ellipse(-8.300000, -1.620000, 0.32);
ellipse(-8.400000, 0.320000, 0.32, 0.44);
strokeWeight(0.25);
ellipse(-8.500000, 1.700000, 0.26, 0.42);
pop();
// left pupil
push();
ellipse(-4.960000, -2.460000, 1.4);
strokeWeight(0.2);
beginShape();
curveVertex(-6.020000, -2.280000);
curveVertex(-5.420000, -2.220000);
curveVertex(-4.880000, -2.440000);
curveVertex(-4.920000, -3.020000);
curveVertex(-4.420000, -2.620000);
curveVertex(-4.520000, -2.240000);
curveVertex(-4.740000, -1.960000);
curveVertex(-5.240000, -2.140000);
curveVertex(-4.580000, -2.640000);
curveVertex(-4.700000, -2.180000);
curveVertex(-5.040000, -2.140000);
curveVertex(-4.620000, -2.700000);
curveVertex(-4.420000, -6.900000);
endShape();
pop();
// right eye
beginShape();
curveVertex(1.940001, -4.880000);
curveVertex(2.000000, -3.220000);
curveVertex(3.940001, -2.720000);
curveVertex(5.840000, -3.700000);
curveVertex(4.759999, -5.020000);
endShape();
line(2.660000, -2.860000, 2.420000, -2.000000);
line(3.719999, -2.720000, 3.960000, -1.940001);
line(4.720000, -2.900000, 5.780000, -1.219999);
}
// draw foundation
// x, y : position
// w, h : size
function drawFoundation(x, y, w, h, angle, col) {
push();
translate(x, y);
rotate(angle);
noStroke();
fill(col);
ellipse(0, 0, w, h);
pop();
}
// draw corner decoration
// col color
// type circle or rectangle
// angle
function drawCorner(col, type = true, angle = 0) {
push();
noStroke();
fill(col);
angleMode(RADIANS);
rotate(angle);
if (type) {
beginShape();
curveVertex(-2.200000, -9.040000);
curveVertex(1.300000, -9.560000);
curveVertex(3.680000, -9.240000);
curveVertex(7.600000, -9.160000);
curveVertex(8.600000, -9.040000);
curveVertex(8.520000, -6.100000);
curveVertex(8.500000, -2.860000);
curveVertex(8.420000, -0.840000);
curveVertex(7.879999, -2.880000);
curveVertex(6.740000, -5.340000);
curveVertex(5.100000, -7.280000);
curveVertex(3.520000, -8.480000);
curveVertex(1.240000, -9.560000);
curveVertex(2.680000, -6.820000);
endShape();
} else {
arc(-8, -8, 7, 6, PI, TWO_PI);
}
pop();
}
// draw necklace
// col color
function drawNecklace(col) {
push();
translate(0, 1.5);
noFill();
stroke(col);
beginShape();
curveVertex(6.820000, 5.800000);
curveVertex(7.940001, 7.520000);
curveVertex(5.580000, 9.620001);
curveVertex(1.280001, 8.020000);
curveVertex(-2.540000, 9.500000);
curveVertex(-4.940000, 7.780001);
curveVertex(-6.940000, 8.600000);
curveVertex(-6.060000, 9.719999);
endShape();
pop();
}
// draw blush
// col color
function drawBlush(col) {
push();
stroke(250);
strokeWeight(0.1);
fill(col);
ellipse(2.240000, 0.520000, 1, 2.5);
pop();
}
//draw mouth
function drawMouth(type = 0) {
push();
noFill();
strokeWeight(0.2);
stroke(0);
if (type === 0) {
beginShape();
curveVertex(-4.960000, 4.960001);
curveVertex(-3.320000, 6.559999);
curveVertex(-1.520000, 7.200001);
curveVertex(0.480000, 6.959999);
curveVertex(1.640000, 6.160000);
curveVertex(1.920000, 7.560001);
curveVertex(1.000000, 8.600000);
curveVertex(-0.760000, 8.719999);
curveVertex(-2.360000, 8.160000);
curveVertex(-3.600000, 6.559999);
curveVertex(-3.200000, 4.080000);
endShape();
} else if (type === 1) {
rect(-4.240000, 4.880000, 6, 2.5)
} else if (type === 2) {
beginShape();
curveVertex(-1.340000, 8.719999);
curveVertex(-2.220000, 7.820000);
curveVertex(0.000000, 5.900001);
curveVertex(2.200001, 6.020000);
curveVertex(3.580000, 7.940001);
curveVertex(1.700000, 8.820000);
endShape();
beginShape();
curveVertex(-2.620000, 9.559999);
curveVertex(-2.320000, 8.099998);
curveVertex(3.540000, 7.719999);
curveVertex(4.220000, 9.580000);
endShape();
}
pop();
}
Raw
index.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
<script language="javascript" type="text/javascript" src="face_code.js"></script>
<script language="javascript" type="text/javascript" src="arrangement.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="index.html">arrangement</a>
(<a href="arrangement.js">arrangement code</a>,
<a href="face_code.js">face code</a>)<br>
<a href="editor.html">editor</a>
(<a href="editor.js">editor code</a>,
<a href="face_code.js">face code</a>)<br>
<a href="sketch.html">sketch</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
sketch.html
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Raw
z_purview_helper.js
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment