Skip to content

Instantly share code, notes, and snippets.

@christinapetris

christinapetris/.block

Forked from dribnet/.block
Last active April 11, 2017 09:13
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/ea72cde074b1b51949823e3e9b79327b to your computer and use it in GitHub Desktop.
Save christinapetris/ea72cde074b1b51949823e3e9b79327b to your computer and use it in GitHub Desktop.
Download ZIP
17.1.MDDN242 PS2
Raw
.block
license: mit
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

PS2 MDDN 242 2017

Final

In the beginning, I chose pink to represent with a black and white glyph as well as the given red, yellow and blue. I thought about what the colours symbolised such as red meaning fire and blue meaning water. Furthermore, red seemed sharper and dangerous compared to colours such as blue which are calmer and should be shown with more curves.

The interpolation stage continues with a peachy colour with a hue changing from purple to orange. I thought purple was more sophisticated, darker and softer so I made the glyph’s fill darker and opacity lower.

Throughout the project for the saturation change, I wanted to convey the colour was the same so I kept the shape the same. Low saturation seems more ‘flat’ so the shape becomes less detailed with less saturation. To show the colour getting darker I made the fill and stroke darker and stroke heavier.

The glyph system now makes the corresponding shape for each hue more accurate as it takes into account that hue is rounded where 360 degrees is the same as 0 degrees. The hue change is all driven by rectangles which vary in roundness to appear to toggle between squares and circles.

For the glyph object stage I carried over my previous glyphs and focused on making it easier to see the emojis. This involved darkening the background colour to add more contrast, as well as levelling out the glyphs so that they were relatively the same size.

Lastly, for the spot glyph stage I chose an orange over the peachy colour or the experimented yellow colour. This is because I wanted a colour which related to the star like glyphs created and a colour closer to pink to relate to the flower like glyphs also present.

Raw
glyph.js
/*
* val4 is an array of 3 numbers that range from [0,1000]
* size is the number of pixels for width and height
* use p5.js to draw a round grawscale glpyh within the bounding box
*/
function gray_glyph(values, size) {
var s2 = size/2;
var hue = values[0];
var sWeight = 1;
strokeWeight(sWeight);
var closeness =0;
strokeWeight(1);
rectMode(CENTER);
//////lower saturation=lower amount of circes/squares
var saturation = values[1];
var numOfSquares = map(saturation, 0, 100, 4, 11);
strokeColor = map(saturation, 0, 100, 50, 255);
stroke(strokeColor);
var brightness = values[2];
var fillColor = map(brightness, 0, 100, 50, 200);
if(hue<=90){
var rectHeight = map(hue, 0, 90, 0,20);
var rectWidth = map(hue, 0, 90,0,20);
var sWeight = map(hue, 0,90, 0, 1);
var roundness = map(hue, 0,90, 0, 3);
//for middle square
var rectHeightM = map(hue, 0, 90, 40,10);
var rectWidthM = map(hue, 0, 90,40,10);
var roundnessM = map(hue, 0,90, 0, 10);
}
else if(hue>90 && hue<=180){
var rectHeight = map(hue, 90, 180, 20,5);
var rectWidth = map(hue, 90, 180, 20,5);
var closeness = map(hue, 90, 180,0,-7.5);
var roundness = map(hue, 90, 180, 3, 10);
var rectHeightM = map(hue, 90, 180, 10, 40);
var rectWidthM = map(hue, 90, 180, 10, 40);
var roundnessM = map(hue, 90, 180, 10, 20);
}
if(hue>180 && hue<270){
var rectHeight = map(hue, 180, 270, 5,30);
var rectWidth = map(hue, 180, 270, 5,30);
var closeness = map(hue, 180, 270, -7.5,-15);
var roundness = map(hue, 180, 270, 10,15);
var rectHeightM = map(hue, 180, 270, 40,10);
var rectWidthM = map(hue, 180, 270, 40,10);
var roundnessM = map(hue, 180, 270, 20,10);
}
if(hue>=270){
var rectHeight = map(hue, 270, 360, 30,0);
var rectWidth = map(hue, 270, 360,30,0);
var closeness = -15;
var sWeight = map(hue, 288,360, 1, 0);
var roundness = map(hue, 288,360, 15, 20);
var rectHeightM = map(hue, 270, 360, 10, 40);
var rectWidthM = map(hue, 270, 360, 10, 40);
var roundnessM = map(hue, 288,360, 10, 0);
}
//////square into circle into square again in the middle
//M=middle
//rect(s2, s2, rectWidthM,rectHeightM, roundnessM, roundnessM);
var numOfMSquares = map(saturation, 0, 100, 1, 5);
//for (var n = 0; n < 1; n=n++) {
// push();
// scale(i* numOfSquares/(numOfSquares*2));
//rect(closeness, 0, rectWidth, rectHeight, roundness, roundness);
rect(s2, s2, rectWidthM,rectHeightM, roundnessM, roundnessM);
// pop();
// }
// pop();
strokeWeight(sWeight);
//console.log(closeness);
// var fillColor = map(hue, 0,360, 80, 50);
//var strokeColor = map(hue, 0,360,200, 80);
// var sWeight = map(hue, 0,360, 1, 3);
var sOpacity = map(hue, 0,360, 100, 50);
fill(fillColor,10);
//stroke(strokeColor,sOpacity);
rectMode(CORNER);
fill(fillColor,50);
push();
translate(s2,s2);
// var fillColor = map(saturation, 0, 100, 50, 67);
// var strokeColor = map(saturation, 0, 100, 40, 85);
// var sWeight = map(saturation, 0, 100, 0, 1.5);
// var sOpacity = map(saturation, 0, 100, 50, 100);
////////lightness
// var brightness=values[2];
// var fillColor = map(brightness, 0, 100, 20, 80);
// var strokeColor = map(brightness, 0, 100, 0, 96);
// var sWeight = map(brightness, 0, 100, 5, 1);
// var sOpacity = map(brightness, 0, 100, 50, 100);
//
// fill(fillColor,50);
// stroke(strokeColor,sOpacity);
// strokeWeight(sWeight);
for (var i = 0; i < numOfSquares; i++) {
push();
rotate(TWO_PI * i / numOfSquares);
rect(closeness, 0, rectWidth, rectHeight, roundness, roundness);
pop();
}
pop();
// console.log('roundness ' + roundness);
// console.log('hue ' + hue);
}
Raw
grayglyph.js
function GrayGlyph() {
this.draw = function(values, size) {
var s2 = size/2;
var s3 = size/3;
var s4 = size/4;
var s5 = size/5;
var closeness =0;
rectMode(CENTER);
//////lower saturation=change stroke weight
var saturation = values[1];
var sWeight = map(saturation, 0, 100, 0, (100/255)*size/60);
strokeWeight(sWeight*4);
//////brightness = chnage lightness of stroke and fill accordingly
var brightness = values[2];
var fillColor = map(brightness, 0, 100, 0, 80);
var strokeColor = map(brightness, 0, 100, 0, 100);
fill(fillColor, 100/255);
stroke( strokeColor,1);
var hue = values[0];
squareToggleCircle(hue, size, s2, s3, saturation);
}
//////Hue has a different shape. Suare, to circle to square
function squareToggleCircle(hue, size, s2, s3, saturation ){
//for outside circles:
var outerS = [s3,size/3,s2];
var outerR = [size/21, size/6, size/4, s3];
var outerC = [size/-8.5, size/-4];
//middle square/circle:
var midS = [size/1.5,size/6, size];
var midR = [size/6, s3, s2];
if(hue<=90){
//for outer squares/circles
var rectHeight = map(hue, 0, 90, 0,outerS[0]);
var rectWidth = map(hue, 0, 90,0,outerS[0]);
var roundness = map(hue, 0,90, 0, outerR[0]);
var closeness = 0;
//for middle square
var rectHeightM = map(hue, 0, 90, midS[0],midS[0]);
var rectWidthM = map(hue, 0, 90,midS[0],midS[0]);
var roundnessM = map(hue, 0,90, 0, midR[0]);
}
else if(hue>90 && hue<=180){
var rectHeight = map(hue, 90, 180, outerS[0],outerS[1]);
var rectWidth = map(hue, 90, 180, outerS[0],outerS[1]);
var closeness = map(hue, 90, 180,0,outerC[0]);
var roundness = map(hue, 90, 180, outerR[0], outerR[1]);
var rectHeightM = map(hue, 90, 180, midS[0], midS[2]);
var rectWidthM = map(hue, 90, 180, midS[0], midS[2]);
var roundnessM = map(hue, 90, 180, midR[0], midR[2]);
}
if(hue>180 && hue<270){
var rectHeight = map(hue, 180, 270, outerS[1],outerS[2]);
var rectWidth = map(hue, 180, 270, outerS[1],outerS[2]);
var closeness = map(hue, 180, 270, outerC[0],outerC[1]);
var roundness = map(hue, 180, 270, outerR[1],outerR[2]);
var rectHeightM = map(hue, 180, 270, midS[2],midS[0]);
var rectWidthM = map(hue, 180, 270, midS[2],midS[0]);
var roundnessM = map(hue, 180, 270, midR[2],midR[0]);
}
if(hue>=270){
var rectHeight = map(hue, 270, 360, outerS[2],0);
var rectWidth = map(hue, 270, 360,outerS[2],0);
var closeness =outerC[1];
var roundness = map(hue, 288,360, outerR[2], outerR[3]);
var rectHeightM = map(hue, 270, 360, midS[0], midS[0]);
var rectWidthM = map(hue, 270, 360, midS[0], midS[0]);
var roundnessM = map(hue, 288,360, midR[0], 0);
}
middleRect(hue, s2,rectWidthM,rectHeightM,roundnessM);
outsideRect(hue, s2, saturation, closeness, rectWidth, rectHeight, roundness);
}
function middleRect(hue, s2,rectWidthM,rectHeightM,roundnessM){
rect(s2, s2, rectWidthM,rectHeightM, roundnessM, roundnessM);
push();
translate(s2, s2);
rotate(HALF_PI/2);
translate(-s2, -s2);
rect(s2, s2, rectWidthM,rectHeightM, roundnessM, roundnessM);
pop();
rectMode(CORNER);
}
function outsideRect(hue, s2, saturation, closeness, rectWidth, rectHeight, roundness){
//lower saturation=lower amount of circes/squares
var numOfSquares = map(saturation, 0, 100, 4, 10);
//to make sure both ends 0 and 360 hue look the same: (stroke of outside circles go away)
if (hue==0 || hue==360){
strokeWeight(0);
}
for (var i = 0; i < numOfSquares; i++) {
push();
translate(s2,s2);
rotate(TWO_PI * i / numOfSquares);
rect(closeness, 0, rectWidth, rectHeight, roundness, roundness);
pop();
}
}
}
Raw
index.html
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
<script language="javascript" type="text/javascript" src="grayglyph.js"></script>
<script language="javascript" type="text/javascript" src="spotglyph.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>hue</td>
<td id="slider1Container"></td>
</tr>
<tr>
<td>saturation</td>
<td id="slider2Container"></td>
</tr>
<tr>
<td>brightness</td>
<td id="slider3Container"></td>
</tr>
<tr>
<td>
<hr>
</td>
</tr>
<tr>
<td>Mode</td>
<td id="selector1Container"></td>
</tr>
<tr>
<td>Glyph</td>
<td id="selector2Container"></td>
</tr>
<tr>
<td>Size</td>
<td id="selector3Container"></td>
</tr>
<tr>
<td>Show Guide</td>
<td id="checkContainer"></td>
</tr>
<tr>
<td></td>
<td id="buttonContainer"></td>
</tr>
</div>
</div>
<br>
</table>
</body>
Raw
purview.json
{
"commits": [
{
"sha": "cb29c0843df9487619f2484c776511687264b83e",
"name": "final"
},
{
"sha": "e09b01b126c4195c245afa320e09eee1230eeeda",
"name": "spot_color"
},
{
"sha": "51c963ce68279b7b2f19e6b047ccc9c956030580",
"name": "spot_color experiment"
},
{
"sha": "01f3e308e5bdef530a3397686d4ebba9dcfb851e",
"name": "glyph_object"
},
{
"sha": "3f0a22197982006008125e87a199a54c4925a629",
"name": "glyph_system"
},
{
"sha": "38a4a9f752a3745402efd8cf4f7759339006dd79",
"name": "interpolate"
},
{
"sha": "95695e73914f35241e803b132f3dfafe839f2b20",
"name": "sketch"
}
]
}
Raw
sketch.html
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
<script language="javascript" type="text/javascript" src="sketch2.js"></script>
</head>
<body style="background-color:white">
<div class="outer">
<div class="inner">
<div id="canvasContainer"></div>
</div>
</div>
</table>
</body>
Raw
sketch.js
var canvasWidth = 960;
var canvasHeight = 500;
var glyphSelector;
var modeSelector;
var sizeSelector;
var show_oddball = false;
var oddball_row = 0;
var oddball_col = 0;
var val_sliders = [];
var max_vals = [360, 100, 100];
var curEmoji = 78;
var NUM_EMOJI = 872;
var EMOJI_WIDTH = 38;
var lastKeyPressedTime;
var secondsUntilSwapMode = 10;
var secondsPerEmoji = 5;
var isSwappingEmoji = false;
var emojiSwapLerp = 0;
var prevEmoji = 0;
var lastEmojiSwappedTime;
var emojiImg;
var curEmojiImg;
var curEmojiPixels;
var curEmojiColors, nextEmojiColors, prevEmojiColors;
function preload() {
emojiImg = loadImage("twemoji36b_montage.png");
}
function setup() {
// create the drawing canvas, save the canvas element
var main_canvas = createCanvas(canvasWidth, canvasHeight);
main_canvas.parent('canvasContainer');
var now = millis();
lastKeyPressedTime = now;
lastEmojiSwappedTime = now;
// create two sliders
for (i=0; i<3; i++) {
var slider = createSlider(0, 10*max_vals[i], 10*max_vals[i]/2);
slider.parent("slider" + (i+1) + "Container")
slider.changed(sliderUpdated);
slider.mouseMoved(sliderUpdated);
slider.touchMoved(sliderUpdated);
val_sliders.push(slider);
}
modeSelector = createSelect();
modeSelector.option('drive');
modeSelector.option('gradient');
modeSelector.option('random_grid');
modeSelector.option('oddball');
modeSelector.option('image');
modeSelector.changed(modeChangedEvent);
modeSelector.value('image');
modeSelector.parent('selector1Container');
glyphSelector = createSelect();
glyphSelector.option('show_color');
glyphSelector.option('gray');
glyphSelector.option('spot');
glyphSelector.changed(modeChangedEvent);
glyphSelector.value('spot');
glyphSelector.parent('selector2Container');
sizeSelector = createSelect();
sizeSelector.option('32');
sizeSelector.option('64');
sizeSelector.option('128');
sizeSelector.option('256');
sizeSelector.parent('selector3Container');
sizeSelector.value('32');
sizeSelector.changed(sizeChangedEvent);
guideCheckbox = createCheckbox('', false);
guideCheckbox.parent('checkContainer');
guideCheckbox.changed(guideChangedEvent);
button = createButton('redo');
button.mousePressed(buttonPressedEvent);
button.parent('buttonContainer');
curEmojiImg = createImage(36, 36);
// create an array for HSB values: [18][18][3]
curEmojiPixels = Array(18);
curEmojiColors = Array(18);
for(var i=0; i<18; i++) {
curEmojiPixels[i] = Array(18);
curEmojiColors[i] = Array(18);
for(var j=0; j<18; j++) {
curEmojiPixels[i][j] = Array(3);
}
}
gray_glyph = new GrayGlyph();
spot_glyph = new SpotGlyph();
colorMode(HSB);
refreshGridData();
modeChangedEvent();
}
function sliderUpdated() {
redraw();
}
function mouseClicked() {
if (mouseX > width/4) {
refreshGridData();
}
redraw();
}
function dataInterpolate(data1, data2, val) {
var d = new Array(8);
for(var i=0; i<8; i++) {
d[i] = lerp(data1[i], data2[i], val);
}
return d;
}
var numGridRows;
var numGridCols;
var gridValues; // row, col order
var gridOffsetX, gridOffsetY;
var gridSpacingX, gridSpacingY;
// Generate data for putting glyphs in a grid
function clamp(num, min, max) {
return Math.min(Math.max(num, min), max);
}
function refreshGridData() {
var mode = modeSelector.value();
var glyphSize = parseInt(sizeSelector.value(), 10);
if (mode == "image") {
if(glyphSize == 32) {
numGridCols = 18;
numGridRows = 17;
gridOffsetX = 320;
gridSpacingX = 31;
gridOffsetY = 2;
gridSpacingY = 29;
}
else if(glyphSize == 64) {
numGridCols = 10;
numGridRows = 9;
gridOffsetX = 280;
gridSpacingX = 66;
gridOffsetY = -18;
gridSpacingY = 59;
}
else if(glyphSize == 128) {
numGridCols = 6;
numGridRows = 5;
gridOffsetX = 164;
gridSpacingX = 132;
gridOffsetY = -50;
gridSpacingY = 118;
}
else if(glyphSize == 256) {
numGridCols = 3;
numGridRows = 3;
gridOffsetX = 172;
gridSpacingX = 262;
gridOffsetY = -100;
gridSpacingY = 234;
}
}
else if(glyphSize == 128) {
numGridCols = 7;
numGridRows = 3;
gridOffsetX = 10;
gridSpacingX = 136;
gridOffsetY = 20;
gridSpacingY = 166;
}
else if(glyphSize == 256) {
numGridCols = 3;
numGridRows = 1;
gridOffsetX = 20;
gridSpacingX = 320;
gridOffsetY = 100;
gridSpacingY = 500;
}
else if(glyphSize == 64) {
numGridCols = 14;
numGridRows = 7;
gridOffsetX = 3;
gridSpacingX = 68;
gridOffsetY = 6;
gridSpacingY = 71;
}
else if(glyphSize == 32) {
numGridCols = 24;
numGridRows = 13;
gridOffsetX = 4;
gridSpacingX = 40;
gridOffsetY = 4;
gridSpacingY = 38;
}
gridValues = new Array(numGridRows);
for (var i=0; i<numGridRows; i++) {
gridValues[i] = new Array(numGridCols);
for (var j=0; j<numGridCols; j++) {
gridValues[i][j] = new Array(8);
}
}
if (mode == "gradient" || mode == 'oddball') {
var top_left = Array(3);
var top_right = Array(3);
var bottom_left = Array(3);
var bottom_right = Array(3);
for (var k=0; k<3; k++) {
top_left[k] = random(max_vals[k]);
top_right[k] = random(max_vals[k]);
bottom_left[k] = random(max_vals[k]);
bottom_right[k] = random(max_vals[k]);
}
for (var i=0; i<numGridRows; i++) {
if(numGridRows == 1) {
var frac_down = 0;
}
else {
var frac_down = i / (numGridRows - 1.0);
}
d_left = dataInterpolate(top_left, bottom_left, frac_down);
d_right = dataInterpolate(top_right, bottom_right, frac_down);
for (var j=0; j<numGridCols; j++) {
if(numGridCols == 0) {
var frac_over = 0;
}
else {
var frac_over = j / (numGridCols - 1.0);
}
gridValues[i][j] = dataInterpolate(d_left, d_right, frac_over);
}
}
if (mode == 'oddball') {
// replace an entry at random
oddball_row = Math.floor(random(numGridRows))
oddball_col = Math.floor(random(numGridCols))
for (var k=0; k<3; k++) {
gridValues[oddball_row][oddball_col][k] = random(max_vals[k]);
}
}
}
else if(mode == "image") {
for (var i=0; i<numGridRows; i++) {
for (var j=0; j<numGridCols; j++) {
for (var k=0; k<3; k++) {
gridValues[i][j][k] = curEmojiPixels[i][j][k];
}
}
}
}
else {
for (var i=0; i<numGridRows; i++) {
for (var j=0; j<numGridCols; j++) {
for (var k=0; k<3; k++) {
gridValues[i][j][k] = random(max_vals[k]);
}
}
}
}
}
function sizeChangedEvent() {
var mode = modeSelector.value();
if (mode != "drive") {
refreshGridData();
}
redraw();
}
function guideChangedEvent() {
show_oddball = guideCheckbox.checked();
redraw();
}
function modeChangedEvent() {
var mode = modeSelector.value();
// enable/disable sliders
if (mode === "drive") {
// disable the button
// button.attribute('disabled','');
// enable the size selector
sizeSelector.removeAttribute('disabled');
// enable the first four sliders
for(var i=0; i<3; i++) {
val_sliders[i].removeAttribute('disabled');
}
}
else {
// enable the button
// button.removeAttribute('disabled');
// disable the sliders
for(var i=0; i<3; i++) {
val_sliders[i].attribute('disabled','');
}
// enable the size selector
// sizeSelector.removeAttribute('disabled');
// refresh data
refreshGridData();
}
if (mode === "image") {
// get current emoji image
var offsetX = 36 * (curEmoji % 38);
var offsetY = 36 * Math.floor(curEmoji / 38);
var squareOffsets = [ [0,0], [0,1], [1,1], [1, 0] ];
curEmojiImg.copy(emojiImg, offsetX, offsetY, 36, 36, 0, 0, 36, 36);
curEmojiImg.loadPixels();
colorMode(RGB);
for(var i=0; i<17; i++) {
// i is y
var maxX = 18;
var offsetX = 0;
if (i%2 == 1) {
maxX = 17;
offsetX = 1;
}
for(var j=0; j<maxX; j++) {
// j is x
var sumColor = [0, 0, 0];
for(var k=0; k<4; k++) {
// k is summing over 4 adacent pixels
var curColor = curEmojiImg.get(j*2 + squareOffsets[k][0] + offsetX, 1 + i*2 + squareOffsets[k][1]);
for(var l=0; l<3; l++) {
sumColor[l] += curColor[l] / 4.0;
}
}
var curColor = color(sumColor);
curEmojiColors[i][j] = curColor;
curEmojiPixels[i][j][0] = curColor._getHue();
curEmojiPixels[i][j][1] = curColor._getSaturation();
curEmojiPixels[i][j][2] = curColor._getBrightness();
}
}
colorMode(HSB);
// refresh data
refreshGridData();
}
redraw();
}
function buttonPressedEvent() {
refreshGridData();
redraw();
}
var colorBack = "rgb(80, 80, 80)"
var colorFront = "rgb(192, 192, 255)"
function ColorGlyph() {
this.draw = function(values, size) {
fill(values[0], values[1], values[2]);
stroke(0);
var s2 = size/2;
ellipse(s2, s2, size);
}
}
var color_glyph = new ColorGlyph();
function highlightGlyph(glyphSize) {
halfSize = glyphSize / 2.0;
stroke(0, 0, 255, 128);
noFill();
strokeWeight(4);
ellipse(halfSize, halfSize, glyphSize+4);
fill(0);
strokeWeight(1);
}
function getGyphObject() {
var glyphMode = glyphSelector.value();
var glyph_obj = color_glyph;
if(glyphMode == "gray")
glyph_obj = gray_glyph;
else if(glyphMode == "spot")
glyph_obj = spot_glyph;
return(glyph_obj);
}
function drawDriveMode() {
var glyph_obj = getGyphObject();
var glyphSize = parseInt(sizeSelector.value(), 10);
var halfSize = glyphSize / 2;
background(colorBack);
var halfSize = glyphSize / 2;
var middle_x = canvasWidth / 2;
var middle_y = canvasHeight / 2;
var val = [0,0,0];
for(i=0; i<3; i++) {
val[i] = val_sliders[i].value() / 10.0;
}
resetMatrix();
translate(middle_x - halfSize, middle_y - halfSize);
glyph_obj.draw(val, glyphSize);
if (show_oddball) {
resetMatrix();
translate(middle_x - halfSize, middle_y - halfSize);
highlightGlyph(glyphSize)
}
resetMatrix();
translate(middle_x + halfSize + 32, middle_y - halfSize);
color_glyph.draw(val, glyphSize);
}
function drawGridMode() {
var mode = modeSelector.value();
var glyph_obj = getGyphObject();
var glyphSize = parseInt(sizeSelector.value(), 10);
background(colorBack);
if (show_oddball && mode == 'oddball') {
resetMatrix();
translate(gridOffsetX + oddball_col * gridSpacingX, gridOffsetY + oddball_row * gridSpacingY);
highlightGlyph(glyphSize)
}
var hexOffset = (mode == "image");
for (var i=0; i<numGridRows; i++) {
var tweakedNumGridCols = numGridCols;
var offsetX = 0;
if (hexOffset && i%2 == 1) {
offsetX = gridSpacingX / 2;
tweakedNumGridCols = numGridCols - 1;
}
for (var j=0; j<tweakedNumGridCols; j++) {
resetMatrix();
translate(gridOffsetX + j * gridSpacingX + offsetX, gridOffsetY + i * gridSpacingY);
glyph_obj.draw(gridValues[i][j], glyphSize);
resetMatrix();
}
}
}
function colorCopyArray(c) {
d = Array(18);
for(var i=0; i<18; i++) {
d[i] = Array(18);
for(var j=0; j<18; j++) {
d[i][j] = c[i][j];
}
}
return d;
}
function checkImageUpdate() {
var mode = modeSelector.value();
isSwappingEmoji = false;
if (mode == "image") {
now = millis();
if(lastKeyPressedTime + 1000 * secondsUntilSwapMode < now) {
// key not pressed recently
if(lastEmojiSwappedTime + 1000 * secondsPerEmoji < now) {
prevEmoji = curEmoji;
prevEmojiColors = colorCopyArray(curEmojiColors);
// no swaps recently
updateEmoji(1);
nextEmojiColors = colorCopyArray(curEmojiColors);
lastEmojiSwappedTime = now;
}
colorMode(RGB);
if(now - lastEmojiSwappedTime < 1000) {
isSwappingEmoji = true;
emojiSwapLerp = (now - lastEmojiSwappedTime) / 1000.0;
// print("LERP: " + emojiSwapLerp);
for (var i=0; i<numGridRows; i++) {
for (var j=0; j<numGridCols; j++) {
// var curColor = lerpColor(prevEmojiColors[i][j], nextEmojiColors[i][j], emojiSwapLerp);
var curColor = prevEmojiColors[i][j];
if (curColor) {
curColor = lerpColor(prevEmojiColors[i][j], nextEmojiColors[i][j], emojiSwapLerp);
curEmojiPixels[i][j][0] = curColor._getHue();
curEmojiPixels[i][j][1] = curColor._getSaturation();
curEmojiPixels[i][j][2] = curColor._getBrightness();
}
}
}
refreshGridData();
}
else {
for (var i=0; i<numGridRows; i++) {
for (var j=0; j<numGridCols; j++) {
var curColor = nextEmojiColors[i][j];
if (curColor) {
curEmojiPixels[i][j][0] = curColor._getHue();
curEmojiPixels[i][j][1] = curColor._getSaturation();
curEmojiPixels[i][j][2] = curColor._getBrightness();
}
}
}
refreshGridData();
}
colorMode(HSB);
}
}
}
var is_drawing = false;
function draw () {
if (is_drawing) {
return;
}
is_drawing = true;
colorMode(HSB);
var mode = modeSelector.value();
checkImageUpdate();
if (mode == "drive") {
drawDriveMode();
}
else {
drawGridMode();
}
resetMatrix();
if (mode == "image") {
image(curEmojiImg, 32, height-32-36);
}
is_drawing = false;
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
else if (key == ' ') {
refreshGridData();
redraw();
}
else if (key == 'f') {
var curGlyph = glyphSelector.value()
if(curGlyph == "show_color") {
glyphSelector.value('gray');
}
else if(curGlyph == "gray") {
glyphSelector.value('spot');
}
else if(curGlyph == "spot") {
glyphSelector.value('show_color');
}
redraw();
}
else if (key == 's') {
var old_value = guideCheckbox.checked();
guideCheckbox.checked(!old_value);
guideChangedEvent();
}
else if (key == '1') {
sizeSelector.value('32');
sizeChangedEvent()
}
else if (key == '2') {
sizeSelector.value('64');
sizeChangedEvent()
}
else if (key == '3') {
sizeSelector.value('128');
sizeChangedEvent()
}
else if (key == '4') {
sizeSelector.value('256');
sizeChangedEvent()
}
else if (key == 'd') {
modeSelector.value('drive');
modeChangedEvent()
}
else if (key == 'g') {
modeSelector.value('gradient');
modeChangedEvent()
}
else if (key == 'r') {
modeSelector.value('random');
modeChangedEvent()
}
else if (key == 'o') {
modeSelector.value('oddball');
modeChangedEvent()
}
else if (key == 'i') {
modeSelector.value('image');
modeChangedEvent()
}
}
function updateEmoji(offset) {
curEmoji = (curEmoji + NUM_EMOJI + offset) % NUM_EMOJI;
modeChangedEvent()
}
function keyPressed() {
lastKeyPressedTime = millis();
if (keyCode == LEFT_ARROW) {
updateEmoji(-1);
}
else if (keyCode == RIGHT_ARROW) {
updateEmoji(1);
}
else if (keyCode == UP_ARROW) {
updateEmoji(-38);
}
else if (keyCode == DOWN_ARROW) {
updateEmoji(38);
}
}
function mouseMoved() {
lastKeyPressedTime = millis();
}
function mouseDragged() {
lastKeyPressedTime = millis();
}
Raw
sketch2.js
var canvasWidth = 960;
var canvasHeight = 500;
function setup () {
// create the drawing canvas, save the canvas element
var main_canvas = createCanvas(canvasWidth, canvasHeight);
main_canvas.parent('canvasContainer');
colorMode(HSL, 100); // Use HSB with scale of 0-100
// this means draw will only be called once
noLoop();
}
function draw_shape(column, row, size, cur_color) {
// replace this with your own logic
var half_size = size/2;
// defaults
if (row === 0) {
//hue
//transparent->more opaque stroke
//colour gets lighter
//curves turn into edges
//shape gets smaller
var fillColor = map(column, 0, 4, 50, 80);
var strokeColor = map(column, 0, 4, 80, 100);
var sWeight = map(column, 0, 4, 3, 1);
var sOpacity = map(column, 0, 4, 50, 100);
fill(fillColor,50);
stroke(strokeColor,sOpacity);
strokeWeight(sWeight);
for (var i = 0; i < 11; i++) {
var roundness = map(column, 0, 4, 18, 0);
var ellipseHeight = map(column, 0,4, 45,25);
var ellipseWidth = map(column, 0,4, 45,25);
var closeness = map(column,0,4, -17, 0);
push();
translate(half_size,half_size);
rotate(360 * i / 10);
rect(closeness, 0, ellipseWidth,ellipseHeight, roundness, roundness);
pop();
}
}
else if (row === 1) {
// saturation
//becomes more circles/squares
//stroke and fill become more different in colour
//shape stays the same
var fillColor = map(column, 0, 4, 50, 67);
var strokeColor = map(column, 0, 4, 40, 85);
var sWeight = map(column, 0, 4, 0, 1.5);
var sOpacity = map(column, 0, 4, 50, 100);
fill(fillColor,50);
stroke(strokeColor,sOpacity);
strokeWeight(sWeight);
var numOfSquares = map(column, 0, 4, 4, 11);
for (var i = 0; i < numOfSquares; i++) {
var roundness = 6;
var ellipseHeight = 38.3;
var ellipseWidth = 38.3
var closeness = -5.7;
push();
translate(half_size,half_size);
rotate(360 * i / 10);
rect(closeness, 0, ellipseWidth,ellipseHeight, roundness, roundness);
pop();
}
}
else {
// lightness
var fillColor = map(column, 0, 4, 20, 80);
var strokeColor = map(column, 0, 4, 0, 96);
var sWeight = map(column, 0, 4, 5, 1);
var sOpacity = map(column, 0, 4, 50, 100);
fill(fillColor,50);
stroke(strokeColor,sOpacity);
strokeWeight(sWeight);
var numOfSquares = map(column, 0, 4, 50, 11);
for (var i = 0; i < numOfSquares; i++) {
var roundness = 6;
var ellipseHeight = 38.3;
var ellipseWidth = 38.3
var closeness = -5.7;
push();
translate(half_size,half_size);
rotate(360 * i / 10);
rect(closeness, 0, ellipseWidth,ellipseHeight, roundness, roundness);
pop();
}
}
}
// some examples of how to specify a base color
// var my_color = "#d24632"
// var my_color = "rgb(245, 225, 50)"
// var my_color = "rgb(20%, 47%, 67%)"
//var my_color = "rgb(255, 116, 121)";
var my_color = "rgb(255, 147, 188)";
//var my_color = "rgb(89, 37, 44)";
//var my_color = "rgb(255, 185, 225)";
//var my_color = "rgb(191, 7, 2)";
var shapes_should_draw = true;
// draw five colors and then five glyphs
function draw () {
var size=120;
var xsteps = 5;
var xdiff = (width - xsteps * size) / xsteps;
var xstep = size + xdiff;
var ysteps = 3;
var ydiff = (height - ysteps * size) / ysteps;
var ystep = size + ydiff;
var bg_color = color("#ffffdc");
var base_color = color(my_color);
var base_hue = hue(base_color);
var base_sat = saturation(base_color);
var base_lgt = lightness(base_color);
background(bg_color);
noStroke();
for (var x=0; x<xsteps; x++) {
for (var y=0; y<ysteps; y++) {
var cur_color = base_color;
if (y == 0) {
// hue
var cur_hue = (85 + base_hue + 100 * 0.3 * x / xsteps) % 100;
cur_color = color(cur_hue, base_sat, base_lgt);
}
else if (y == 1) {
// saturation
var cur_sat = (5 + 90 * x / xsteps);
cur_color = color(base_hue, cur_sat, base_lgt);
}
else if (y == 2) {
// lightness
var cur_lgt = (5 + 90 * x / xsteps);
cur_color = color(base_hue, base_sat, cur_lgt);
}
fill(cur_color);
noStroke();
rect(xdiff/2 + xstep * x - 10, ydiff/2 + ystep * y - 10, size, size);
strokeWeight(2);
stroke(0);
fill(bg_color);
var curx = xdiff/2 + xstep * x + 10;
var cury = ydiff/2 + ystep * y + 10;
rect(curx, cury, size, size);
if (shapes_should_draw) {
push();
translate(curx, cury);
draw_shape(x, y, size, cur_color);
pop();
}
}
}
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
}
Raw
spotglyph.js
function SpotGlyph() {
this.spot_hue = 38;
this.draw = function(values, size) {
var s2 = size/2;
var s3 = size/3;
var s4 = size/4;
var s5 = size/5;
var closeness =0;
rectMode(CENTER);
//////lower saturation=change stroke weight
var saturation = values[1];
var sWeight = map(saturation, 0, 100, 0, (100/255)*size/60);
strokeWeight(sWeight*4);
//////brightness = chnage lightness of stroke and fill accordingly
var brightness = values[2];
var fillColor = map(brightness, 0, 100, 0, 80);
var strokeColor = map(brightness, 0, 100, 0, 100);
fill(this.spot_hue, fillColor/2, fillColor, 100/255);
stroke(this.spot_hue, strokeColor/2, strokeColor,1);
var hue = values[0];
squareToggleCircle(hue, size, s2, s3, saturation);
}
//////Hue has a different shape. Suare, to circle to square
function squareToggleCircle(hue, size, s2, s3, saturation ){
//for outside circles:
var outerS = [s3,size/3,s2];
var outerR = [size/21, size/6, size/4, s3];
var outerC = [size/-8.5, size/-4];
//middle square/circle:
var midS = [size/1.5,size/6, size];
var midR = [size/6, s3, s2];
if(hue<=90){
//for outer squares/circles
var rectHeight = map(hue, 0, 90, 0,outerS[0]);
var rectWidth = map(hue, 0, 90,0,outerS[0]);
var roundness = map(hue, 0,90, 0, outerR[0]);
var closeness = 0;
//for middle square
var rectHeightM = map(hue, 0, 90, midS[0],midS[0]);
var rectWidthM = map(hue, 0, 90,midS[0],midS[0]);
var roundnessM = map(hue, 0,90, 0, midR[0]);
}
else if(hue>90 && hue<=180){
var rectHeight = map(hue, 90, 180, outerS[0],outerS[1]);
var rectWidth = map(hue, 90, 180, outerS[0],outerS[1]);
var closeness = map(hue, 90, 180,0,outerC[0]);
var roundness = map(hue, 90, 180, outerR[0], outerR[1]);
var rectHeightM = map(hue, 90, 180, midS[0], midS[2]);
var rectWidthM = map(hue, 90, 180, midS[0], midS[2]);
var roundnessM = map(hue, 90, 180, midR[0], midR[2]);
}
if(hue>180 && hue<270){
var rectHeight = map(hue, 180, 270, outerS[1],outerS[2]);
var rectWidth = map(hue, 180, 270, outerS[1],outerS[2]);
var closeness = map(hue, 180, 270, outerC[0],outerC[1]);
var roundness = map(hue, 180, 270, outerR[1],outerR[2]);
var rectHeightM = map(hue, 180, 270, midS[2],midS[0]);
var rectWidthM = map(hue, 180, 270, midS[2],midS[0]);
var roundnessM = map(hue, 180, 270, midR[2],midR[0]);
}
if(hue>=270){
var rectHeight = map(hue, 270, 360, outerS[2],0);
var rectWidth = map(hue, 270, 360,outerS[2],0);
var closeness =outerC[1];
var roundness = map(hue, 288,360, outerR[2], outerR[3]);
var rectHeightM = map(hue, 270, 360, midS[0], midS[0]);
var rectWidthM = map(hue, 270, 360, midS[0], midS[0]);
var roundnessM = map(hue, 288,360, midR[0], 0);
}
middleRect(hue, s2,rectWidthM,rectHeightM,roundnessM);
outsideRect(hue, s2, saturation, closeness, rectWidth, rectHeight, roundness);
}
function middleRect(hue, s2,rectWidthM,rectHeightM,roundnessM){
rect(s2, s2, rectWidthM,rectHeightM, roundnessM, roundnessM);
push();
translate(s2, s2);
rotate(HALF_PI/2);
translate(-s2, -s2);
rect(s2, s2, rectWidthM,rectHeightM, roundnessM, roundnessM);
pop();
rectMode(CORNER);
}
function outsideRect(hue, s2, saturation, closeness, rectWidth, rectHeight, roundness){
//lower saturation=lower amount of circes/squares
var numOfSquares = map(saturation, 0, 100, 4, 10);
//to make sure both ends 0 and 360 hue look the same: (stroke of outside circles go away)
if (hue==0 || hue==360){
strokeWeight(0);
}
for (var i = 0; i < numOfSquares; i++) {
push();
translate(s2,s2);
rotate(TWO_PI * i / numOfSquares);
rect(closeness, 0, rectWidth, rectHeight, roundness, roundness);
pop();
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment