Skip to content

Instantly share code, notes, and snippets.

@dribnet

dribnet/.block

Forked from uwcc/.block
Last active July 19, 2021 23:20
Show Gist options
  • Save dribnet/5f4f801ee500384b15da15ec6971000f to your computer and use it in GitHub Desktop.
Save dribnet/5f4f801ee500384b15da15ec6971000f to your computer and use it in GitHub Desktop.
Download ZIP
MDDN 342 2021 Assignment 1: Random Faces
Raw
README.md

Assignment 1 Sample Code

In class demo for better drawing techniques.

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 = [225, 206, 187];
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(bg_color1);
const num_across=5;
for (let i=1; i<=num_across; i++) {
push();
translate(width*i/(num_across+1), height/2);
scale(10);
let eyeColor = random(0, 100);
drawFace(eyeColor);
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>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>Setting 6</td>
<td id="slider6Container"></td>
</tr>
<tr>
<td>Setting 7</td>
<td id="slider7Container"></td>
</tr>
<tr>
<td>Setting 8</td>
<td id="slider8Container"></td>
</tr>
<tr>
<td>Setting 9</td>
<td id="slider9Container"></td>
</tr>
<tr>
<td>Setting 10</td>
<td id="slider10Container"></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 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);
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');
faceGuideCheckbox = createCheckbox('', false);
faceGuideCheckbox.parent('checkbox1Container');
faceSelector = createSelect();
faceSelector.option('1');
faceSelector.option('2');
faceSelector.option('3');
faceSelector.value('1');
faceSelector.parent('selector1Container');
}
const bg_color = [125, 125, 125];
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 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);
push();
if (mode == '1') {
// draw 1st face
drawFace(s1);
}
if (mode == '2') {
// draw 2nd face - let slider value 1 indicate thinness
drawFace2(s1);
}
if (mode == '3') {
// draw 3rd face using values mapped from 3 sliders
let tilt_value = map(s1, 0, 100, -90, 90);
let mouth_value = map(s2, 0, 100, 0.5, 10);
let eye_value = int(map(s3, 0, 100, 1, 3));
drawFace3(tilt_value, eye_value, mouth_value);
}
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.
*/
const background_color = [125, 125, 125];
const lightBrown = [234, 215, 194];
const darkBrown = [93, 84, 77];
const midBrown = [195, 166, 136];
const lightpink = [244, 209, 209];
const offWhite = [239, 235, 229];
const offWhiteAlpha = [239, 235, 229, 100];
const offBlack = [69, 62, 57];
const offBlackAlpha = [69, 62, 57, 50];
// eyeColor goes from 0 to 100 - 100 is bright
function drawFace(eyeColor) {
angleMode(DEGREES);
//strokeWeight(0.1);
//overall shadow ADDED
fill(offBlackAlpha);
stroke(offBlackAlpha);
strokeWeight(0.5);
strokeJoin(ROUND);
push();
translate(0.5, 0.5);
triangle(-8, -8, -7, -2, -2, -7); //left
triangle(8, -8, 7, -2, 2, -7);//right
noStroke();
ellipse(0, 0, 15)
fill(offBlackAlpha);
stroke(offBlackAlpha);
for(let i = 0; i < 4; i++){
translate(0.11, 0.1);
triangle(-8, -8, -7, -2, -2, -7); //left
triangle(8, -8, 7, -2, 2, -7);//right
noStroke();
ellipse(0, 0, 15);//head
}
//head
pop();
noFill();
strokeJoin(ROUND);
strokeWeight(0.1);
fill(lightBrown);
stroke(lightBrown);
strokeWeight(0.7);
triangle(-8, -8, -7, -2, -2, -7);
fill(lightpink);
noStroke();
triangle(-6.5, -6.5, -6, -4, -4, -6);
fill(lightBrown);
stroke(lightBrown);
strokeWeight(0.7);
triangle(8, -8, 7, -2, 2, -7);
fill(lightpink);
noStroke();
triangle(6.5, -6.5, 6, -4, 4, -6);
// head
fill(lightBrown);
ellipse(0, 0, 15);
fill(offWhite);
arc(0, 0, 15, 15, 30, 150);
ellipse(0, 0, 2.5, 1.5);
//nose ADDED
fill(offBlack);
ellipse(0, 0, 2, 1);
//nose shine ADDED
fill(offWhiteAlpha);
push();
translate(-0.3, -0.1);
rotate(-7);
ellipse(0, 0, 0.7, 0.3);
ellipse(0, 0, 0.4, 0.1);
pop();
// eyes
let brightness = map(eyeColor, 0, 100, 0, 200);
fill(darkBrown);
ellipse(-3, -3, 3);
ellipse( 3, -3, 3);
fill(offWhiteAlpha);
ellipse(-3.5, -3.5, 0.8);
ellipse( 2.5, -3.5, 0.8);
ellipse(-3.5, -3.5, 0.6);//ADDED for eye shine depth
ellipse( 2.5, -3.5, 0.6);//ADDED for eye shine depth
}
Raw
focused_random_demo.js
var canvasWidth = 960;
var canvasHeight = 500;
var sliders = [];
var faceSelector;
var curRandomSeed;
function setup () {
// create the drawing canvas, save the canvas element
var main_canvas = createCanvas(canvasWidth, canvasHeight);
main_canvas.parent('canvasContainer');
curRandomSeed = int(random(0, 1000));
// create sliders
for(i=1; i<=3; i++) {
var slider = createSlider(0, 100, 50);
var parentStr = 'slider' + i + 'Container';
slider.parent(parentStr);
sliders.push(slider);
}
sliders[0].value(0);
sliders[1].value(100);
sliders[2].value(0);
randButton = createButton('randomize');
randButton.mousePressed(changeRandomSeed);
randButton.parent('selector1Container');
// rotation in degrees
angleMode(DEGREES);
}
function changeRandomSeed() {
curRandomSeed = curRandomSeed + 1;
}
// global variables for colors
var bg_color = [200, 200, 200];
var fg_color = [255, 255, 255];
var stroke_color = [0, 0, 0];
var num_samples = 2000;
var num_bins = 20;
function getAveragedRandom(min, max, n) {
let sum = 0;
for(let i=0; i<n; i++) {
sum = sum + random(min, max);
}
return sum / n;
}
function draw () {
// reset the random number generator each time draw is called
randomSeed(curRandomSeed);
var min = sliders[0].value();
var max = sliders[1].value();
var focus = int(map(sliders[2].value(), 0, 100, 1, 8));
var samples = []
var bins = Array(num_bins)
for(var i=0; i<num_bins; i++) {
bins[i] = 0;
}
var s, b;
for(var i=0; i<num_samples; i++) {
s = getAveragedRandom(min, max, focus);
b = Math.floor(s*4 / num_bins);
bins[b] = bins[b] + 1;
}
background(bg_color);
fill(fg_color);
for(var i=0; i<num_bins; i++) {
x = i * width / num_bins;
y = bins[i];
rect(x, height-y, width/num_bins, y);
}
fill(0);
var info = "min " + min + " max " + max + " n " + focus;
textSize(36);
text(info, 300, 100);
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
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
purview.json
{
"commits": [
{
"sha": "4d409e6b1216cb9e86087a31cf93f4f809abe996",
"name": "drawing tips"
},
{
"sha": "8085c457780ce116a282fe8d502e5b0646911269",
"name": "getAveragedRandom() histogram"
},
{
"sha": "4e72c9b327f050f40eb45cb59a305cbe17919e98",
"name": "gaussian distribution"
},
{
"sha": "5acd3634c58d1cb046b824018766ec4854d57975",
"name": "weighted distribution"
},
{
"sha": "ea91c483f8c3c75765ca5a93052f4caad5971792",
"name": "cat in arrangement"
},
{
"sha": "3009699893cad9fc31d4f52a5c413f0b3099e5e6",
"name": "cat in editor"
},
{
"sha": "83f4e2b64085b3ea695e0250791fe7d8098e1dc9",
"name": "sketch"
}
]
}
Raw
sketch.html
<head>
<style> body {padding: 0; margin: 0;} </style>
</head>
<body style="background-color:white">
<img src="sketch.jpg" width="960" height="480"/>
<p>
<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>
</body>
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