Skip to content

Instantly share code, notes, and snippets.

@christinapetris

christinapetris/.block

Forked from dribnet/.block
Created September 11, 2017 01:52
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/857448b277bdc7ea60b4fbfb636b6075 to your computer and use it in GitHub Desktop.
Save christinapetris/857448b277bdc7ea60b4fbfb636b6075 to your computer and use it in GitHub Desktop.
Download ZIP
17.2.MDDN342 PS3
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

17.2.MDDN342 PS3

For this project I explored a grid layout design inspired by Art Deco and Art Nouveau styles. These styles are shown through my use of colour (golds) and use of shapes (curved and straight).

In my final design I took out the sliders and focused on having a new design on each click.

For my landscape design I wanted to continue on the same style as my pattern so I took a more abstract interpretation. The grey areas are like clouds and the curved organic style is more influenced by art nouveau. I wanted to show a clear contrast like a merge of the two styles side by side. The golden rectangles (sometimes also grey) represent buildings so I made them less curved.

For my pattern design I included layering similar to that shown in Art deco. My design is more rounded and organic compared to the typical Gatsby / Art Deco works. Here I wanted to show a nice depth of field to give my pattern a more 3d look. That way the pattern is considered to be different as you zoom in or out.

In the future I would like to include more variety in colours, like blue for instance which would appear rarely to make my designs more interesting. I would also explore adding more depth of field to my landscape design.

Raw
index.html
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/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=".focused_random.js"></script>
<script language="javascript" type="text/javascript" src=".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>
</table>
</div>
</div>
</table>
</body>
Raw
purview.json
{
"commits": [
{
"sha": "313323cfdffbc57a0191c00c1c64455dd0cb484e",
"name": "final_version"
},
{
"sha": "8687fb72d22d22cf76532907d47328db0e8da6ad",
"name": "With sliders"
},
{
"sha": "bb6c86f0858e25fa3a787e84580d74484e1db1f1",
"name": "Alternative layout"
}
]
}
Raw
sketch.js
var curRandomSeed;
var inMapMode = true;
function setup () {
curRandomSeed = int(focusedRandom(0, 100));
createCanvas(960, 500);
rectMode(CORNERS);
}
function changeRandomSeed() {
curRandomSeed = curRandomSeed + 1;
}
function mousePressed() {
changeRandomSeed();
}
function draw () {
resetFocusedRandom(curRandomSeed);
noiseSeed(curRandomSeed);
translate(-10,-10);
background(0);
colour = int(focusedRandom(0,2));
var x_steps = 1 + Math.floor(width / 19);
var y_steps = 1 + Math.floor(height /20);
var x_grid_locations = new Array(x_steps);
var y_grid_locations = new Array(y_steps);
for(var i=0;i<x_steps;i++) {
var shift = focusedRandom(-10, 10, 2);
var cur_x = i * 20 + shift;
x_grid_locations[i] = cur_x;
}
for(var j=0;j<y_steps;j++) {
var shift = focusedRandom(-10, 10, 2);
var cur_y = j * 30 + shift;
y_grid_locations[j] = cur_y;
}
angleMode(DEGREES);
if(inMapMode) {
push();
scale(focusedRandom(2,4));
background(0);
for(var i=0;i<x_steps-1;i++) {
for(var j=0;j<y_steps-1;j++) {
fill(focusedRandom(0, 50, 3),100);
noFill();
var x1 = x_grid_locations[i];
var x2 = x_grid_locations[i+1];
var y1 = y_grid_locations[j];
var y2 = y_grid_locations[j+2];
push();
var x_noise = x1/100.0;
var y_noise = y1/100.0;
var noiseVal = noise(x_noise, y_noise);
if (noiseVal <0.5){
var roundness = 30;}
else{
var roundness = 5;
}
if(colour==0){
var shade = colorFromValue(noiseVal);
var opacity = opacityFromValue(noiseVal);
}
else if(colour==1){
var shade = colorFromValueGrey(noiseVal);
var opacity = opacityFromValueGrey(noiseVal);}
stroke(shade);
fill(opacity);
rect(x1/2, y1/2, x2/2, y2/2, focusedRandom(0,roundness,2));
pop();
}
}
pop();
}
else{
var rectangle = 0;
var circle = 1;
var opacity = focusedRandom(100, 200);
var layersAmount = int(focusedRandom(1,6));
if (layersAmount > 0) {
rectangles(rectangle,1,1,0,1,0,0);
}
if (layersAmount > 1) {
rectangles(circle,1,1,0,1,0,150);
}
if (layersAmount > 2) {
rectangles(rectangle,2,1,90,2,-1000,0); }
if (layersAmount > 3) {
rectangles(circle,1,1,0,1,0,100);
}
if (layersAmount > 4) {
rectangles(rectangle,3,3,0,1,-1000,0);
}
function rectangles(shape, size, scale2, angle, strokeWidth,y,maxDarkness){
for(var i=0;i<x_steps-1;i++) {
for(var j=0;j<y_steps-1;j++) {
fill(focusedRandom(0, 50, 3),100);
noFill();
stroke(220,200,80,focusedRandom(opacity));
if(colour==0){stroke(220,200,80,focusedRandom(opacity));}
else if(colour==1){stroke(170,focusedRandom(opacity));}
var x1 = x_grid_locations[i];
var x2 = x_grid_locations[i+1];
var y1 = y_grid_locations[j];
var y2 = y_grid_locations[j+2];
var ellipseW = focusedRandom(30,60,2);
var ellipseH = focusedRandom(30, 60,2);
var ellipseS = focusedRandom(10,60,2);
if (shape == rectangle){
push();
rotate(angle);
translate(0,y);
strokeWeight(strokeWidth);
scale(scale2);
rect(x1*size, y1*size, x2*size, y2*size, focusedRandom(0,30,2));
pop();
}
else{
noStroke();
fill(0,focusedRandom(0,100));
ellipse(x1*3,y1*3,ellipseS*2,ellipseS*2);
push();
translate(-100,-70);
//fill(255);
fill(0,focusedRandom(0,maxDarkness,3));
ellipse(x1*3,y1*3,ellipseS*3,ellipseS*3);
pop();
}
}
}
}
}
}
function opacityFromValue(v){
if (v < 0.5) {
color1 = color(0,50);
color2 = color(200,50);
c = lerpColor(color1, color2, v*2);
return c;
}
else if(v<0.6) {
return color(240,150,70,5);
}
else if(v<0.8) {
return color(230,175,75,25);
}
else {
return color(220,200,80,50);
}
}
function opacityFromValueGrey(v){
if (v < 0.5) {
color1 = color(0,50);
color2 = color(200,50);
// color1 = color(240,150,70,10);
// color2 = color(220,200,80,30);
c = lerpColor(color1, color2, v*2);
return c;
}
else if(v<0.6) {
return color(255,5);
}
else if(v<0.8) {
return color(255,25);
}
else {
return color(255,50);
}
}
//stroke colour
function colorFromValue(v) {
if (v < 0.5) {
color1 = color(0,50);
color2 = color(150,50);
c = lerpColor(color1, color2, v*2);
return c;
}
else if(v<0.6) {
return color(240,150,70,50);
}
else if(v<0.8) {
return color(230,175,75,75);
}
else {
return color(220,200,80,100);
}
}
function colorFromValueGrey(v) {
if (v < 0.5) {
color1 = color(0,20);
color2 = color(200,20);
c = lerpColor(color1, color2, v*2);
return c;
}
else if(v<0.6) {
return color(255,50);
}
else if(v<0.8) {
return color(255,75);
}
else {
return color(255,100);
}
}
function keyTyped() {
if (key == '!') {
saveBlocksImages();
}
else if (key == '@') {
saveBlocksImages(true);
}
else if (key == ' ') {
inMapMode = !inMapMode;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment