I used to (and soon will again!) stream music and visuals on Twitch for a program my friend and I hosted called Eastern Bloc Party. We used programs to generate visual effects, and now that I've completed my Flatiron course, I wanted to learn how to use code to generate art.
There are many resources online decided to generative art. Right now, I am playing a lot with p5. P5 is a JavaScript library for creative coding.
This is the site:
https://p5js.org/
How to get started with P5...
Step 1. Make an HTML file and link p5, and your own JavaScript file.
Your HTML file should look something like this:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>p5</title>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
<script src="src/sinwave2.js"></script>
</body>
</html>
Step 2. Make a canvas in your JS file
I prefer to use the entire window as my canvas, so I use this, but windowWidth and windowHeight can each be replaced with the number of pixels that you want your canvas size to be:
function setup() {
createCanvas(windowWidth, windowHeight)
}
Step 3. Start drawing!
You would use the draw function for this.
Some of the fundamental things you would want to play with are strokes and colors for things like background. For example:
function draw() {
background('darkblue');
noStroke();
ellipse(50,50,80,80);
}
This will give you a circle. From there, you could change the fill, the size, or make it move!
Top comments (0)