Skip to content

Instantly share code, notes, and snippets.

@christinapetris

christinapetris/.block

Forked from dribnet/.block
Last active October 19, 2017 01:24
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/50839c3ea083f7ff147dc287522aeb2f to your computer and use it in GitHub Desktop.
Save christinapetris/50839c3ea083f7ff147dc287522aeb2f to your computer and use it in GitHub Desktop.
Download ZIP
17.2.MDDN342 PS4
Raw
.block
license: mit
height: 720
Raw
README.md

Final

This design is a combination of influences from Gatsby (Art Deco style) and Art Nouveau style.

After experimentations with the noise function I developed the idea of clouds overlaying a city like scape in an abstract way.

By figuring out how to make more and more intricate details as you zoom in I wanted to show the pattern become more rounded and take on from the Art Nouveau style more.

Originally I wanted to show more contrast in colour. Ideally I wanted to make a bright contrast that appears the more you zoom in. The idea was to have a populated, polluted cityscape which as you zoom in it goes back more to nature.

Instead of going with that idea I decided I wanted to keep a more consitent theme with subtler changes. Maybe in the future I could experiment more with different colours.

Raw
drawgrid.js
var max_thickness = 64;
var max_movement = 32;
var rectWidth = 20;
var rectWidth1 = 40;
var rectWidth2 = 60;
var line_width = 1;
var line_width2 = 0.3;
var line_width3 = 0.05;
var grid_size = 64;
var grid_size = 20;
var curve_edge_amount =10;
var curve_edge_amount2 =0.1;
/* TOUR VARIABLES (required)
/* the random number seed for the tour */
var tourSeed = 100;
/* triplets of locations: zoom, x, y */
var tourPath = [
[0,854.000000000000,808.000000000000],
[2,723.750000000000,910.000000000000],
[3,724.000000000000,910.000000000000],
[5,730.343750000000,856.6875000],
[6,730.484375000000,855.25000000000],
[8,730.054687500000,855.148437500000]
]
function getOffsetPoint(p5, x, y, z, noiseScale) {
var noiseX = p5.noise(x*noiseScale,
y*noiseScale, z);
var noiseY = p5.noise(x*noiseScale,
y*noiseScale, z+50);
var offsetX = p5.map(noiseX, 0, 1, -max_movement, max_movement);
var offsetY = p5.map(noiseY, 0, 1, -max_movement, max_movement);
return [x+offsetX, y+offsetY]
}
function snap_to_grid(num, gsize) {
return (num - (num % gsize));
}
function drawRectangles(p5, x1, x2, y1, y2, pos_x, pos_y, size, thickness) {
var pixel_y = p5.map(pos_y, y1, y2, 0, 256);
var pixel_posx1 = p5.map(pos_x, x1, x2, 0, 256);
var pixel_posx2 = p5.map(pos_x+size, x1, x2, 0, 256);
var line_posx1 = p5.map(pos_x+thickness, x1, x2, 0, 256);
var pixel_size = pixel_posx2 - pixel_posx1;
var lineWeight = line_posx1 - pixel_posx1;
p5.strokeWeight(lineWeight);
p5.ellipse(pixel_posx1+pixel_size, pixel_y, pixel_size, pixel_size);
p5.ellipse(pixel_posx1, pixel_y, pixel_size, pixel_size);
p5.ellipse(pixel_posx1-pixel_size, pixel_y, pixel_size, pixel_size);
}
function drawDetail(p5, x1, x2, y1, y2, pos_x_start, pos_y_start, pos_x_end, pos_y_end, thickness) {
var pixel_x_start = p5.map(pos_x_start, x1, x2, 0, 256);
var pixel_x_end = p5.map(pos_x_end, x1, x2, 0, 256);
var pixel_y_start = p5.map(pos_y_start, y1, y2, 0, 256);
var pixel_y_end = p5.map(pos_y_end, y1, y2, 0, 256);
var line_x_start_thick = p5.map(pos_x_start+thickness, x1, x2, 0, 256);
var lineWeight = line_x_start_thick - pixel_x_start;
p5.strokeWeight(lineWeight);
p5.line(pixel_x_start, pixel_y_start, pixel_x_end, pixel_y_end);
p5.line(pixel_x_end, pixel_y_start, pixel_x_start, pixel_y_end);
p5.ellipse(pixel_x_start, pixel_y_start, lineWeight*15);
}
function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
p5.background(0);
var noiseScale=0.02;
//the higher the less grouped.
var noiseScale=0.01;
p5.noiseDetail(8,0.5);
p5.noiseDetail(1,0.9);
p5.noStroke();
p5.rectMode(p5.center);
var max_shift = max_thickness + max_movement;
var min_x = snap_to_grid(x1 - max_shift, grid_size);
var max_x = snap_to_grid(x2 + max_shift + grid_size, grid_size);
var min_y = snap_to_grid(y1 - max_shift, grid_size);
var max_y = snap_to_grid(y2 + max_shift + grid_size, grid_size);
////the size of things
var c_p00 = p5.map(0, x1, x2, 0, 256);
var c_plwidth = p5.map(line_width, x1, x2, 0, 256);
var c_plwidth2 = p5.map(line_width2, x1, x2, 0, 256);
var c_plwidth3 = p5.map(line_width3, x1, x2, 0, 256);
var c_prect = p5.map(rectWidth, x1, x2, 0, 256);
var c_prect1 = p5.map(rectWidth1, x1, x2, 0, 256);
var c_prect2 = p5.map(rectWidth2, x1, x2, 0, 256);
var c_edge = p5.map(curve_edge_amount, x1, x2, 0, 256);
var cur_line_width = c_plwidth - c_p00;
var cur_line_width2 = c_plwidth2 - c_p00;
var cur_line_width3 = c_plwidth3 - c_p00;
var cur_rectWidth = c_prect - c_p00;
var cur_rectWidth1 = c_prect1 - c_p00;
var cur_rectWidth2 = c_prect2 - c_p00;
var rect_detail = c_edge - c_p00;
if(zoom >= 3){
rectangles(true,rect_detail/2,rect_detail,false,cur_line_width3);
}
p5.fill(0, 0, 128);
//clouds
rectangles(true,0,0,false,cur_line_width2);
rectangles(false,0,0,false,cur_line_width);
function rectangles(buildings,xTrans, yTrans,grayScale,strkeWeight){
p5.push();
p5.translate(xTrans,yTrans);
for(var x=min_x; x<max_x; x+=grid_size) {
for(var y=min_y; y<max_y; y+=grid_size) {
//clouds:
var shift_point = getOffsetPoint(p5, x, y, z, 0.1);
var x_pos = p5.map(shift_point[0], x1, x2, 0, 256);
var y_pos = p5.map(shift_point[1], y1, y2, 0, 256);
var noiseValue = p5.noise(x * noiseScale,y*noiseScale);
p5.fill(noiseValue*120,noiseValue*200);
p5.stroke(noiseValue*150,noiseValue*100);
p5.strokeWeight(strkeWeight);
var rectSize = noiseValue*2;
if (buildings == true){
var x_pos = p5.map(x, x1, x2, 0, 256);
var y_pos = p5.map(y, y1, y2, 0, 256);
var rectSize = 1;
var noiseValue = p5.noise(x,y);
//looks cool
//console.log(noiseValue);
brightness=0.25;
if(zoom >= 2) {
brightness=0.5;
}
if(zoom >= 3) {
brightness=.75;
}
if(noiseValue<0.05) {
p5.noStroke();;
p5.fill(0);
p5.noFill();
}
else if(noiseValue<0.1) {
p5.stroke(240,150,70,50*brightness);
p5.fill(240,150,70,5*brightness);
}
else if(noiseValue<0.25) {
p5.stroke(230,175,75,75*brightness);
p5.fill(230,175,75,10*brightness);
}
else {
p5.stroke(220,190,80,20*brightness);
p5.fill(220,190,80,2*brightness);
}
if(grayScale == true){
brightness=1;
if(noiseValue<0.05) {
p5.noStroke();;
p5.fill(0);
p5.noFill();
}
else if(noiseValue<0.1) {
p5.stroke(60,50*brightness);
p5.fill(80,5*brightness);
}
else if(noiseValue<0.25) {
p5.stroke(30,75*brightness);
p5.fill(100,10*brightness);
}
else {
p5.stroke(15,20*brightness);
p5.fill(120,2*brightness);
}
}
var noiseValue = p5.noise(x,y);
p5.rect(x_pos, y_pos, cur_rectWidth*rectSize, cur_rectWidth1*rectSize, rect_detail/2);
p5.rectMode(p5.CORNER);
p5.rect(x_pos, y_pos, cur_rectWidth*rectSize, cur_rectWidth1*rectSize, rect_detail/2);
p5.rectMode(p5.CENTER);
}
else{
p5.rect(x_pos, y_pos, cur_rectWidth2*rectSize, cur_rectWidth1*rectSize, rect_detail);
}
}
}
p5.pop();
}
var min_x0 = snap_to_grid(x1, grid_size);
var max_x0 = snap_to_grid(x2 + grid_size, grid_size);
var min_y0 = snap_to_grid(y1, grid_size);
var max_y0 = snap_to_grid(y2 + grid_size, grid_size);
if(zoom >= 5) {
p5.noFill();
p5.stroke(100,100);
for(var x=min_x0; x<max_x0; x+=0.25*grid_size) {
for(var y=min_y0; y<max_y0; y+=0.25*grid_size) {
var noiseValue = p5.noise(x,y);
p5.stroke(noiseValue*150,noiseValue*100);
drawRectangles(p5, x1, x2, y1, y2, x, y, 0.035*rectWidth, 0.0015*rectWidth);
drawRectangles(p5, x1, x2, y1, y2, x, y, 0.07*rectWidth, 0.0035*rectWidth);
p5.stroke(noiseValue*80,noiseValue*100);
p5.fill(noiseValue*80,noiseValue*200);
p5.stroke(220,190,80,5);
p5.fill(220,190,80,15*noiseValue);
if(zoom >= 6) {
p5.stroke(220,190,80,10);
p5.fill(220,190,80,30*noiseValue);
}
drawRectangles(p5, x1, x2, y1, y2, x, y, 0.13*rectWidth, 0.007*rectWidth);
}
}
}
if(zoom >= 5) {
p5.noFill();
p5.stroke(0, 255, 0)
p5.stroke(100,100);
var cur_grid_size = 0.050*grid_size;
for(var x=min_x0; x<max_x0; x+=cur_grid_size) {
for(var y=min_y0; y<max_y0; y+=cur_grid_size) {
p5.fill(255, 0, 0);
p5.stroke(0);
var noiseValue = p5.noise(x,y);
p5.stroke(noiseValue*100,noiseValue*255);
p5.fill(noiseValue*100,noiseValue*255);
drawDetail(p5, x1, x2, y1, y2, x, y, x+cur_grid_size, y, 0.0007*rectWidth);
drawDetail(p5, x1, x2, y1, y2, x, y, x, y+cur_grid_size, 0.0007*rectWidth);
drawDetail(p5, x1, x2, y1, y2, x, y, x+cur_grid_size, y+cur_grid_size, 0.0007*rectWidth);
}
}
}
//debug
// p5.noFill();
// p5.stroke(0, 0, 255)
// p5.rect(0, 0, 255, 255);
}
Raw
example_10print.js
/* This is an example of 10print translated into the PS4 framework */
var blue = "#0000AA"
var light_blue = "#0088FF"
function drawLayer(p5, slashsize, x1, x2, y1, y2, z) {
var noiseScale=1/16.0;
var startx = slashsize * (Math.floor(x1/slashsize) - 1);
var starty = slashsize * (Math.floor(y1/slashsize) - 1);
var endx = slashsize * (Math.floor(x2/slashsize) + 1);
var endy = slashsize * (Math.floor(y2/slashsize) + 1);
var char_width = 256 / ((x2-x1)/slashsize);
var char_height = 256 / ((y2-y1)/slashsize);
var pixel_width = char_width / 8;
var pixel_height = char_height / 8;
p5.strokeWeight(pixel_width);
for(var x=startx; x<endx; x+=slashsize) {
var n_x = x / slashsize;
var x_pos = p5.map(x, x1, x2, 0, 256);
for(var y=starty; y<endy; y+=slashsize) {
var n_y = y / slashsize;
var y_pos = p5.map(y, y1, y2, 0, 256);
var noiseValue = p5.noise(x * noiseScale, y * noiseScale, z);
if (noiseValue < 0.5) {
p5.line(x_pos, y_pos, x_pos+char_width, y_pos+char_height);
}
else {
p5.line(x_pos, y_pos+char_height, x_pos+char_width, y_pos);
}
}
}
}
function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
p5.noiseDetail(8,0.5);
p5.background(blue);
p5.stroke(light_blue);
drawLayer(p5, 16, x1, x2, y1, y2, z);
}
Raw
example_fence.js
var max_thickness = 64;
var max_movement = 32;
var ball_radius = 32;
var line_width = 8;
var grid_size = 64;
function getOffsetPoint(p5, x, y, z, noiseScale) {
var noiseX = p5.noise(x * noiseScale,
y * noiseScale, z);
var noiseY = p5.noise(x * noiseScale,
y * noiseScale, z+50);
var offsetX = p5.map(noiseX, 0, 1, -max_movement, max_movement);
var offsetY = p5.map(noiseY, 0, 1, -max_movement, max_movement);
return [x+offsetX, y+offsetY]
}
function snap_to_grid(num, gsize) {
return (num - (num % gsize));
}
/*
* This is the funciton to implement to make your own abstract design.
*
* arguments:
* p5: the p5.js object - all draw commands should be prefixed with this object
* x1, x2, y1, y2: draw the pattern contained in the rectangle x1,y1 to x2, y2
* z: use this as the noise z offset (can be shifted)
* zoom: current zoom level (starts at 0), useful to decide how much detail to draw
*
* The destination drawing should be in the square 0, 0, 255, 255.
*/
function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
// debug - show border
var max_shift = max_thickness + max_movement;
var min_x = snap_to_grid(x1 - max_shift, grid_size);
var max_x = snap_to_grid(x2 + max_shift + grid_size, grid_size);
var min_y = snap_to_grid(y1 - max_shift, grid_size);
var max_y = snap_to_grid(y2 + max_shift + grid_size, grid_size);
var c_p00 = p5.map(0, x1, x2, 0, 256);
var c_plwidth = p5.map(line_width, x1, x2, 0, 256);
var c_pball = p5.map(ball_radius, x1, x2, 0, 256);
var cur_line_width = c_plwidth - c_p00;
var cur_ball_radius = c_pball - c_p00;
p5.background(255);
p5.fill(0, 0, 128);
for(var x=min_x; x<max_x; x+=grid_size) {
for(var y=min_y; y<max_y; y+=grid_size) {
var shift_point = getOffsetPoint(p5, x, y, z, 0.1);
var x_pos = p5.map(shift_point[0], x1, x2, 0, 256);
var y_pos = p5.map(shift_point[1], y1, y2, 0, 256);
p5.strokeWeight(cur_line_width);
p5.stroke(0, 0, 128);
var shift_point2 = getOffsetPoint(p5, x+grid_size, y, z, 0.1);
var x_pos2 = p5.map(shift_point2[0], x1, x2, 0, 256);
var y_pos2 = p5.map(shift_point2[1], y1, y2, 0, 256);
p5.line(x_pos, y_pos, x_pos2, y_pos2);
p5.stroke(0, 128, 0);
var shift_point2 = getOffsetPoint(p5, x, y+grid_size, z, 0.1);
var x_pos2 = p5.map(shift_point2[0], x1, x2, 0, 256);
var y_pos2 = p5.map(shift_point2[1], y1, y2, 0, 256);
p5.line(x_pos, y_pos, x_pos2, y_pos2);
p5.noStroke();
p5.ellipse(x_pos, y_pos, cur_ball_radius);
}
}
}
Raw
example_fence2.js
var max_thickness = 64;
var max_movement = 32;
var ball_radius = 32;
var line_width = 8;
var grid_size = 64;
/* the random number seed for the tour */
var tourSeed = 301;
/* triplets of locations: zoom, x, y */
var tourPath = [
[1, 356.500000000000, 665.750000000000],
[3, 353.250000000000, 668.187500000000],
[4, 322.562500000000, 645.093750000000],
[5, 322.562500000000, 645.109375000000],
[7, 317.984375000000, 643.636718750000],
[3, 317.984375000000, 643.636718750000]
]
function getOffsetPoint(p5, x, y, z, noiseScale) {
var noiseX = p5.noise(x * noiseScale,
y * noiseScale, z);
var noiseY = p5.noise(x * noiseScale,
y * noiseScale, z+50);
var offsetX = p5.map(noiseX, 0, 1, -max_movement, max_movement);
var offsetY = p5.map(noiseY, 0, 1, -max_movement, max_movement);
return [x+offsetX, y+offsetY]
}
function snap_to_grid(num, gsize) {
return (num - (num % gsize));
}
function drawPetals(p5, x1, x2, y1, y2, pos_x, pos_y, rad1, rad2) {
var offsets = [
[0, 1],
[1, 0],
[0, -1],
[-1, 0]
]
var pixel_posx1 = p5.map(pos_x, x1, x2, 0, 256);
var pixel_posx2 = p5.map(pos_x+rad2, x1, x2, 0, 256);
var pixel_radius = pixel_posx2 - pixel_posx1;
for(var i=0; i<offsets.length; i++) {
var offset = offsets[i];
var pixel_x = p5.map(pos_x+0.5*rad1*offset[0], x1, x2, 0, 256);
var pixel_y = p5.map(pos_y+0.5*rad1*offset[1], y1, y2, 0, 256);
p5.ellipse(pixel_x, pixel_y, pixel_radius);
}
}
function drawStamens(p5, x1, x2, y1, y2, pos_x, pos_y, rad1, rad2, drawLines) {
var offsets = [
[1, 1],
[1, -1],
[-1, 1],
[-1, -1]
]
var pixel_posx1 = p5.map(pos_x, x1, x2, 0, 256);
var pixel_posx2 = p5.map(pos_x+rad2, x1, x2, 0, 256);
var pixel_radius = pixel_posx2 - pixel_posx1;
for(var i=0; i<offsets.length; i++) {
var offset = offsets[i];
var pixel_x = p5.map(pos_x+0.5*rad1*offset[0], x1, x2, 0, 256);
var pixel_y = p5.map(pos_y+0.5*rad1*offset[1], y1, y2, 0, 256);
p5.strokeWeight(0);
p5.ellipse(pixel_x, pixel_y, pixel_radius);
if(drawLines) {
p5.strokeWeight(pixel_radius / 20);
p5.line(pixel_x-pixel_radius, pixel_y, pixel_x+pixel_radius, pixel_y);
p5.line(pixel_x, pixel_y-pixel_radius, pixel_x, pixel_y+pixel_radius);
p5.strokeWeight(0);
p5.ellipse(pixel_x, pixel_y, pixel_radius / 12);
}
}
}
/*
* This is the funciton to implement to make your own abstract design.
*
* arguments:
* p5: the p5.js object - all draw commands should be prefixed with this object
* x1, x2, y1, y2: draw the pattern contained in the rectangle x1,y1 to x2, y2
* z: use this as the noise z offset (can be shifted)
* zoom: current zoom level (starts at 0), useful to decide how much detail to draw
*
* The destination drawing should be in the square 0, 0, 255, 255.
*/
function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
// debug - show border
var max_shift = max_thickness + max_movement;
var min_x = snap_to_grid(x1 - max_shift, grid_size);
var max_x = snap_to_grid(x2 + max_shift + grid_size, grid_size);
var min_y = snap_to_grid(y1 - max_shift, grid_size);
var max_y = snap_to_grid(y2 + max_shift + grid_size, grid_size);
var c_p00 = p5.map(0, x1, x2, 0, 256);
var c_plwidth = p5.map(line_width, x1, x2, 0, 256);
var c_pball = p5.map(ball_radius, x1, x2, 0, 256);
var cur_line_width = c_plwidth - c_p00;
var cur_ball_radius = c_pball - c_p00;
p5.background(255);
for(var x=min_x; x<max_x; x+=grid_size) {
for(var y=min_y; y<max_y; y+=grid_size) {
var shift_point = getOffsetPoint(p5, x, y, z, 0.1);
var x_pos = p5.map(shift_point[0], x1, x2, 0, 256);
var y_pos = p5.map(shift_point[1], y1, y2, 0, 256);
p5.strokeWeight(cur_line_width);
p5.stroke(0, 128, 0);
var shift_point2 = getOffsetPoint(p5, x+grid_size, y, z, 0.1);
var x_pos2 = p5.map(shift_point2[0], x1, x2, 0, 256);
var y_pos2 = p5.map(shift_point2[1], y1, y2, 0, 256);
p5.line(x_pos, y_pos, x_pos2, y_pos2);
var shift_point2 = getOffsetPoint(p5, x, y+grid_size, z, 0.1);
var x_pos2 = p5.map(shift_point2[0], x1, x2, 0, 256);
var y_pos2 = p5.map(shift_point2[1], y1, y2, 0, 256);
p5.line(x_pos, y_pos, x_pos2, y_pos2);
p5.noStroke();
// if zoomed: first, draw petals *behind* the ellipse
if(zoom >= 3) {
p5.fill(0, 0, 255);
drawPetals(p5, x1, x2, y1, y2, shift_point[0], shift_point[1], ball_radius, line_width);
}
// draw ellipse
p5.fill(0, 0, 128);
p5.ellipse(x_pos, y_pos, cur_ball_radius);
// if zoomed: last draw stamens *in front of* the ellipse
if(zoom >= 3) {
// now if we are super zoomed, draw lines in the stamen
var drawLines = false;
if (zoom >= 5) drawLines = true;
p5.fill(0, 0, 255);
p5.stroke(0, 0, 128);
drawStamens(p5, x1, x2, y1, y2, shift_point[0], shift_point[1], ball_radius/3, line_width/2, drawLines);
}
}
}
}
Raw
example_framed_dot.js
/*
* This is the funciton to implement to make your own abstract design.
*
* arguments:
* p5: the p5.js object - all draw commands should be prefixed with this object
* x1, x2, y1, y2: draw the pattern contained in the rectangle x1,y1 to x2, y2
* z: use this as the noise z offset (can be shifted)
* zoom: current zoom level (starts at 0), useful to decide how much detail to draw
*
* The destination drawing should be in the square 0, 0, 255, 255.
*/
// This version draws two rectangles and two ellipses.
// The rectangles are 960x720 and centered at 512,512.
function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
console.log(y1, y2);
p5.background(255);
p5.rectMode(p5.CORNERS);
// The first red rectangle fills the entire space
var cx = p5.map(512-960/2, x1, x2, 0, 256);
var cy = p5.map(512-720/2, y1, y2, 0, 256);
var cx2 = p5.map(512+960/2, x1, x2, 0, 256);
var cy2 = p5.map(512+720/2, y1, y2, 0, 256);
p5.fill(255, 0, 0);
p5.rect(cx, cy, cx2, cy2);
// The second black rectangle is inset to form a frame inset by 20 units
cx = p5.map(512-940/2, x1, x2, 0, 256);
cy = p5.map(512-700/2, y1, y2, 0, 256);
cx2 = p5.map(512+940/2, x1, x2, 0, 256);
cy2 = p5.map(512+700/2, y1, y2, 0, 256);
p5.fill(0);
p5.rect(cx, cy, cx2, cy2);
// Two ellipses with a radius of 50 units are then added.
var cx = p5.map(512, x1, x2, 0, 256);
var cy = p5.map(512, y1, y2, 0, 256);
var cx2 = p5.map(512+50, x1, x2, 0, 256);
p5.fill(0, 0, 255);
p5.ellipse(cx, cy, (cx2-cx));
// The second green ellipse is above and to the left of the first one.
var cx = p5.map(412, x1, x2, 0, 256);
var cy = p5.map(412, y1, y2, 0, 256);
var cx2 = p5.map(412+50, x1, x2, 0, 256);
p5.fill(0, 255, 0);
p5.ellipse(cx, cy, (cx2-cx));
}
Raw
example_framed_dot2.js
/*
* This is the funciton to implement to make your own abstract design.
*
* arguments:
* p5: the p5.js object - all draw commands should be prefixed with this object
* x1, x2, y1, y2: draw the pattern contained in the rectangle x1,y1 to x2, y2
* z: use this as the noise z offset (can be shifted)
* zoom: current zoom level (starts at 0), useful to decide how much detail to draw
*
* The destination drawing should be in the square 0, 0, 255, 255.
*/
/* TOUR VARIABLES (required)
/* the random number seed for the tour */
var tourSeed = 100;
/* triplets of locations: zoom, x, y */
var tourPath = [
[5, 510, 507],
[7, 507, 506],
[3, 512, 515],
[1, 512, 512]
]
/* OPTIONAL VARIABLES */
/* what is the initial zoom level (defaults to 0) */
var initialZoomLevel = 3;
/* what is the maximum zoom level (make this at least 10. defaults to 16) */
var maxZoomLevel = 12;
function drawPetals(p5, x1, x2, y1, y2, pos_x, pos_y, rad1, rad2) {
var offsets = [
[0, 1],
[1, 0],
[0, -1],
[-1, 0]
]
var pixel_posx1 = p5.map(pos_x, x1, x2, 0, 256);
var pixel_posx2 = p5.map(pos_x+rad2, x1, x2, 0, 256);
var pixel_radius = pixel_posx2 - pixel_posx1;
for(var i=0; i<offsets.length; i++) {
var offset = offsets[i];
var pixel_x = p5.map(pos_x+0.5*rad1*offset[0], x1, x2, 0, 256);
var pixel_y = p5.map(pos_y+0.5*rad1*offset[1], y1, y2, 0, 256);
p5.ellipse(pixel_x, pixel_y, pixel_radius);
}
}
function drawStamens(p5, x1, x2, y1, y2, pos_x, pos_y, rad1, rad2, drawLines) {
var offsets = [
[1, 1],
[1, -1],
[-1, 1],
[-1, -1]
]
var pixel_posx1 = p5.map(pos_x, x1, x2, 0, 256);
var pixel_posx2 = p5.map(pos_x+rad2, x1, x2, 0, 256);
var pixel_radius = pixel_posx2 - pixel_posx1;
for(var i=0; i<offsets.length; i++) {
var offset = offsets[i];
var pixel_x = p5.map(pos_x+0.5*rad1*offset[0], x1, x2, 0, 256);
var pixel_y = p5.map(pos_y+0.5*rad1*offset[1], y1, y2, 0, 256);
p5.strokeWeight(0);
p5.ellipse(pixel_x, pixel_y, pixel_radius);
if(drawLines) {
p5.strokeWeight(pixel_radius / 20);
p5.line(pixel_x-pixel_radius, pixel_y, pixel_x+pixel_radius, pixel_y);
p5.line(pixel_x, pixel_y-pixel_radius, pixel_x, pixel_y+pixel_radius);
p5.strokeWeight(0);
p5.ellipse(pixel_x, pixel_y, pixel_radius / 12);
}
}
}
// This version draws two rectangles and two ellipses.
// The rectangles are 960x720 and centered at 512,512.
function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
p5.background(255);
p5.rectMode(p5.CORNERS);
// The first red rectangle fills the entire space
var cx = p5.map(512-960/2, x1, x2, 0, 256);
var cy = p5.map(512-720/2, y1, y2, 0, 256);
var cx2 = p5.map(512+960/2, x1, x2, 0, 256);
var cy2 = p5.map(512+720/2, y1, y2, 0, 256);
p5.fill(255, 0, 0);
p5.rect(cx, cy, cx2, cy2);
// The second black rectangle is inset to form a frame inset by 20 units
cx = p5.map(512-940/2, x1, x2, 0, 256);
cy = p5.map(512-700/2, y1, y2, 0, 256);
cx2 = p5.map(512+940/2, x1, x2, 0, 256);
cy2 = p5.map(512+700/2, y1, y2, 0, 256);
p5.fill(0);
p5.rect(cx, cy, cx2, cy2);
// Two ellipses with a radius of 50 units are then added.
// start with the center dot --
// if zoomed: first, draw petals *behind* the ellipse
if(zoom >= 3) {
p5.fill(0, 128, 128);
drawPetals(p5, x1, x2, y1, y2, 512, 512, 50, 10);
}
// first, draw a blue
var cx = p5.map(512, x1, x2, 0, 256);
var cy = p5.map(512, y1, y2, 0, 256);
var cx2 = p5.map(512+50, x1, x2, 0, 256);
p5.fill(0, 0, 255);
p5.ellipse(cx, cy, (cx2-cx));
// if zoomed: last draw stamens *in front of* the ellipse
if(zoom >= 3) {
// now if we are super zoomed, draw lines in the stamen
var drawLines = false;
if (zoom >= 5) drawLines = true;
p5.fill(0, 128, 128);
p5.stroke(0, 0, 255);
drawStamens(p5, x1, x2, y1, y2, 512, 512, 10, 8, drawLines);
}
// The second green ellipse is above and to the left of the first one.
var cx = p5.map(412, x1, x2, 0, 256);
var cy = p5.map(412, y1, y2, 0, 256);
var cx2 = p5.map(412+50, x1, x2, 0, 256);
p5.fill(0, 255, 0);
p5.ellipse(cx, cy, (cx2-cx));
}
Raw
example_noise.js
function drawGrid(p5, x1, x2, y1, y2, z, zoom) {
var noiseScale=0.02;
p5.noiseDetail(8,0.5);
p5.noStroke();
for(var i=0; i<16; i++) {
var n_x = p5.map(i, 0, 16, x1, x2);
for(var j=0; j<16; j++) {
var n_y = p5.map(j, 0, 16, y1, y2);
var noiseVal = p5.noise(n_x * noiseScale,
n_y * noiseScale, z);
p5.fill(noiseVal*255);
p5.rect(i*16, j*16, 16, 16);
}
}
// debug - show border
// p5.noFill();
// p5.stroke(255, 0, 0)
// p5.rect(0, 0, 255, 255);
}
Raw
framed.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>framed version</title>
<div class="column">
<h3>960x720 preview</h3>
<div class="index">
<iframe sandbox="allow-popups allow-scripts allow-forms allow-same-origin" src="index.html" marginwidth="0" marginheight="0" style="width:960px;height:720px;" scrolling="no"></iframe>
</div>
</div>
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>17.2.MDDN342 PS4</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
.leaflet-control-attribution {
font-size: 24px !important;
}
</style>
</head>
<body>
<div id="map"></div>
<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://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="leaflet-hash.js"></script>
<script src="drawgrid.js"></script>
<script src="map.js"></script>
</body>
</html>
Raw
index_map.html
<!DOCTYPE html>
<html>
<head>
<title>17.2.MDDN342 PS4</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<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://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
<script src="leaflet-hash.js"></script>
<script src="10print.js"></script>
<script src="map.js"></script>
</body>
</html>
Raw
leaflet-hash.js
(function(window) {
var HAS_HASHCHANGE = (function() {
var doc_mode = window.documentMode;
return ('onhashchange' in window) &&
(doc_mode === undefined || doc_mode > 7);
})();
L.Hash = function(map) {
this.onHashChange = L.Util.bind(this.onHashChange, this);
if (map) {
this.init(map);
}
};
L.Hash.parseHash = function(hash) {
if(hash.indexOf('#') === 0) {
hash = hash.substr(1);
}
var args = hash.split("/");
if (args.length == 5) {
var seed = parseInt(args[0], 10),
zoom = parseInt(args[1], 10),
lat = parseFloat(args[2]),
lon = parseFloat(args[3]);
depth = parseFloat(args[4]);
if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) {
return false;
} else {
return {
center: new L.LatLng(lat, lon),
zoom: zoom,
seed: seed,
depth: depth
};
}
} else {
return false;
}
};
L.Hash.formatHash = function(map) {
var seed = map._p5_seed,
depth = map._p5_depth,
center = map.getCenter(),
zoom = map.getZoom(),
precision = 12;
// precision = Math.max(0, Math.ceil(Math.log(zoom*zoom) / Math.LN2));
return "#" + [seed, zoom,
center.lat.toFixed(precision),
center.lng.toFixed(precision),
depth.toFixed(precision)
].join("/");
},
L.Hash.prototype = {
map: null,
lastHash: null,
parseHash: L.Hash.parseHash,
formatHash: L.Hash.formatHash,
init: function(map) {
this.map = map;
// reset the hash
this.lastHash = null;
this.onHashChange();
if (!this.isListening) {
this.startListening();
}
},
removeFrom: function(map) {
if (this.changeTimeout) {
clearTimeout(this.changeTimeout);
}
if (this.isListening) {
this.stopListening();
}
this.map = null;
},
onMapMove: function() {
// bail if we're moving the map (updating from a hash),
// or if the map is not yet loaded
if (this.movingMap || !this.map._loaded) {
return false;
}
var hash = this.formatHash(this.map);
if (this.lastHash != hash) {
location.replace(hash);
this.lastHash = hash;
}
},
movingMap: false,
update: function() {
var hash = location.hash;
if (hash === this.lastHash) {
return;
}
var parsed = this.parseHash(hash);
if (parsed) {
var do_reset = false;
if (!("_hash_parsed" in this.map)) {
do_reset = true;
}
this.map._hash_parsed = true;
this.map._p5_seed = parsed.seed;
this.map._p5_depth = parsed.depth;
this.movingMap = true;
this.map.setView(parsed.center, parsed.zoom, {reset: do_reset});
this.movingMap = false;
}
else if (!("_hash_parsed" in this.map)) {
this.map._hash_parsed = true;
var center = this.map.getCenter();
var zoom = this.map.getZoom();
this.map.setView(center, zoom, {reset: true});
}
else {
this.onMapMove(this.map);
}
},
// defer hash change updates every 100ms
changeDefer: 100,
changeTimeout: null,
onHashChange: function() {
// throttle calls to update() so that they only happen every
// `changeDefer` ms
if (!this.changeTimeout) {
var that = this;
this.changeTimeout = setTimeout(function() {
that.update();
that.changeTimeout = null;
}, this.changeDefer);
}
},
isListening: false,
hashChangeInterval: null,
startListening: function() {
this.map.on("moveend", this.onMapMove, this);
if (HAS_HASHCHANGE) {
L.DomEvent.addListener(window, "hashchange", this.onHashChange);
} else {
clearInterval(this.hashChangeInterval);
this.hashChangeInterval = setInterval(this.onHashChange, 50);
}
this.isListening = true;
},
stopListening: function() {
this.map.off("moveend", this.onMapMove, this);
if (HAS_HASHCHANGE) {
L.DomEvent.removeListener(window, "hashchange", this.onHashChange);
} else {
clearInterval(this.hashChangeInterval);
}
this.isListening = false;
}
};
L.hash = function(map) {
return new L.Hash(map);
};
L.Map.prototype.addHash = function() {
this._hash = L.hash(this);
};
L.Map.prototype.removeHash = function() {
this._hash.removeFrom();
};
})(window);
Raw
map.js
var myCRS = L.extend({}, L.CRS.Simple, {
transformation: new L.Transformation(1, 0,
// -1, // works like expected
1, // image travels while zooming
0)
});
if (typeof initialZoomLevel === 'undefined') {
var initialZoomLevel = 0;
}
if (typeof maxZoomLevel === 'undefined') {
var maxZoomLevel = 16;
}
var worldMap = new L.Map('map', {
continuousWorld:true,
minZoom: 0,
maxZoom: maxZoomLevel,
crs: myCRS,
attributionControl: false,
center: [512, 512],
zoom: initialZoomLevel});
worldMap._p5_seed = Math.floor(Math.random() * 1000);
worldMap._p5_depth = 0.0;
// console.log("Seed start", worldMap._p5_seed)
// Assuming your map instance is in a variable called map
var hash = new L.Hash(worldMap);
// console.log("Seed now", worldMap._p5_seed)
var s = function( p ) {
p.setup = function() {
canvas = p.createCanvas(p._L_width, p._L_height);
p.noLoop();
};
p.draw = function() {
if ("_L_size" in p && "_L_nw" in p) {
var nw = p._L_nw;
var t_size = p._L_size;
var zoom = p._L_zoom;
var m_x1 = nw.lng;
var m_y1 = nw.lat;
var m_x2 = m_x1 + t_size;
var m_y2 = m_y1 + t_size;
var depth = p._L_depth;
p.noiseSeed(p._L_seed)
drawGrid(p, m_x1, m_x2, m_y1, m_y2, depth, zoom);
}
};
};
var tiles = new L.GridLayer({continuousWorld: true});
tiles.createTile = function(coords) {
if (!("_hash_parsed" in worldMap)) {
return L.DomUtil.create('canvas', 'leaflet-tile');
}
var size = this.getTileSize();
var myp5 = new p5(s);
myp5._L_width = size.x;
myp5._L_height = size.y;
myp5._L_zoom = coords.z;
myp5._L_seed = worldMap._p5_seed;
myp5._L_depth = worldMap._p5_depth;
myp5._L_coords = coords;
// calculate projection coordinates of top left tile pixel
myp5._L_nwPoint = coords.scaleBy(size);
myp5._L_size = 256.0 / Math.pow(2, coords.z)
// calculate geographic coordinates of top left tile pixel
myp5._L_nw = worldMap.unproject(myp5._L_nwPoint, coords.z)
myp5._start();
var tile = myp5.canvas;
L.DomUtil.addClass(tile, 'leaflet-tile');
return tile;
}
tiles.addTo(worldMap)
var curLinkIndex = 0;
linkHome = "#0/0/512/512/0"
if (typeof tourPath === 'undefined') {
var tourPath = [
[2, 512, 512],
[4, 512, 512],
[6, 512, 512],
[8, 512, 512]
]
}
tourPath.unshift([initialZoomLevel, 512, 512]);
if (typeof tourSeed === 'undefined') {
var tourSeed = 0;
}
function clickHome() {
worldMap.flyTo([tourPath[0][1], tourPath[0][2]], tourPath[0][0]);
}
function clickDemo() {
if(worldMap._p5_seed != tourSeed) {
var center = worldMap.getCenter();
var zoom = worldMap.getZoom();
worldMap._p5_seed = tourSeed;
tiles.redraw();
// worldMap.setView(center, zoom, {reset: true});
curLinkIndex = 0;
}
else {
curLinkIndex = (curLinkIndex + 1) % tourPath.length
}
var curDest = tourPath[curLinkIndex]
worldMap.flyTo([curDest[1], curDest[2]], curDest[0]);
}
function clickReset() {
window.location.reload();
}
attrib = new L.Control.Attribution
attrib.setPrefix("")
attrStr = '<a href="#" onclick="javascript:clickHome();">home</a> | '
attrStr += '<a href="#" onclick="javascript:clickReset();">reset</a> | '
attrStr += '<a href="#" onclick="javascript:clickDemo();">tour</a>'
attrib.addAttribution(attrStr)
worldMap.addControl(attrib)
Raw
purview.json
{
"commits": [
{
"sha": "18447f163b0f27315b31179810a35a9102935554",
"name": "final"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment