I Made Art from Random Satellite Images: p5.js generative art / creative coding

Описание

In this video, I show off generative art I'm making in p5.js by pulling Mapbox satellite maps (and some from Google Maps), then distorting the image and replacing the colors. I explain how it's done and go over most of the code. You'll learn how to put a static satellite map into your canvas, and how to replace the colors of an image. creative coding

The Map Art Code - NOTE - This will not work unless you get your own Mapbox API key - see below:
https://editor.p5js.org/StevesMakerspace/sketches/GJPAC__mh

Get your Mapbox API key here:
https://account.mapbox.com/auth/signup/

Mappa stuff, which makes it easier to bring maps into p5:
https://mappa.js.org/docs/introduction-to-web-maps.html

Code for just loading a Mapbox map (needs an API key to work):
https://editor.p5js.org/StevesMakerspace/sketches/al6lqIKJX

Code for just loading a Google map (needs an API key to work):
https://editor.p5js.org/StevesMakerspace/sketches/0taq-8Jpx0

Get a Google maps API key:
https://developers.google.com/maps

Color replace rainbow example:
https://editor.p5js.org/StevesMakerspace/sketches/X0z5mcTMH

Tile Sampling video, part 1 - basic tile sampling:
https://youtu.be/3fUVUS4I3qM

Tile Sampling video, part 2 - rotating tiles
https://youtu.be/rErcRdABk7k

Making tiles different sizes at 14:10
and Using Perlin noise create white space at 15:06:
https://www.youtube.com/watch?v=6fa6i_Kd34A

Coding Train video on the Pixel Array:
https://youtu.be/nMUMZ5YRxHI

Coding Train playlist on working with API's:
https://www.youtube.com/watch?v=DbcLg8nRWEg&list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X

https://www.mapbox.com/about/maps/
https://www.openstreetmap.org/copyright

Join my Discord: https://discord.gg/FSW6zzU

Follow me on Twitter: https://twitter.com/SteveMakerspace

Music:
Funk Down (Sting) by MK2 (theme)

0:00 Intro
0:40 The basics and options
3:19 Shift factor - replacing colors
8:25 Getting a map image from Mapbox
11:45 Code after loading image
12:55 Filters and attempts to replace colors
14:19 Replacing colors using a color palette table