Skip to content

Instantly share code, notes, and snippets.

@christinapetris

christinapetris/.block

Forked from dribnet/.block
Created July 17, 2017 01:04
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 christinapetris/7b7201be4769b2343c4b554a285e3611 to your computer and use it in GitHub Desktop.
Save christinapetris/7b7201be4769b2343c4b554a285e3611 to your computer and use it in GitHub Desktop.
Download ZIP
17.2.MDDN342 PS1
Raw
.block
license: mit
Raw
.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;
}
sigma = (max - mean) / focus;
val = d3.randomNormal(mean, sigma)();
if (val > min && val < max) {
return val;
}
return d3.randomUniform(min, max)();
}
Raw
.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);
p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
}
Raw
README.md

Final

The beginning task was to create sketches which represented recognisable faces. I chose Harry Potter and Pikachu. Leading on from this I knew I wanted to create simple cartoon faces.

I was then inspired by the fire character, Calcifer from Howl's Moving Castle. I chose to develop this fire rather than the other two sketches in part 2 because I felt it evoked more emotion and is simple yet still has an interesting shape.

I explored different colour flames randomly placed in a grid. I wanted the orange one more eye catching with a brighter colour, bigger scale and different mouth shape to express more shock. The blue is the most calm with its mouth closed. While the purple is slightly shocked and out of it/spaced out.

I refined the layout in Part 4 by making orange the most common colour. 87% of the time the fire is orange, while 10% of the time it is blue and the most rare colour is purple (3%).

After contemplation I went with a random variety of orange colours as it creates more variability. I made sure there was not much variety so it does not look to chaotic.

I experimented with a different layout where the colours are separated from each other and more common appearing colours (e.g.orange) are closer to the bottom.

For my final layout I decided to go with a grid layout with some jitter and varying tilt values. This is so that the blue and purple flames will appear randomly making it more of a surprise.

I also made the orange colours more closer in shade making the more yellow and red colours less common. Finally there is a 30% chance that the whole grid is mostly purple or blue. I added this to create a drastic change and give more emphasis on the rare colours.

Raw
index.html
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/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=".purview_helper.js"></script>
<script language="javascript" type="text/javascript" src=".focused_random.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></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": "f613784324cccd4d62ba2de66d1b8caeaa0ab231",
"name": "final"
},
{
"sha": "81743914283cb083d0de32dd7c74d6e2873b185b",
"name": "distribution"
},
{
"sha": "e7d1b000c13c20f66910ceb6945e7d39d53a20c8",
"name": "experiment"
},
{
"sha": "db869172e6aadefa15cd8de87940fc9c94c995bb",
"name": "randomize"
},
{
"sha": "5e859896bd4182ea8d21698b2b0ae61a80f52314",
"name": "drawing_styles"
},
{
"sha": "2c9aef36b130d398be0d0bb5ac7dfadfd66fc9c7",
"name": "portraits"
}
]
}
Raw
sketch.js
var canvasWidth = 960;
var canvasHeight = 500;
var curRandomSeed;
function setup () {
// create the drawing canvas, save the canvas element
var main_canvas = createCanvas(canvasWidth, canvasHeight);
main_canvas.parent('canvasContainer');
curRandomSeed = int(focusedRandom(0, 100));
// rotation in degrees
angleMode(DEGREES);
}
// global variables for colors
var bg_color1 = "#400B00";var bg_color1 = "#1a0400";
//var bg_color1 = 0;
var fg_color1 = [151, 102, 52];
var stroke_color1 = "#400B00";
var stroke_color1 = 0;
var num_faces = 22;
// calcifer (fire)
function drawFace1(x, y, w, h, mouth_value, mouth_width, pupilSize, chin, faceDown, fireOpacity, fireColour, orangeness, bodySize, tilt_value, bodyDown) {
strokeWeight(0.7);
push();
translate(x, y -faceDown +bodyDown);
rotate(tilt_value);
//translate(0,-15);
var extent = 0;
if(h < w) {
extent = h / 2;
}
else {
extent = w / 2;
}
var scale2 = extent / 220.0;
//blue
stroke(stroke_color1);
if(fireColour==0){
fill(0,234,255,fireOpacity);
fill(0,106,255,fireOpacity);
fill(0,170,255,fireOpacity);
}
//orange
if(fireColour==1){
fill(255, 227,42, fireOpacity);
fill(255, 173, 0, fireOpacity);
fill(255, orangeness, 0, fireOpacity);
}
//purple
if(fireColour==2){
fill(126,115,255,fireOpacity);
}
push();
scale(bodySize,bodySize);
if(fireColour==1){
fireBodyOrange(chin);
}
else{ fireBody(chin);}
pop();
fill(255);
push();
translate(0,faceDown);
fireEyes(scale2, pupilSize);
fireMouth(scale2, mouth_value, mouth_width);
pop();
pop();
}
var lastSwapTime = 0;
var millisPerSwap = 5000;
function changeRandomSeed() {
curRandomSeed = curRandomSeed + 1;
lastSwapTime = millis();
}
function mouseClicked() {
changeRandomSeed();
}
function draw () {
if(millis() > lastSwapTime + millisPerSwap) {
changeRandomSeed();
}
resetFocusedRandom(curRandomSeed);
noStroke();
background(bg_color1);
// draw 1st face
fill(bg_color1);
var w = canvasWidth / 10;
var h = canvasHeight / 6;
translate(-w/4,0);
var max_shift = 0.2 * w;
mostlyOrange = getRandomMostlyOrange();
for(var i=0; i<6; i++) {
for(var j=0; j<10; j++) {
var y = h/2 + h*i;
var x = w/2 + w*j;
// shift even rows over by half a face
if(i%2 == 0) {
x = x + w/2;
}
// also random jitter
x = x + focusedRandom(-max_shift, max_shift, 3);
y = y + focusedRandom(-max_shift, max_shift, 3);
tilt_value = focusedRandom(-30, 30,8);
if(mostlyOrange == 1){
fireColour =getRandomColour();
}
else{
fireColour =getRandomColour2();
}
orangeness = focusedRandom(120, 200);
if (fireColour == 0){
mouth_value = focusedRandom(1, 10);
pupilSize = focusedRandom(25, 30);
chin = 110;
faceDown = 5;
fireOpacity = focusedRandom(50, 100);
mouth_width = 100;
bodySize = 0.6;
bodyDown = 8;
}
if (fireColour == 1){
mouth_value = focusedRandom(25, 30);
mouth_width = 40;
pupilSize = focusedRandom(5, 15);
chin = 115;
faceDown = 5;
fireOpacity = focusedRandom(100, 180);
bodySize = 0.7;
bodyDown = 0;
}
if (fireColour == 2){
mouth_value = focusedRandom(10, 20);
pupilSize = focusedRandom(25, 30);
chin = 120;
faceDown = 5;
bodySize = 0.6;
fireOpacity = focusedRandom(50, 80);
mouth_width = 100;
bodyDown = 8;
}
drawFace1(x, y, w, h, mouth_value, mouth_width, pupilSize, chin, faceDown, fireOpacity, fireColour, orangeness, bodySize, tilt_value, bodyDown);
}
}
}
function getRandomColour() {
random_result = focusedRandom(0, 100);
if(random_result < 10) {
return 0;
}
else if(random_result < 13) {
return 2;
}
else {
return 1;
}
}
function getRandomMostlyOrange(){
random_result = focusedRandom(0, 100);
if(random_result < 30) {
return 0;
}
else {
return 1;
}
}
function getRandomColour2() {
random_result = focusedRandom(0, 100);
if(random_result < 40) {
return 0;
}
else if(random_result < 90) {
return 2;
}
else {
return 1;
}
}
function fireBody(chin){
push();
translate(0,3);
scale(0.6,0.58);
quad(0, chin, -70, 75, -90, 10, 70, 75);
quad(0, chin, -70, 75, 80, -10, 70, 75);
quad(0, chin, -70, 75, -70, -30, 70, 75);
quad(0, chin, -70, 75, 60, -50, 70, 75);
quad(0, chin, -70, 75, -50, -80, 70, 75);
quad(0, chin, -70, 75, 10, -120, 70, 75);
pop();
}
function fireBodyOrange(chin){
push();
translate(0,3);
scale(0.6,0.58);
fill(255, focusedRandom(90, 230,4), 0, fireOpacity);
quad(0, chin, -70, 75, -90, 10, 70, 75);
fill(255, focusedRandom(90, 230,4), 0, fireOpacity);
quad(0, chin, -70, 75, 80, -10, 70, 75);
fill(255, focusedRandom(90, 230,4), 0, fireOpacity);
quad(0, chin, -70, 75, -70, -30, 70, 75);
fill(255, focusedRandom(80, 230,4), 0, fireOpacity);
quad(0, chin, -70, 75, 60, -50, 70, 75);
fill(255, focusedRandom(90, 230,4), 0, fireOpacity);
quad(0, chin, -70, 75, -50, -80, 70, 75);
fill(255, focusedRandom(90, 230,4), 0, fireOpacity);
quad(0, chin, -70, 75, 10, -120, 70, 75);
pop();
}
function fireEyes(scale2, pupilSize){
push();
scale(1);
stroke(0);
ellipse(-50 * scale2, 110 * scale2, 50 * scale2, 50 * scale2);
ellipse( 50 * scale2, 110 * scale2, 50 * scale2, 50 * scale2);
fill(0);
ellipse(-50 * scale2, 110 * scale2, pupilSize * scale2, pupilSize * scale2);
ellipse( 50 * scale2, 110 * scale2, pupilSize * scale2, pupilSize * scale2);
pop();
}
function fireMouth(scale2, mouth_value, mouth_width){
// mouth
push();
scale(1);
noStroke();
fill(bg_color1);
ellipse(0 * scale2, 150 * scale2, mouth_width * scale2, mouth_value * scale2);
pop();
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment