City/Street/Unit: Difference between revisions
Lassebosch (talk | contribs) No edit summary |
Lassebosch (talk | contribs) No edit summary |
||
| Line 151: | Line 151: | ||
== Michael == | == Michael == | ||
<canvas id=" | <canvas id="new01" showsrc> | ||
function unit () { | function unit () { | ||
// semi-circular unit | // semi-circular unit | ||
| Line 180: | Line 180: | ||
function draw() { | function draw() { | ||
c = document.getElementById(" | c = document.getElementById("new01"); | ||
ctx = c.getContext('2d'); | ctx = c.getContext('2d'); | ||
city(); | city(); | ||
} | } | ||
</canvas> | </canvas> | ||
Revision as of 14:04, 1 October 2012
city/street/unit
<canvas id="c0" showsrc>
function draw() {
c = document.getElementById("c0");
ctx = c.getContext('2d');
// rows of streets
for (r=0; r<8; r++) {
ctx.save();
for (c=0; c<10; c++) {
// a single housing unit
ctx.strokeRect(0, 0, 10, 10);
ctx.translate(10, 0);
}
ctx.restore();
ctx.translate(0, 30);
}
} </canvas>
city/street/unit
<canvas id="c1" showsrc> function unit () {
// semi-circular unit ctx.beginPath(); ctx.arc(5, 5, 5, 0, Math.PI, false); ctx.closePath(); ctx.stroke();
}
function street () {
// a linear row of houses
ctx.save();
var numhouses = Math.floor(Math.random()*15);
for (c=0; c<numhouses; c++) {
unit();
ctx.translate(10, 0);
}
ctx.restore();
}
function city (l) {
// rows of streets
for (x=0; x<12; x++) {
street();
ctx.translate(0, 20);
}
}
function draw() {
c = document.getElementById("c1");
ctx = c.getContext('2d');
city();
} </canvas>
city/street/unit
<canvas id="c2" showsrc> function unit () {
// semi-circular unit ctx.beginPath(); ctx.arc(5, 5, 5, 0, Math.PI, false); ctx.closePath(); ctx.stroke();
}
function street () {
// a linear row of houses
ctx.save();
for (c=0; c<10; c++) {
unit();
ctx.translate(10, 0);
}
ctx.restore();
}
function city (l) {
// rows of streets
for (x=0; x<8; x++) {
street();
ctx.translate(0, 30);
}
}
function draw() {
c = document.getElementById("c2");
ctx = c.getContext('2d');
city();
} </canvas>
radial city
<canvas id="c3" showsrc> function unit () {
// a single housing unit ctx.beginPath(); ctx.arc(5, 5, 5, 0, Math.PI, false); ctx.closePath(); ctx.stroke(); // ctx.strokeRect(0, 0, 10, 10);
}
function street () {
// a linear row of houses
ctx.save();
for (c=0; c<10; c++) {
unit();
ctx.translate(10, 0);
}
ctx.restore();
}
function street (r) {
// a curved row of houses var length = Math.PI * r, numunits = length/10, step = length/numunits, turn = Math.PI/(numunits-1);
ctx.save();
ctx.translate(-r, 0);
ctx.rotate(-Math.PI/2);
for (c=0; c<numunits; c++) {
unit();
ctx.translate(step, 0);
ctx.rotate(turn);
}
ctx.restore();
}
function city (l) {
// rows of streets
ctx.translate(125, 125);
for (var r=30; r<120; r+=20) {
street(r);
}
}
var c, ctx; function draw() {
c = document.getElementById("c3");
ctx = c.getContext("2d");
city();
} </canvas>
Michael
<canvas id="new01" showsrc> function unit () {
// semi-circular unit ctx.beginPath(); ctx.arc(5, 5, 5, 0, Math.PI, false); ctx.closePath(); ctx.stroke();
}
function street () {
// a linear row of houses
ctx.save();
var numhouses = Math.floor(Math.random()*15);
for (c=0; c<numhouses; c++) {
unit();
ctx.translate(10, 0);
}
ctx.restore();
}
function city (l) {
// rows of streets
for (x=0; x<12; x++) {
street();
ctx.translate(0, 20);
}
}
function draw() {
c = document.getElementById("new01");
ctx = c.getContext('2d');
city();
} </canvas>