Skip to content

Commit

Permalink
First commit.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sherbondy
sherbondy committed Dec 1, 2010
0 parents commit f76c1b9
Show file tree
Hide file tree
Showing 9 changed files with 341 additions and 0 deletions.
Binary file added DistillCdBd.otf
Binary file not shown.
Empty file added README
Empty file.
Binary file added download.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE HTML>
<html lang="en-us">
<head>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Arvo&subset=latin"
rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="icon" type="img/png" href="favicon.png">
<script src="processing-1.0.0.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
type="text/javascript"></script>

<script type="text/javascript">

function make_pic() {
var canvy = document.getElementById("canvy");
document.location = canvy.toDataURL();
}

$(function() {
$("#i").click(function() {
$("#info").toggle();
$("header").toggleClass("opaque");
return false;
});
$("#x").click(function() {
$("#info").hide();
$("header").removeClass("opaque");
return false;
});

$("#dl").click(make_pic, false);

$(document).keydown(function(e) {
if (e.keyCode == 32) {
make_pic();
}
});
});
</script>

<title>Mondrian</title>
</head>
<body>
<header>
<h1>Mondrian Automaton</h1>
<a href="#info" id="i">Info</a>
<a href="#download" id="dl">Download</a>
</header>

<details id="info">
<p>An experiment in websites as art for
<a href="http://courses.media.mit.edu/2010fall/mas110/">MAS.110</a>.
</p>
<p>
Mondrian-style images are generated with a little
help from <a href="http://processingjs.org/">processing.js</a>.
</p>

<p>
Icons from <a href="http://glyphish.com/">Glyphish</a>.
The typefaces are Distill and Arvo.
</p>
<p>
Created by <a href="http://www.tooepic.com">Ethan Sherbondy</a>.
</p>
<a id="x" href="#">X</a>
</details>

<canvas data-processing-sources="mondrian.pde" id="canvy"></canvas>
</body>
</html>
Binary file added info.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
105 changes: 105 additions & 0 deletions mondrian.pde
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
ArrayList v_array = new ArrayList();
ArrayList h_array = new ArrayList();

ArrayList colors = new ArrayList();
colors.add(color(175,25,25)); // red
colors.add(color(175,25,25)); // red
colors.add(color(28,24,160)); // blue
colors.add(color(28,24,160)); // blue
colors.add(color(240,204,22)); // yellow
colors.add(color(240,204,22)); // yellow
colors.add(color(18, 13, 10)); // black
colors.add(color(187, 189, 194)); // grey
colors.add(color(255,255,255)); // white

void illus() {
var w = $(window).width()-8;
var h = $(window).height()-8;
size(w, h);

v_array.clear();
h_array.clear();

v_array.add(w);
h_array.add(h);

v_array.add(0);
h_array.add(0);

background(255,255,255);
smooth();

stroke(000);
int s_w = int(random(8,16));
int adj = ceil(s_w/2);
strokeWeight(s_w);

int min_w = int(w/12);
int max_w = int(w/2);

int min_h = int(h/12);
int max_h = int(h/2);

for (int i = 1; v_array.get(i) < w; i++) {
int x_pos = v_array.get(i) + int(random(min_w,max_w));
v_array.add(x_pos);

line(x_pos,0,x_pos,h);
}

for (int i = 1; h_array.get(i) < h; i++) {
int y_pos = h_array.get(i) + int(random(min_h,max_h));
h_array.add(y_pos);

line(0,y_pos,w,y_pos);
}



int max_squares = v_array.size()+h_array.size();
int num_squares = int(random(3, max_squares));

for (int i=0; i < num_squares; i++) {
int width = max_w;
int height = max_h;

while (width >= max_w || height >= max_h) {
int li = int(random(0,v_array.size()));
int ti = int(random(0,h_array.size()));

int left = v_array.get(li);
int top = h_array.get(ti);

v_array.remove(li);
h_array.remove(ti);

int right = v_array.get(int(random(0,v_array.size())));
int bottom = h_array.get(int(random(0,h_array.size())));

v_array.add(left);
h_array.add(top);

int width = abs(left-right);
int height = abs(top-bottom);

if (width < max_w && height < max_h) {
noStroke();
fill(colors.get(int(random(0,colors.size()))));
int lefty = min(left,right) == 0 ? 0 : min(left,right)+adj-1;
int toppy = min(top,bottom) == 0 ? 0 : min(top,bottom)+adj-1;
int w_shift = lefty == 0 ? adj : s_w;
int h_shift = toppy == 0 ? adj : s_w;
rect(lefty, toppy, width-w_shift+1, height-h_shift+1);
}
}
}
}

void setup() {
illus();
frameRate(0.5);
}

void draw() {
illus();
}
1 change: 1 addition & 0 deletions processing-1.0.0.min.js

Large diffs are not rendered by default.

163 changes: 163 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
/* @override http://eps.local/~ethan/mondrian/style.css */

/* @group Meyer's CSS Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}


/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arvo, 'Helvetica Neue', Helvetica;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

/* @end */

* {
-webkit-transition: opacity 0.5s linear;
}

@font-face {
font-family: Distill;
src: url('DistillCdBd.otf');
font-weight: bold;
}

header {
opacity: 0;
position: absolute;
background: #f0f0f0;
border-bottom: 6px solid #000;
overflow: hidden;
width: 100%;
padding: 16px 0 8px;
}
header:hover {
opacity: 1;
}
h1 {
font-size: 64px;
float: left;
margin-left: 32px;
font-family: Distill;
}

#dl, #i {
display: block;
float: right;
text-indent: -9999px;
opacity: 0.5;
position: relative;
margin: 16px;
}
#dl {
width: 20px;
height: 24px;
margin-top: 18px;
margin-right: 32px;
background: url('download.png') no-repeat;
}
#i {
width: 28px;
height: 28px;
background: url('info.png') no-repeat;
}
#dl:hover, #i:hover {
opacity: 1.0;
}
#i:active, #dl:active {
top: 1px;
}

details {
display: none;
position: absolute;
right: 0;
top: 92px;
border-left: 6px solid #000;
border-bottom: 6px solid #000;
width: 320px;
background: #fff;
}
details p {
line-height: 1.5;
padding: 16px 16px 0;
}
details a {
color: #1c18a0;
position: relative;
text-decoration: none;
}
details a:hover {
color: #af1919;
}
details a:active {
top: 1px;
}
details:target {
opacity: 1;
}

#x {
margin-top: 16px;
display: block;
text-decoration: none;
background: #af1919;
float: left;
color: #fff;
padding: 8px;
font-weight: bold;
font-size: 32px;
position: relative;
}
#x:hover {
opacity: 1;
}
#x:active {
top: 1px;
}

.opaque {
opacity: 1;
}

0 comments on commit f76c1b9

Please sign in to comment.