近年来，夜间经济飞速发展，城市夜景的美丽吸引了无数人的目光。如果您也热爱城市夜景，并且对于设计和开发有着浓厚的兴趣，那么我为您推荐一款绝佳工具——随机生成夜间城市背景图像的纯js工具！
这个工具简单易用，只需要点击一下，就能够生成非常漂亮的夜间城市背景图像。同时，您可以根据自己的喜好和需要，调整颜色、图像复杂度、高度等参数，生成与众不同的夜间城市背景图像。
这个工具的使用范围非常广泛，首先，它可以用于网站和应用的界面设计，作为背景图像非常合适，可以大大提升界面的美感和用户体验。其次，它也可以用于个人创作和分享，比如制作精美的明信片、书签、海报等。
除了美观的外观，这个工具的另一个优点是使用纯js进行开发，无需安装任何第三方库或插件，轻松使用的同时也保证了网页的兼容性和响应速度。
如果您不知道如何使用这个工具，也不要担心，我们提供了详细的文档和演示，让您轻松上手并实现您的创意。同时，我们的团队也会为您及时提供技术支持和反馈，确保您的使用体验。
总之，这个随机生成夜间城市背景图像的纯js工具是开发者、设计师和创作者的最佳选择，快来尝试吧！
效果如图
代码分享
//import {createLight} from './createLight.js';
//x is at left of grid
//y is at bottom of grid
window.addEventListener('load', function () {
var docHeight = document.body.clientHeight;
var docWidth = document.body.clientWidth;
let margin = 5;
let bottomAreaHeight = 70;
const numberOfAttemptedLights = 1000;
const minLightSize = 1;
const maxLightSize = 3;
const percentOfLightsThatAreStatic = 15;//0-100
//Builds batch 1
const numberOfBuildings = 30;
const minBldgWidthPercent = 1;
const maxBldgWidthPercent = 5;
const minBldgHeightPercent = 40;
const maxBldgHeightPercent = 85;
//Builds batch 2
const numberOfBuildings2 = 15;
const minBldgWidthPercent2 = 8;
const maxBldgWidthPercent2 = 15;
const minBldgHeightPercent2 = 10;
const maxBldgHeightPercent2 = 40;
const numberOfArtifactsToAttempt = 15;
//Set bottom element
let bottom = document.getElementById('bottom');
bottom.style.width = docWidth + "px";
bottom.style.height = bottomAreaHeight + "px";
// Generate the buildings and the grid that represents where the buildings are in a 2D array
const maxX = docWidth;
const maxY = docHeight - bottomAreaHeight;
const grid = createArray(maxX, maxY);
for(let x = 0; x < grid.length; x++){
for(let y = 0; y < grid[x].length; y++){
grid[x][y] = false;
}
}
generateBuildings(grid, margin, maxY, maxX, numberOfBuildings, maxLightSize,
minBldgWidthPercent, maxBldgWidthPercent, minBldgHeightPercent, maxBldgHeightPercent);
generateBuildings(grid, margin, maxY, maxX, numberOfBuildings2, maxLightSize,
minBldgWidthPercent2, maxBldgWidthPercent2, minBldgHeightPercent2, maxBldgHeightPercent2);
// Identify areas to add artifacts to the buildings' sides and roofs.
const minHorSurfaceLength = 20;
const minVerSurfaceLength = 80;
const surfaces = identifyArtifactPlacements(grid, minHorSurfaceLength, minVerSurfaceLength);
placeArtifacts(surfaces, numberOfArtifactsToAttempt, grid, minHorSurfaceLength, minVerSurfaceLength);
// Create lights that only go into that 2D array
const colorScheme = generateColorScheme();
for(let x = 0; x < numberOfAttemptedLights; x ++){
let remainder = x % 100;
const lightIsStatic = remainder < percentOfLightsThatAreStatic;
createLight(margin, docHeight - bottomAreaHeight, docWidth, grid,
minLightSize, maxLightSize, lightIsStatic,
colorScheme, 4);
}
// Apply bg color
let everything = document.getElementById('everything');
everything.style.height = docHeight;
everything.classList.add(colorScheme.bgColor);
// Apply sun color and size
let sun = document.getElementById('sun');
if(sun !== undefined){
let sunSizePercent = generateRand(45, 80);
let sunSize = docWidth * sunSizePercent / 100;
let sunMarginPercent = generateRand(10,40);
let sunMargin = docHeight * sunMarginPercent / 100;
sun.style.width = sunSize;
sun.style.height = sunSize;
sun.style.borderRadius = sunSize + "px";
sun.style.transform = `translateY(${sunMargin}px)`;
sun.style.backgroundColor = colorScheme.sunColor;
}
// If in debug mode, print the color scheme number
//console.log("colorScheme: " + colorScheme.colorScheme);
})
function identifyArtifactPlacements(grid, minHorSurfaceLength, minVerSurfaceLength)
{
// Start on the left side. Find the rooftop there by starting at the bottom-left-most pixel
// and going up, 1 pixel at a time, till finding the roof of the left-most building.
// NOTE: this assumes that there is a left-most building.
let coord = {
x: 0,
y: 0
};
for(let y = 0; y < grid[0].length; y++){
let pixel = grid[0][y];
if(pixel === false){
coord = {
x: 0,
y: y
};
break;
}
}
// Go until reaching a corner. Then record the surface, turn the corner, and repeat.
let direction = "right";//can be "up", "down", or "right".
let surfaces = {
horizontalSurfaces: [],
verticalSurfaces: []
};
traverseCityScape(grid, surfaces, direction, coord);
// Discard any surfaces less than a certain length.
let newHorizontalSurfaces = [];
surfaces.horizontalSurfaces.forEach(s => {
if(s.length >= minHorSurfaceLength)
newHorizontalSurfaces.push(s);
});
let newVerticalSurfaces = [];
surfaces.verticalSurfaces.forEach(s => {
if(Math.abs(s.length) >= minVerSurfaceLength)
newVerticalSurfaces.push(s);
});
return {
horizontalSurfaces: newHorizontalSurfaces,
verticalSurfaces: newVerticalSurfaces,
};
}
// Recursive function to piece together all the surfaces of the buildings.
// Go until reaching a corner. Then record the surface, turn the corner, and repeat.
// direction: can be "up", "down", or "right".
function traverseCityScape(grid, surfaces, direction, coord){
// Go until reaching a corner.
let foundEndOfSegment = false;
let y = undefined;
let nextCoord = undefined;
switch(direction){
case "right":
let x = coord.x;
while(!foundEndOfSegment){
if(x === grid.length){
// We have reached the end of the screen. Return.
return;
}
nextCoord = grid[x + 1][coord.y];
let coordBeneathNextCoord = grid[x + 1][coord.y - 1];
if(nextCoord === true){
// We have reached a new building that goes taller than this one.
// Therefore we need to record this segment, and turn the corner up.
foundEndOfSegment = true;
surfaces.horizontalSurfaces.push({
startCoord: { x: coord.x, y: coord.y },
length: 1 + x - coord.x
});
traverseCityScape(grid, surfaces, "up", { x: x, y: coord.y });
}
else if(coordBeneathNextCoord === false){
// We have reached the end of this building's roof.
// Therefore we need to record this segment, and turn the corner down.
foundEndOfSegment = true;
surfaces.horizontalSurfaces.push({
startCoord: { x: coord.x, y: coord.y },
length: 1 + x - coord.x
});
traverseCityScape(grid, surfaces, "down", { x: x + 1, y: coord.y - 1 });
}
else{
// The next coord is empty and the coord beneath it is full. So we are still
// on the roof of this building. Therefore continue.
x++;
}
}
break;
case "up":
y = coord.y;
while(!foundEndOfSegment){
nextCoord = grid[coord.x][y + 1];
let coordRightOfNextCoord = grid[coord.x + 1][y + 1];
if(coordRightOfNextCoord === false){
// We have reached the top of this building.
// Therefore we need to record this segment, and turn the corner right.
foundEndOfSegment = true;
surfaces.verticalSurfaces.push({
startCoord: { x: coord.x, y: coord.y },//the y is wrong. should be 89, but is 335.
length: 1 + y - coord.y
});
traverseCityScape(grid, surfaces, "right", { x: coord.x + 1, y: y + 1 });
}
else{
// The coord right of next coord is full, so that means the building is continuing up.
// Therefore continue.
// Note: this assumes that no building reaches the very top of the screen.
y++;
}
}
break;
case "down":
y = coord.y;
while(!foundEndOfSegment){
if(y === 0){
// We have reached the bottom of the building at ground level.
// Therefore record this segment, and then skim along the ground to the next building,
// and pick up going up there.
foundEndOfSegment = true;
surfaces.verticalSurfaces.push({
startCoord: { x: coord.x, y: coord.y },
length: -1 * (1 + coord.y - y) // in this case, negative to indicate down direction
});
let groundX = coord.x + 1;
let groundHasEnded = false;
let screenHasEnded = false;
while(!groundHasEnded){
if(groundX === grid.length)
{
// We have reached the end of the screen.
groundHasEnded = true;
screenHasEnded = true;
}
else{
nextCoordRight = grid[groundX][0];
if(nextCoordRight === true)
// We have reached a building.
// Therefore we are done being at ground level, and can go up the new building.
groundHasEnded = true;
else
groundX++;
}
}
if(screenHasEnded)
return;
else
traverseCityScape(grid, surfaces, "up", { x: groundX - 1, y: 0 });
}
else{
nextCoord = grid[coord.x][y - 1];
if(nextCoord === true){
// We have reached the corner of a new building meeting this building's right side.
// Therefore we need to record this segment, and turn the corner right.
foundEndOfSegment = true;
surfaces.verticalSurfaces.push({
startCoord: { x: coord.x, y: coord.y },
length: y - 1 - coord.y
});
traverseCityScape(grid, surfaces, "right", { x: coord.x, y: y });
}
else{
// The next coordinate is empty. We have not reached the bottom of this building.
// Therefore continue.
y--;
}
}
}
break;
}
}
function generateBuildings(grid, margin, maxY, maxX, numberOfBuildings, maxLightSize,
minBldgWidthPercent, maxBldgWidthPercent, minBldgHeightPercent, maxBldgHeightPercent)
{
let buildings = [];
//Each building has a height and a width.
//The height can't be more than a certain percentage of the total. Same for width.
for(let i = 0; i < numberOfBuildings; i++)
{
//Pick a height and width.
let heightPercentage = generateRand(minBldgHeightPercent, maxBldgHeightPercent);
let height = maxY * heightPercentage / 100;
let widthPercentage = generateRand(minBldgWidthPercent, maxBldgWidthPercent);
let width = maxX * widthPercentage / 100;
//Now try to fit that into the grid.
const numberOfTries = 5;
const xMargin = 20;
let wasSuccessful = false;
for(let j = 0; j < numberOfTries; j++)
{
if(wasSuccessful === false){
//Pick an x coordinate at random from which to start the building.
//There's no point in picking one right at the beginning or end, and it can't
//be so close to the end that the building overflows off the edge of the screen.
let xCoord = 0;//The very first building will be all the way on the left.
if(i > 0 && i < numberOfBuildings - 1)//buildings in middle are picked random.
xCoord = generateRand(xMargin, maxX - xMargin - width);
if(i === numberOfBuildings - 1)//last building is close to the end
xCoord = Math.round(maxX - xMargin - width - 1);
//Determine if the building will validly fit given that xCoord.
wasSuccessful = true;//TODO
//If it fits, then end loop and create building.
if(wasSuccessful){
let building = {
Height: height,
Width: width,
XCoord: xCoord,
};
buildings.push(building);
createBuildingDiv(building, margin, maxX, maxY, maxLightSize);
addToGrid(building, grid);
//End loop as we have now been successful.
break;
}
}
}
}
}
function createBuildingDiv(building, margin, maxX, maxY, maxLightSize){
let cityscape = document.getElementById('cityscape');
let buildingDiv = document.createElement('div');
buildingDiv.classList.add("building");
buildingDiv.style.width = building.Width + maxLightSize + "px";
buildingDiv.style.height = building.Height + maxLightSize + "px";
buildingDiv.style.left = building.XCoord;
buildingDiv.style.top = maxY - building.Height;
cityscape.appendChild(buildingDiv);
}
function addToGrid(building, grid)
{
//the grid is x long to represent the x pixels wide.
//each element in the grid is an array y long to represent the y pixels high.
//Start at the x coordinate.
for(let x = building.XCoord; x < building.XCoord + building.Width + 1; x++)
{
//This is a vertical strip of the building, 1 pixel wide, and y pixels high.
for(let y = 0; y < building.Height + 1; y++)
{
// This is a single pixel in the strip. Add it to the grid.
grid[x][y] = true;
}
}
}
function pickRandomColor(color1, color2, color3, color4, NUMBER_OF_COLORS){
let num = generateRand(0, NUMBER_OF_COLORS);
let color = '';
switch(num){
case 1:
color = color1;
break;
case 2:
color = color2;
break;
case 3:
color = color3;
break;
case 4:
color = color4;
break;
}
return color;
}
2985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
