Skip to content

Instantly share code, notes, and snippets.

@EmilyAShaw

EmilyAShaw/.DS_Store

Forked from dribnet/.block
Created July 16, 2018 01:03
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 EmilyAShaw/524a81903e63a4a3fbe90a53fd073b08 to your computer and use it in GitHub Desktop.
Save EmilyAShaw/524a81903e63a4a3fbe90a53fd073b08 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

Final composition:

narrative:

A group of cats are 'hypnotised' by a lazerlight (cursor). Hence, they do not chase the mice, even though the mice are easy targets as they're in the middle of the group of cats.

I think, This is my final composition. I added some more mice, because I figured that it would suit the narrative if there were more mice. If I do anything else, it will be making the lazerlight 'glow' or have a trail. I also added whiskers. Because somehow up until now, I forgot whiskers were a thing...

Some things I have bought through from my last commit (interesting composition). I bought through the random speed variable, this makes the mice look less uniform, therefore closer to the movement of real mice.

Overall I think I am happy with my final piece, I am glad that I kept the lazerlight - as I believe that it adds a little extra to my composition - especially because I made the randomisations subtle. I think this combonation of subtle changes in the randomness, and the lazerlight is good - because they balance each other out.

If I could do another interesting commit - it would be the adition of color. I am very happy with the greyscale (exception of pink nose), as the colors will also harmonise with each other - nomatter the random varaible.

some things I changed since my last commit:

I made thr cats vary from the grid, and I made another random variable - which only draws cats which have not generated the number 4.

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": "6a0701947f02285e758ce0439aad6c61d7584610",
"name": "final_version"
},
{
"sha": "459a246948b9e1aba787951d94bd4f68603271cf",
"name": "extra_experiment"
},
{
"sha": "635491c92fc5237f83a8e363f6b68a9fb78e2997",
"name": "distribution_2"
},
{
"sha": "4d2e4004c43c213c3b94604bb910bcd655c823ab",
"name": "distribution_1"
},
{
"sha": "7d5455c14c7a1f9a0928453a5339b69aeee37675",
"name": "randomizer_2"
},
{
"sha": "a5574eb8364563efc199d1c2bbe33bbca3b699e5",
"name": "randomizer_1"
}
]
}
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
const bg_color = "#F9F9F9";
const fg_color1 = "#FAB6B6";
const fg_color2 = "#A09BE6";
const stroke_color = "#F9F9F9";
function draw () {
// background color
background(bg_color);
// stroke color
stroke(stroke_color)
// move to position1, rotate, draw "head" ellipse
push();
translate(960/3.5, 500/2);
rotate(4);
fill(fg_color1);
rect(-150, -200, 300, 400, 80);
// set fill to match background color
fill(bg_color);
// draw two eyes
ellipse(-50, -80, 50, 25);
ellipse( 50, -80, 50, 25);
noStroke();
fill(fg_color2);
ellipse( 75, -40, 5, 7);
ellipse( 87, -0, 5, 7);
ellipse( 80, -20, 5, 7);
// set fill back to foreground for eyeballs
fill(fg_color1);
ellipse(-60, -80, 20, 20);
ellipse( 40, -80, 20, 20);
// mouth-hole with background color
fill(bg_color);
ellipse( 0, 70, 200, 5);
pop();
// move to position2, rotate, draw "head" ellipse
push();
translate(3*960/4.5, 500/2);
rotate(30);
fill(fg_color2);
ellipse(0, 0, 300, 400);
// set fill to match background color
fill(bg_color);
// draw two eyes
ellipse(-50, -80, 50, 50);
ellipse( 50, -80, 50, 50);
// set fill back to foreground for eyeballs
fill(fg_color2);
ellipse(-60, -80, 20, 20);
ellipse( 40, -80, 20, 20);
// mouth-hole with background color
fill(bg_color);
ellipse( 0, 70, 40, 40);
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 = [255, 255, 255]; //these three are backgroudnd colors
var bg_color2 = [255, 255, 255];
var bg_color3 = [255, 255, 255];
var blk= [0,0,0];
var skin = [255, 224, 204];
var fg_color1 = [198, 155, 232]; //fisrst face skin color
var fg_color2 = [56, 91, 0]; //third face skin color
var fg_color3 = [206, 207, 10]; //second face skin color
var stroke_color1 = [95, 52, 8]; //irrelevent
var stroke_color2 = [210, 219, 189];
var stroke_color3 = [50, 50, 50];
var colorHair = [20, 20, 0];
function drawFace1(x, y, w, h, tilt_value, eye_value, mouth_value) {
push();
translate(x, y);
rotate(tilt_value/5);
var extent = 0;
if(h < w) {
extent = h / 2;
}
else {
extent = w / 2;
}
var scale = extent / 220.0;
fill(blk);
//ellipse(0, 0, 300 * scale, 400 * scale);
beginShape(); // hair
vertex(-50, -146); //1
quadraticVertex(10, -172, 90, -115); //2
quadraticVertex(115, -85, 110, 30); //3
// quadraticVertex(120, 110, 90, 140); //4
//quadraticVertex(80, 160, -10, 185); //5
quadraticVertex(-160, -0, -120, -90); //8
//quadraticVertex(-50, -135, -50, -146);
endShape(CLOSE)
noFill();
strokeWeight(0);
fill(skin);
ellipse(0, -15, 300 * scale, 350 * scale);
strokeWeight(2);
ellipse(0, 0, 30 * scale, 30 * scale); //nose
fill(skin);
strokeWeight(0);
rect(-10, -10, 40 * scale, 20 * scale); //nose
fill(blk);
rotate(10*PI);
rect(-80, -120, 240 * scale, 80 * scale); //fringe
rotate(-10*PI);
rotate(10*-PI);
rect(-70, -120, 200 * scale, 80 * scale); //fringe
rotate(10*PI);
fill(skin);
//glasses
strokeWeight(2);
ellipse(-55 * scale, -50 * scale, 95 * scale, 95 * scale); //left
ellipse( 65 * scale, -50 * scale, 95 * scale, 95 * scale); //right
line(-8 * scale, -50 * scale, 15 * scale, -50 * scale); //line
arc(35, -20, 60, 60, 250, 300); //right eyebrow
arc(-20, -30, 60, 40, 210, 270); //left eyebrow
strokeWeight(0);
fill(42, 142, 8); //green outer
ellipse(-50 * scale, -50 * scale, 50 * scale, 50 * scale); //left green eye
ellipse( 60 * scale, -50 * scale, 50 * scale, 50 * scale); //rigth green eye
fill(blk); //pupils
ellipse( 60 * scale, -50 * scale, 35 * scale, 35 * scale); //right eye
ellipse( -50 * scale, -50 * scale, 35 * scale, 35 * scale); //left eye
fill(bg_color1); //eyeglint
ellipse(-45 * scale, -55 * scale, 15 * scale, 15 * scale); //left eyeglint
ellipse( 65 * scale, -55 * scale, 15 * scale, 15 * scale); //right eyeglint
// eyes
if (eye_value === 1) {
//scar
strokeWeight(2);
stroke(247, 194, 180);
line(-8 * scale, -115 * scale, 15 * scale, -115 * scale); //middle
line(-8 * scale, -115 * scale, 15 * scale, -140 * scale); //top
line(-8 * scale, -90 * scale, 15 * scale, -115 * scale); //bottom
}
if (eye_value >= 2) {
//scar
strokeWeight(2);
stroke(255, 154, 127);
line(-8 * scale, -115 * scale, 15 * scale, -115 * scale); //middle
line(-8 * scale, -115 * scale, 15 * scale, -140 * scale); //top
line(-8 * scale, -90 * scale, 15 * scale, -115 * scale); //bottom
}
if (eye_value === 3) {
//scar
strokeWeight(2);
stroke(252, 73, 25);
line(-8 * scale, -115 * scale, 15 * scale, -115 * scale); //middle
line(-8 * scale, -115 * scale, 15 * scale, -140 * scale); //top
line(-8 * scale, -90 * scale, 15 * scale, -115 * scale); //bottom
}
// mouth
fill(blk);
noStroke();
ellipse(0 * scale, 70 * scale, 150 * scale, mouth_value/5 * scale);
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;
strokeWeight(4);
stroke(stroke_color3);
//fill(fg_color3);
// ellipse(0, 0, 300 * scale, 400 * scale);
strokeWeight(0);
fill(79, 37, 11);
beginShape(); // head
vertex(-50, -146); //1
quadraticVertex(10, -172, 90, -115); //2
quadraticVertex(115, -85, 130, 60); //3
quadraticVertex(120, 110, 90, 140); //4
quadraticVertex(80, 160, -10, 185); //5
quadraticVertex(-160, -0, -120, -90); //8
quadraticVertex(-50, -135, -50, -146);
endShape(CLOSE)
fill(skin);
ellipse(0, -15, 300 * scale, 350 * scale); //face
fill(79, 37, 11);
rotate(10*PI);
rect(-15, -90, 260 * scale, 100 * scale); //fringe
rotate(-10*PI);
strokeWeight(1);
noFill();
arc(40, -10, 60, 60, 260, 300); //right eyebrow
arc(37, -7, 60, 60, 260, 300); //right lash
arc(-30, -20, 60, 40, 220, 270); //left eyebrow
arc(-25, -17, 60, 40, 220, 270); //left lash
strokeWeight(2);
arc(35, -25, 60, 60, 250, 300); //right eyebrow
arc(-20, -35, 60, 40, 210, 270); //left eyebrow
ellipse(0, 0, 30 * scale, 30 * scale); //nose
fill(skin);
strokeWeight(0);
rect(-0, -5, 40 * scale, 20 * scale); //nose
strokeWeight(0);
//wand
strokeWeight(5);
stroke(blk);
line(10,120 ,110,20 + blink_value *10);
strokeWeight(0);
fill(153, 68, 45); //brown outer
ellipse(-50 * scale, -50 * scale, 50 * scale, 50 * scale); //left brown eye
ellipse( 60 * scale, -50 * scale, 50 * scale, 50 * scale); //rigth brown eye
//strokeWeight(2);
fill(blk);
ellipse((-50 + eye_value/2) * scale, -50 * scale, 35 * scale, 35 * scale); //left
ellipse(( 60 + eye_value/2) * scale, -50 * scale, 35 * scale, 35 * scale); //right
fill(bg_color1); //eyeglint
ellipse((-45 + eye_value/2) * scale, -55 * scale, 15 * scale, 15 * scale); //left
ellipse(( 65 + eye_value/2) * scale, -55 * scale, 15 * scale, 15 * scale); //right
fill(blk); //mouth
arc(0, 30, 80, 40, 0, 180);
// TODO: paramaterize hair
var follicles = [
[705,250],
[725,300],
[705,200],
[735,150],
[705,100],
[745,50],
[705,0],
[755,-50],
[705,-100],
];
resetMatrix();
fill(255, 226, 114);
var radius = hair_value * scale;
for(var i=0; i<follicles.length; i++) {
ellipse(240+follicles[i][0]/2, 120 + (follicles[i][1]/2), radius/2, radius/2);
}
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;
fill(199,40,040);
beginShape(); // head
vertex(-50, -146); //1
quadraticVertex(10, -172, 90, -115); //2
quadraticVertex(115, -85, 110, 30); //3
quadraticVertex(-160, -0, -120, -90); //8
endShape(CLOSE)
fill(fg_color2);
strokeWeight(0);
fill(skin);
ellipse(0, -15, 300 * scale, 350 * scale);
fill(199,40,040);
rotate(10*PI);
rect(-20, -90, 250 * scale, 100 * scale); //fringe
rotate(-10*PI);
noFill();
strokeWeight(2);
ellipse(0, 0, 30 * scale, 30 * scale); //nose
fill(skin);
strokeWeight(0);
rect(-0, -5, 40 * scale, 20 * scale); //nose
fill(67, 172, 224); //green outer
ellipse(-50 * scale, -50 * scale, 50 * scale, 50 * scale); //left blue eye
ellipse( 60 * scale, -50 * scale, 50 * scale, 50 * scale); //rigth blue eye
fill(blk); //pupils
ellipse( 60 * scale, -50 * scale, 35 * scale, 35 * scale); //right eye
ellipse( -50 * scale, -50 * scale, 35 * scale, 35 * scale); //left eye
fill(bg_color1); //eyeglint
ellipse(-45 * scale, -55 * scale, 15 * scale, 15 * scale); //left eyeglint
ellipse( 65 * scale, -55 * scale, 15 * scale, 15 * scale); //right eyeglint
strokeWeight(2);
noFill();
arc(40, -15-width_value/5, 60, 60, 260, 300); //right eyebrow
arc(-30, -25-width_value/5, 60, 40, 220, 270); //left eyebrow
if (eye_value === 1) {
//scar
noStroke();
fill(204, 238, 255);
ellipse(-35 * scale, -100 * scale, 15 * scale, 15 * scale);
}
if (eye_value >= 2) {
//scar
noStroke();
fill(204, 238, 255);
ellipse(-35 * scale, -100 * scale, 15 * scale, 15 * scale);
ellipse(60 * scale, -150 * scale, 15 * scale, 15 * scale);
}
if (eye_value === 3) {
//scar
noStroke();
fill(204, 238, 255);
ellipse(-35 * scale, -100 * scale, 15 * scale, 15 * scale);
ellipse(60 * scale, -150 * scale, 15 * scale, 15 * scale);
ellipse(-20 * scale, -130 * scale, 15 * scale, 15 * scale);
}
// mouth
fill(blk);
ellipse(0 * scale, 70 * scale, mouth_value * scale/2, mouth_value * scale/2.5);
rectMode(CORNER);
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 = 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);
}
let lastSwapTime = 0;
let millisPerSwap = 4000;
function changeRandomSeed() {
curRandomSeed = curRandomSeed + 1;
lastSwapTime = millis();
}
// global variables for colors
var bg_color1 = [255, 255, 255]; //these three are backgroudnd colors
var bg_color2 = [255, 255, 255];
var bg_color3 = [255, 255, 255];
var blk= [0,0,0];
var skin = [255, 224, 204];
var fg_color1 = [198, 155, 232]; //fisrst face skin color
var fg_color2 = [56, 91, 0]; //third face skin color
var fg_color3 = [206, 207, 10]; //second face skin color
var stroke_color1 = [95, 52, 8]; //irrelevent
var stroke_color2 = [210, 219, 189];
var stroke_color3 = [50, 50, 50];
var colorHair = [20, 20, 0];
function drawCatFace(x, y, w, h, tilt_value, ear_value, mouth_value, direction_value, mouthLineValue) {
push();
translate(x, y);
rotate(tilt_value);
scale(0.5);
// let extent = 0;
// if(h < w) {
// extent = h / 2;
// }
// else {
// extent = w / 2;
// }
// let scale = extent / 220.0;
fill(skin);
var r = random(240);
var g = random(100);
var b = random(100);
fill(r);
var noseCol;
if (r > 150){
noseCol = r - 55; //variation of the nose color, so that the color of the nose will never be the same as the fur
}
if (r<150){
noseCol = r +55;
}
//REPURPOSE FOR EARS
// eyes variable, changes the amount of ear/amount of anything discrete
if (ear_value === 1 ) { //ears with tuffs on the top
ellipse(-62,-12,10,10);
triangle(-62.5,-12,-70,-80,-0,-60); //cat left ear
triangle(62.5,-12,70,-80,0,-60); //cat right ear
fill(255);
strokeJoin(ROUND);
triangle(55,-40,60,-70,30,-60); //cat left inner ear
triangle(-55,-40,-60,-70,-30,-60); //cat inner right ear
fill(blk);
ellipse(70,-83,3,7); //right ear tuft top
ellipse(73,-80,7,3); //right ear tuft bottom
rotate(45);
ellipse(-7,-110,3,7); //right ear tuft middle
rotate(-45);
ellipse(-70,-83,3,7); //left ear tuft top
ellipse(-73,-80,7,3); //left ear tuft bottom
rotate(-45);
ellipse(7,-110,3,7);
rotate(45);
}
if (ear_value === 2 ) { //ears with stripes
triangle(-62.5,-12,-70,-80,-0,-60); //cat left ear
triangle(62.5,-12,70,-80,0,-60); //cat right ear
fill(noseCol);
ellipse(-37,-40,56,56); //inner ear circle
ellipse(37, -40, 56, 56); //right inner ear circle
fill(255);
strokeJoin(ROUND);
triangle(55,-40,60,-70,30,-60); //cat left inner ear
triangle(-55,-40,-60,-70,-30,-60); //cat inner right ear
}
if (ear_value === 3 ) { //ears with spots
ellipse(-62,-12,10,10);
triangle(-62.5,-12,-70,-80,-0,-60); //cat left ear
triangle(62.5,-12,70,-80,0,-60); //cat right ear
fill(255);
strokeJoin(ROUND);
triangle(55,-40,60,-70,30,-60); //cat left inner ear
triangle(-55,-40,-60,-70,-30,-60); //cat inner right ear
}
fill(r);
ellipse(0,0,135,135); //cat base face
if (ear_value === 3 ) { //eye spot
fill(noseCol);
ellipse(-25, -20, 10 +mouth_value,10+mouth_value);
}
fill(255,255,255);
// ellipse(-25,-20,30,30); //cat left whites of eye
ellipse(-25,-20,mouth_value,mouth_value); //new including mouth_value
ellipse(25,-20,35,35); //cat right whites of eye
fill(blk);
ellipse(-25 + (mouseX/100), -15 + (mouseY/100), 10 , 10 ); //cat left eye
ellipse(25 + (mouseX/100), -15 + (mouseY/100), 10, 10 ); //cat right eye
var randomMouth = random(10);
stroke(noseCol); //assigning the nose color to the stroke and fill of the mouse/nose
fill(noseCol);
triangle(-7.5,0,7.5,0,0,7.5); //triangle nose
strokeWeight(2);
line(0,1,0,20); //nose vertical line
line(0,20,5 +randomMouth,25 + randomMouth); //right side of mouth
//line(0,20,-5,25); //left side of mouth
fill(blk);
line(0,20,-5 -randomMouth,25 +randomMouth); //left side of mouth
line(40,15,65+randomMouth,15); //RIGHT WHISKER
line(40,18,65+randomMouth,25); //top
line(40,12,65+randomMouth,05); //bottom
line(-40,15,-65-randomMouth,15);
line(-40,18,-65-randomMouth,25); //top
line(-40,12,-65-randomMouth,05); //bottom
pop();
}
//draws the mouse/face in the middle function
function drawMouse(x, y, w, h, direction_value, ear_value, mouth_value) {
push();
rectMode(CENTER);
translate(x, y);
scale(0.5);
// let extent = 0;
// if(h < w) {
// extent = h / 2;
// }
// else {
// extent = w / 2;
// }
// let scale = extent / 220.0; //controls the scale
let randomDirection = focusedRandom(0.5, 3, 2); //focused random for mouse speed
var angle;
if (direction_value === 1){
rotate(frameCount/randomDirection);
}
else {
rotate(frameCount/randomDirection);
}
//rotate(frameCount/0.5); //rotates the mouse, make this randomly change between speeds for discrete mesurement
var randomColRat = random(200,230)
stroke(blk);
strokeWeight(2);
line(25,40,32+mouth_value,39); //left bottom whisker
line(25,42,32+mouth_value,42); //left top whisker
line(13,40,6-mouth_value,39); //right top whisker
line(13,42,6-mouth_value,42); //right bottom whisker
strokeWeight(0);
fill(randomColRat); //maybe make a variable for color
ellipse(20,20,30,40); //main body
triangle(20,55,10,35,30,35); //nose
stroke(randomColRat);
strokeWeight(2);
line(20,20,20,-20); //tail
noStroke();
fill(221, 164, 213); //pink
ellipse(20,52,5,5); //nose
fill(190);
ellipse(25,30,7+direction_value,7+direction_value); //right ear
ellipse(15,30,7+direction_value,7+direction_value); //left ear
//vary complicated set of if statments which assign something to a discrete variable, did not end up using
noStroke();
var randSize;
if (ear_value == 1){
fill(255,255,000);
randSize = 20;
}
if (ear_value == 2){
fill(255, 206, 91);
randSize = 50;
}
if (ear_value == 3){
fill(255, 219, 91);
randSize = 30;
}
if (ear_value == 4){
fill(255, 235, 91);
randSize = 10;
}
if (ear_value == 5){
fill(244, 203, 68);
randSize = 5;
}
if (ear_value == 6){
fill(252, 206, 55);
randSize = 15;
}
if (ear_value == 7){
fill(239, 192, 38);
randSize = 25;
}
if (ear_value == 8){
fill(255, 200, 20);
randSize = 35;
}
if (ear_value == 9){
fill(255, 229, 0);
randSize = 45;
}
if (ear_value == 10){
fill(255, 236, 76);
randSize = 55;
}
fill(blk);
rectMode(CORNER);
pop();
}
function mouseClicked() {
changeRandomSeed();
}
function draw () {
if(millis() > lastSwapTime + millisPerSwap) {
changeRandomSeed();
}
resetFocusedRandom(curRandomSeed);
// clear screen
background(bg_color1);
noStroke();
// draw a 5x3 grid of circles, with SquareFace in the center
let w = (canvasWidth /10) ;
let h = (canvasHeight /5) +3;
let positionFinal = focusedRandom(0, 30);
for(let i=0; i<13; i++) {
for(let j=0; j<15; j++) {
let y = h/2 + h*i;
let x = w/2 + w*j;
if ((i == 2 && j == 6) ){
let direction_value = focusedRandom(1, 3);
let ear_value = int(focusedRandom(1, 11));
let mouth_value = focusedRandom(0, 10);
//let turn_value = focusedRandom(1, 6);
drawMouse(x, y, w, h, direction_value, ear_value, mouth_value);
fill(255,0,0);
}
else if ((i == 2 && j == 5) ){
let direction_value = focusedRandom(1, 3);
let ear_value = int(focusedRandom(1, 11));
let mouth_value = focusedRandom(0, 10);
//let turn_value = focusedRandom(1, 6);
drawMouse(x, y, w, h, direction_value, ear_value, mouth_value);
fill(255,0,0);
}
else if ((i == 2 && j == 4) ){
let direction_value = focusedRandom(1, 3);
let ear_value = int(focusedRandom(1, 11));
let mouth_value = focusedRandom(0, 10);
//let turn_value = focusedRandom(1, 6);
drawMouse(x, y, w, h, direction_value, ear_value, mouth_value);
fill(255,0,0);
}
else if ((i == 2 && j == 3) ){
let direction_value = focusedRandom(1, 3);
let ear_value = int(focusedRandom(1, 11));
let mouth_value = focusedRandom(0, 10);
//let turn_value = focusedRandom(1, 6);
drawMouse(x, y, w, h, direction_value, ear_value, mouth_value);
fill(255,0,0);
}
else {
let tilt_value = focusedRandom(-15, 45);
let ThereOrNah = int(focusedRandom(1,5));
let positionValueX = focusedRandom(-15, 15);
let positionValueY = focusedRandom(-15, 15);
let ear_value = int(focusedRandom(1, 4));
let mouth_value = focusedRandom(25, 45);
let mouthLineValue = focusedRandom(2, 15);
if (ThereOrNah !=4){
drawCatFace(x +positionValueX, y -positionValueY, w, h, tilt_value, ear_value, mouth_value, mouthLineValue);
}}
}
}
fill(255,0,0); //color red for the lazer
ellipse(mouseX, mouseY, 10,10); //lazerlight
noCursor(); //turns the cursor off
}
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