128 lines
3.5 KiB
HTML
128 lines
3.5 KiB
HTML
<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> |