Pixel World Map - p5.js

Developer
Tina Anastopoulos
Size
2,692 Kb
Views
40,480
  1. Pixel World Map - p5.js Previews
  2. Pixel World Map - p5.js HTML Codes
  3. Pixel World Map - p5.js CSS Codes
  4. Pixel World Map - p5.js JS Codes

How do I make an pixel world map - p5.js?

What is a pixel world map - p5.js? How do you make a pixel world map - p5.js? This script and codes were developed by Tina Anastopoulos on 31 August 2022, Wednesday.

Pixel World Map - p5.js Previews
IQ Test

Pixel World Map - p5.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pixel World Map - p5.js</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pixel World Map - p5.js - Script Codes CSS Codes

body {	background: rgb(25,25,112);
}
canvas {	display: block;	margin: auto;
}

Pixel World Map - p5.js - Script Codes JS Codes

/* ☜(⌒▽⌒)☞ */
var sideLength = 97,	tileSize = 8,	borderTiles = 5;
var dataStr = '000000000000000000000000000000000000100000010000011000000000000000000000000000000000000000000000000000000000000000000110001101111111111111111000011100000011111111111111000000000000000000000000000000000000000000000111100111100000000000000000000100000001110000011111000000000000000000000000000000000000111000010111000000111100111111001000000000000000110011111111111111111111111111111111111100000010111111111110000011111111011111111000000001111110100111011111111111111111110010000000000000000001111111111111111111111011101111000111000111111111011111111111111111111111111111111111000000000011111111111111111111100000000111000011000011110011111111111111111111111111111111111100000000000001111111111111111110000110100011000000001100111000111111111111111111111111111111100111100000000000110001111111111111100111110000000000001110000001111111111111111111111111111110000010000000000111100000111111111111110011111110000000000111011111111111111111111111111111111111111001110000000000000000011111111111111011111111000000000001101111111111111111111111111111111111111000011000000000000000000011111111111111111101000000000000001111111111101001111111111111111111111110000100000000000000000011111111111101111110100000000000011111111110100100011111111111111111111111011000000000000000000011111111111111111000000000000000011100101010111111001111111111111111111110001000000000000000000011111111111111100100000000000000000110000101011111100111111111111111110001100110000000000000000000111111111111100000000000000000000001111000000001111111111111111111111110010110000000000000000000001111111111110000000000000000000011111110110000111111111111111111111111100011000000000000000000000111111111110000000000000000000001111111111111111111111111111111111111111001000000000000000000000011111000001000000000000000000001111111111111111110011011111111111111111100000000000000000000000000011100000000000000000000000001111111111111111011111100011111111111111100000000000000000000000000011110010111000000000000000001111111111111111100111110001111110111101000000000000000000000000000000011001001110000000000000000011111111111111110011111000011110011111000100000000000000000000000000001111000101110000000000000011111111111111111111111000001110000011100011100000000000000000000000000100111000000000000000000001111111111111111111000000000011000001111000110000000000000000000000000000001100010000000000000000011111111111111111111100000001100000101100000110000000000000000000000000000011110101000000000000000111111111111111111110000000111000101000010111000000000000000000000000000000111111111000000000000001110111111111111110000000000100010100101000000000000000000000000000000000000111111110000000000000000000111111111110000000000000000100011100000000000000000000000000000000000111111111010000000000000000011111111110000000000000000001101101110101000000000000000000000000000111111111111100000000000000000111111111000000000000000000010010100111110011000000000000000000000011111111111111100000000000000011111110000000000000000000001110000000101111100000000000000000000001111111111111110000000000000001111111000000000000000000000011011110011111011000000000000000000000111111111111111000000000000000011111100000000000000000000000000110000000000100000000000000000000000111111111111000000000000000111111111000110000000000000000000000011110000000000000000000000000000011111111111100000000000000011111111100110000000000000000000011111101100000000000000000000000000000011111111110000000000000001111111100111100000000000000000111111111110000000000000000000000000000001111111111000000000000000011111110011100000000000000000001111111111000000000000000000000000000000111111110000000000000000000111110001110000000000000000001111111111111000000000000000000000000000011111110000000000000000000011111000000000000000000000011111111111111100000000000000000000000000001111111000000000000000000000111000000000000000000000000111111111111100000000000000000000000000000111110100000000000000000000011000000000000000000000000000000011111100000100000000000000000000000011111000000000000000000000000000000000000000000000000000000000111100000011000000000000000000000000110000000000000000000000000000000000000000000000000000000000000000000001100000000000000000000000010000000000000000000000000000000000000000000000000000000000000111000101000000000000000000000000011100000000000000000000000000000000000000000000000000000000000001000110000000000000000000000000000110000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000011000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000011000000000000000000000000000000000000000000000000000000000000000000000';
var mapArray = dataStr.split("");
var mapColor = function (min, max) { return Math.random() * (max - min) + min;
}
function setup() { var s = (sideLength + borderTiles * 2) * tileSize; createCanvas(s, s); stroke(100);	background(25,25,112);
}
function draw() {	var pixel; var offset = borderTiles * tileSize; translate(offset, offset);	for (var y = 0; y < sideLength; y++) {	for (var x = 0; x < sideLength; x++) {	pixel = parseInt(mapArray[x + y * sideLength]);	if (pixel === 1) {	// monochromatic range	fill(mapColor(150,250));	//uncomment below for color	//fill(random(250),random(250),random(250));	rect(x * tileSize, y * tileSize, tileSize, tileSize); } } } frameRate(5);
}
Pixel World Map - p5.js - Script Codes
Pixel World Map - p5.js - Script Codes
Home Page Home
Developer Tina Anastopoulos
Username TWAIN
Uploaded August 31, 2022
Rating 4
Size 2,692 Kb
Views 40,480
Do you need developer help for Pixel World Map - p5.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tina Anastopoulos (TWAIN) Script Codes
Name
Fruity Frenzy
Hollow Cube
Donut
Dash Holiday Tree
Octagram Swirl
Lens Illusion - p5.js
Rainbow Pinwheel - p5.js
Weight a Minute - Error 404
Mandala Outline
Cone Illusion
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!