Tweet
Tweet

Slide 1

Slide 1 text

Generative Art with p5.js Vanessa Yuen @vanessayuenn artist unknown

Slide 2

Slide 2 text

@vanessayuenn Generative Art is... Art that is generated by a process (not necessarily code) somewhat autonomously Thx Wikipedia ❤

Slide 3

Slide 3 text

@vanessayuenn Art can be generated by... math sequence

Slide 4

Slide 4 text

@vanessayuenn Art can be generated by... shapes & geometry Art from sasj.tumblr.com Done with Hexels & Processing.

Slide 5

Slide 5 text

@vanessayuenn Art can be generated by... DNA???

Slide 6

Slide 6 text

@vanessayuenn Art can be generated by... sound

Slide 7

Slide 7 text

@vanessayuenn Art can be generated by... sound By Emily Xie; done with Processing. full vid: https://vimeo.com/179713914

Slide 8

Slide 8 text

@vanessayuenn

Slide 9

Slide 9 text

@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 ❤

Slide 10

Slide 10 text

@vanessayuenn Processing? p5????? is a Javascript reinterpretation of Processing. IT HAZ WEB!!!

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

@vanessayuenn Let's get started function setup() { } function draw() { }

Slide 13

Slide 13 text

@vanessayuenn Let's get started function setup() { } function draw() { } runs once loops FOREVER

Slide 14

Slide 14 text

@vanessayuenn Let's get started function setup() { createCanvas(600, 400); } function draw() { rect(100, 200, 50, 150); }

Slide 15

Slide 15 text

@vanessayuenn The Canvas function setup() { createCanvas(600, 400); } width: 600px height: 400px x = 0; y = 0 x = 0; y = 400 x = 600; y = 0

Slide 16

Slide 16 text

@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

Slide 17

Slide 17 text

@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/

Slide 18

Slide 18 text

@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)

Slide 19

Slide 19 text

@vanessayuenn Let's add some colors!

Slide 20

Slide 20 text

@vanessayuenn Let's add some colors! var c = color('Pink'); var c = color('#FFC0CB'); var c = color(255, 192, 203);

Slide 21

Slide 21 text

@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]

Slide 22

Slide 22 text

@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);

Slide 23

Slide 23 text

@vanessayuenn Let's add some colors! var c = color(106, 90, 205, 120); background(c); stroke(c); fill(c); noStroke(); noFill();

Slide 24

Slide 24 text

@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);

Slide 25

Slide 25 text

@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);

Slide 26

Slide 26 text

@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); }

Slide 27

Slide 27 text

@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]);

Slide 28

Slide 28 text

@vanessayuenn Give it some MOVES succession of different images = ANIMATION

Slide 29

Slide 29 text

@vanessayuenn Give it some MOVES function setup() { } function draw() { } runs once loops FOREVER

Slide 30

Slide 30 text

@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

Slide 31

Slide 31 text

@vanessayuenn Give it some MOVES function setup() { } function draw() { } runs once loops FOREVER mouseX mouseY p5 exposes current mouse position as :

Slide 32

Slide 32 text

@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

Slide 33

Slide 33 text

@vanessayuenn Make a drawing program! Want a challenge? Have the "brush" do a spray can/splatter effect (hint: use ) random()

Slide 34

Slide 34 text

@vanessayuenn Some useful functions // random returns a float random(min, max); round(random(0,20)); // same as Math.round()

Slide 35

Slide 35 text

@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)

Slide 36

Slide 36 text

@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);

Slide 37

Slide 37 text

@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] ☝ ☝ ☝

Slide 38

Slide 38 text

@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] ☝ ☝ ☝

Slide 39

Slide 39 text

@vanessayuenn Change the color of the "brush" depending on your cursor location (hint: use ) map()

Slide 40

Slide 40 text

@vanessayuenn Other p5 Libraries http://p5js.org/libraries/

Slide 41

Slide 41 text

@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

Slide 42

Slide 42 text

@vanessayuenn THANK YOU!