Generative Art with p5.js

Transcript

1. Generative Art with p5.js Vanessa Yuen @vanessayuenn artist unknown
2. @vanessayuenn Generative Art is... Art that is generated by a process (not necessarily code) somewhat autonomously Thx Wikipedia ❤
3. @vanessayuenn Art can be generated by... math sequence
4. @vanessayuenn Art can be generated by... shapes & geometry Art from sasj.tumblr.com Done with Hexels & Processing.
5. @vanessayuenn Art can be generated by... DNA???
6. @vanessayuenn Art can be generated by... sound
7. @vanessayuenn Art can be generated by... sound By Emily Xie; done with Processing. full vid: https://vimeo.com/179713914
8. @vanessayuenn
9. @vanessayuenn Processing? p5????? Processing is an open source programming language developed with an aim to make programming more accessible to non-programmers, especially visual artists. Thx Wikipedia ❤
10. @vanessayuenn Processing? p5????? is a Javascript reinterpretation of Processing. IT HAZ WEB!!!
11. @vanessayuenn Let's get started search for p5 in https://cdnjs.com/ https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js
12. @vanessayuenn Let's get started function setup() { } function draw() { }
13. @vanessayuenn Let's get started function setup() { } function draw() { } runs once loops FOREVER
14. @vanessayuenn Let's get started function setup() { createCanvas(600, 400); } function draw() { rect(100, 200, 50, 150); }
15. @vanessayuenn The Canvas function setup() { createCanvas(600, 400); } width: 600px height: 400px x = 0; y = 0 x = 0; y = 400 x = 600; y = 0
16. @vanessayuenn width: 600px height: 400px x = 0; y = 0 x = 0; y = 400 x = 600; y = 0 The Canvas function draw() { rect(100, 200, 150, 50); } (100,200) W 150 H 50
17. @vanessayuenn Line & Shapes rect(x, y, w, h); ellipse(x, y, w, h); line(x1, y1, x2, y2); triangle(x1, y1, x2, y2, x3, y3); ... AND MOAR! Go here http://p5js.org/reference/
18. @vanessayuenn Draw a few shapes on the canvas to start with Want a challenge? Try something like this Hint: 1. use loops 2. 'height' & 'width' are reserved words in p5 for canvas H & W)
19. @vanessayuenn Let's add some colors!
20. @vanessayuenn Let's add some colors! var c = color('Pink'); var c = color('#FFC0CB'); var c = color(255, 192, 203);
21. @vanessayuenn Let's add some colors! var c = color('Pink'); var c = color('#FFC0CB'); var c = color(255, 192, 203); var c = color(255, 192, 203, 75); R B G alpha [0 - 255]
22. @vanessayuenn Let's add some colors! var c = color('Pink'); var c = color('#FFC0CB'); var c = color(255, 192, 203); var c = color(255, 192, 203, 75); // 1 value = grayscale var gray = color(100);
23. @vanessayuenn Let's add some colors! var c = color(106, 90, 205, 120); background(c); stroke(c); fill(c); noStroke(); noFill();
24. @vanessayuenn Let's add some colors! var c = color(106, 90, 205, 120); background(c); stroke(c); fill(c); fill(106, 90, 205, 120); var arr = [106, 90, 205, 120]; fill(arr);
25. @vanessayuenn Let's add some colors! var c = color(106, 90, 205, 120); background(c); stroke(c); fill(c); fill(106, 90, 205, 120); var arr = [106, 90, 205, 120]; fill(arr); // set colors BEFORE drawing shapes stroke(50); fill(106, 90, 205, 120); rect(100, 200, 150, 50);
26. @vanessayuenn Let's add some colors! var c = color(106, 90, 205, 125); background(c); stroke(c); fill(c); function draw() { var c = color(100); stroke(c); c = color(106, 90, 205); fill(c); ellipse(300, 300, 50); }
27. @vanessayuenn Add colors to your shapes (& background)! Want a challenge? Make them different colors (hint: define a color palette array) var palette = [ [85,98,112], [199,244,100], [255,107,107] ]; fill(palette[0]);
28. @vanessayuenn Give it some MOVES succession of different images = ANIMATION
29. @vanessayuenn Give it some MOVES function setup() { } function draw() { } runs once loops FOREVER
30. @vanessayuenn Give it some MOVES function setup() { } function draw() { } runs once loops FOREVER p5's default frame rate: 60fps draw() gets executed 60 times per second
31. @vanessayuenn Give it some MOVES function setup() { } function draw() { } runs once loops FOREVER mouseX mouseY p5 exposes current mouse position as :
32. @vanessayuenn Give it some MOVES function setup() { } function draw() { } function mousePressed() { ellipse(mouseX, mouseY, 50, 50); } runs once loops FOREVER only when mouse is pressed More events http://p5js.org/reference/#Events
33. @vanessayuenn Make a drawing program! Want a challenge? Have the "brush" do a spray can/splatter effect (hint: use ) random()
34. @vanessayuenn Some useful functions // random returns a float random(min, max); round(random(0,20)); // same as Math.round()
35. @vanessayuenn Some useful functions // random returns a float random(min, max); round(random(0,20)); // same as Math.round() dist(x1, y1, x2, y2); // distance between (x1,y1) and (x2,y2)
36. @vanessayuenn Some useful functions // random returns a float random(min, max); round(random(0,20)); // same as Math.round() dist(x1, y1, x2, y2); // distance between (x1,y1) and (x2,y2) map(value, min1, max1, min2, max2);
37. @vanessayuenn Some useful functions // random returns a float random(min, max); round(random(0,20)); // same as Math.round() dist(x1, y1, x2, y2); // distance between (x1,y1) and (x2,y2) map(value, min1, max1, min2, max2); map value from [range1] to [range2] ☝ ☝ ☝
38. @vanessayuenn Some useful functions // random returns a float random(min, max); round(random(0,20)); // same as Math.round() dist(x1, y1, x2, y2); // distance between (x1,y1) and (x2,y2) map(mouseX, 0, 600, 0, 255); map value from [range1] to [range2] ☝ ☝ ☝
39. @vanessayuenn Change the color of the "brush" depending on your cursor location (hint: use ) map()
40. @vanessayuenn Other p5 Libraries http://p5js.org/libraries/
41. @vanessayuenn More Resources ✨ NYU's Integrated Digital Media course on Creative Coding: http://creative-coding.decontextualize.com/ ✨ Daniel Shiffman's youtube tutorials: https://www.youtube.com/user/shiffman/ ✨ Book: Nature of Code by Daniel Shiffman ✨ p5 Education Resources Page https://github.com/processing/p5.js/wiki/Education
42. @vanessayuenn THANK YOU!