<head>
<title>WallpaperGen</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i"
rel="stylesheet">
<style>
body {
background-color: #f8f9f4;
}
</style>
</head>
<body>
<script src="/assets/js/p5.min.js"></script>
<script>
var colours = ["#009144", "#c2003d", "#f1ce3e", "#80225e", "#005f95"]
// Read url params
var url_string = window.location.href
var url = new URL(url_string);
var h = url.searchParams.get("h");
var w = url.searchParams.get("w");
// Check for sizing
if (h == null || w == null) {
console.log("No size specified. Using 1080x1920");
h = 1920;
w = 1080;
}
function rand(range) {
return Math.floor((Math.random() * range) + 1);
}
// Array to contain points
var pts = []
var lines = []
function buildLines(){
// For a random number of lines, generate it's points locations
var lines_count = colours.length
for (var i=0; i<lines_count; i++){
var existing_points = []
var prim = pts[rand(pts.length)-1]
existing_points.push(prim)
var occupy_count = rand(pts.length) - 1;
for (var j=0; j< occupy_count; j++){
var point = pts[rand(pts.length)-1]
// Make sure this point has not already been used
// if (point in existing_points){
var last_point = existing_points[existing_points.length-1]
lines.push([[last_point[0], last_point[1]], [point[0], point[1]], colours[i]])
existing_points.push(point);
// }
}
}
console.log(lines)
}
function setup() {
createCanvas(w, h);
// Create up to 8 points
var points_count = rand(8);
for (var i = 0; i < points_count; i++) {
var point = [
rand(w),
rand(h)
]
pts.push(point);
}
var i = 0;
while(lines.length == 0 && i < 100){
buildLines();
i++;
}
// blendMode(BURN);
}
function draw() {
strokeWeight(10)
// tint(255, 127);
// Draw each line
lines.forEach(function (i) {
var c = color(i[2]);
stroke(c);
// line(i[0][0], i[0][1], i[1][0], i[1][1] );
// Check which direction to stretch in
if (abs(i[0][0]-i[1][0]) > abs(i[0][1]-i[1][1])){
line(i[0][0], i[0][1], i[0][0], i[1][1])
line(i[0][0], i[1][1], i[1][0], i[1][1])
} else {
line(i[0][0], i[0][1], i[1][0], i[0][1])
line(i[1][0], i[0][1], i[1][0], i[1][1])
}
})
strokeWeight(1)
// // Draw each point
// pts.forEach(function (i) {
// fill(0)
// circle(i[0], i[1], 25);
// })
}
</script>
</body>