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

Channel:
United States Steve's Makerspace
Subscribers:
7,360
Published on ● Video Link: https://www.youtube.com/watch?v=KytAyWVtr_8


Duration: 18:43
1,269 views
53

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



Other Videos By Steve's Makerspace


2022-07-17Art Maker WIP - p5.js generative art
2022-07-10Making Simple Patterns in p5.js
2022-06-26Fan Creations in Scrap Mechanic - including an entire city!
2022-06-25MidJourney - Awesome AI Art Generated from Text Prompts
2022-06-22Perlin Noise Art - p5.js
2022-06-09Color Mixing for Generative Artists in p5.js
2022-06-05Generative Art from a 3D Landscape in p5.js
2022-06-043D Landscape Generation in p5.js (no moving around)
2022-05-20Making Art from Random Photos - p5.js generative art
2022-05-16You Need to Protect Your API Keys in p5.js. Here's How.
2022-05-11I Made Art from Random Satellite Images: p5.js generative art / creative coding
2022-05-06What Does It Mean to Be An Artist? - p5.js generative art / creative coding
2022-04-20Rotating Tiles and Animation in Tiles - part 2 of Tile Sampling - p5.js Generative Art
2022-04-19Sample Part of an Image or Drawing, and Put Samples into Tiles - p5.js Generative Art
2022-04-17Finally Making Progress - Ancestors Game #2
2022-04-11I'm a Prehistoric Ape! - Ancestors survival game #1
2022-04-10Mashing Up My p5.js Generative Art with Deep Dream Generator Style Transfer to Create New Art
2022-04-07Revisiting My First World in Scrap Mechanic from 2016! (and not because someone else just did)
2022-04-04Wavy Lines Art-Maker in p5.js Generative Art
2022-04-03More Friends & More Interesting Workstations - Common'Hood #4
2022-04-01Exploring the Other Side - Common'Hood #3


Tags:
p5js
coding in p5js
the coding train
learn to code
art generator
computer art
digital art
generative art
algorithm art
dynamic painting
creative coding
processing art
p5js color
p5.js programming
digital painting
new media art
p5.js art maker
p5js display image
p5js get function
p5js get image
map art
load static satellite image
get satellite image
load Mapbox map p5.js
mappa p5.js
map api p5.js
replace colors p5.js
replace colors pixel array