├── .gitignore ├── 02_Drawing ├── README ├── CodingTrainBasicShapes │ └── CodingTrainExample1.pde ├── CodingTrainShapesWithColor │ └── CodingTrainExample2.pde ├── abstract_sketch │ └── abstract_sketch.pde ├── Zoog │ └── Zoog.pde ├── self_portrait │ └── self_portrait.pde ├── spaceship │ └── spaceship.pde ├── flower │ └── flower.pde ├── spaceship_color │ └── spaceship_color.pde ├── alien │ └── alien.pde ├── flower_color │ └── flower_color.pde └── alien_color │ └── alien_color.pde ├── 08_Functions ├── README.md ├── lollipops │ └── lollipops.pde ├── conversion_function │ └── conversion_function.pde ├── unicorn_only │ └── unicorn_only.pde ├── rainbow_unicorn_puppy │ └── rainbow_unicorn_puppy.pde └── lollipops_animated │ └── lollipops_animated.pde ├── 10_ConfettiProject ├── README.MD ├── confetti_party │ ├── Confetti.pde │ └── confetti_party.pde ├── confetti_party_rotate │ ├── confetti_party_rotate.pde │ └── Confetti.pde └── confetti_party_ArrayList │ ├── confetti_party_ArrayList.pde │ └── Confetti.pde ├── 09_ClassesAndObjects ├── README.MD ├── bubble_example │ ├── bubble_example.pde │ └── Bubble.pde ├── bubble_example_arguments │ ├── Bubble.pde │ └── bubble_example_arguments.pde ├── bubbles_and_rain │ ├── RainDrop.pde │ ├── Bubble.pde │ └── bubbles_and_rain.pde ├── bubbles_and_rain_pop │ ├── RainDrop.pde │ ├── bubbles_and_rain_pop.pde │ └── Bubble.pde ├── flower_example │ ├── flower_example.pde │ └── flower_class.pde └── bubble_mouse_interaction │ ├── Bubble.pde │ └── bubble_mouse_interaction.pde ├── img ├── outline.png └── video-thumb.jpg ├── .github └── FUNDING.yml ├── 04_Variables ├── paintbrush_plain │ └── paintbrush_plain.pde ├── mouse_width_variables │ └── mouse_width_variables.pde ├── random_lines │ └── random_lines.pde ├── paintbrush_mouse_random │ └── paintbrush_mouse_random.pde ├── paintbrush_random │ └── paintbrush_random.pde ├── circle_y_only │ └── circle_y_only.pde ├── circle_grow │ └── circle_grow.pde ├── circles_fade_out │ └── circles_fade_out.pde └── random_house │ └── random_house.pde ├── 05_Conditionals ├── ball_turn_around │ └── ball_turn_around.pde ├── circle_rollover │ └── circle_rollover.pde ├── rows_conditional │ └── rows_conditional.pde ├── bouncingBall_gravity │ └── bouncingBall_gravity.pde ├── paintbrush_conditional │ └── paintbrush_conditional.pde ├── four_sections │ └── four_sections.pde ├── bouncingBall_changingColor │ └── bouncingBall_changingColor.pde ├── bouncingBall_changingSize │ └── bouncingBall_changingSize.pde ├── bouncingBall_changingSpeed │ └── bouncingBall_changingSpeed.pde └── bouncingBall_buttonInterface │ └── bouncingBall_buttonInterface.pde ├── 06_Loops ├── vertical_stripes │ └── vertical_stripes.pde ├── horizontal_stripes │ └── horizontal_stripes.pde ├── concentric_circles │ └── concentric_circles.pde ├── grid_circles │ └── grid_circles.pde ├── grid_changing_size │ └── grid_changing_size.pde └── checkerboard │ └── checkerboard.pde ├── LICENSE ├── 07_Arrays ├── fruit_array_index1 │ └── fruit_array_index1.pde ├── fruit_array_index2 │ └── fruit_array_index2.pde ├── color_palette_array │ └── color_palette_array.pde ├── fruit_data_viz │ └── fruit_data_viz.pde ├── fruit_data_viz_sum │ └── fruit_data_viz_sum.pde └── fruit_data_viz_average │ └── fruit_data_viz_average.pde ├── 03_Flow ├── alien_antennas │ └── alien_antennas.pde └── alien_frown │ └── alien_frown.pde └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /02_Drawing/README: -------------------------------------------------------------------------------- 1 | #code examples for The Basics video 2 | -------------------------------------------------------------------------------- /08_Functions/README.md: -------------------------------------------------------------------------------- 1 | code examples for function chapter 2 | -------------------------------------------------------------------------------- /10_ConfettiProject/README.MD: -------------------------------------------------------------------------------- 1 | #confetti project examples 2 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/README.MD: -------------------------------------------------------------------------------- 1 | #code examples for classes and objects chapter 2 | -------------------------------------------------------------------------------- /img/outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingTrain/Creative-Coding-Processing-Full-Course/HEAD/img/outline.png -------------------------------------------------------------------------------- /img/video-thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingTrain/Creative-Coding-Processing-Full-Course/HEAD/img/video-thumb.jpg -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | github: CodingTrain 3 | patreon: codingtrain 4 | custom: ['https://youtube.com/thecodingtrain/join', 'https://go.nebula.tv/codingtrain'] 5 | -------------------------------------------------------------------------------- /02_Drawing/CodingTrainBasicShapes/CodingTrainExample1.pde: -------------------------------------------------------------------------------- 1 | size(640, 360); 2 | 3 | 4 | circle(500, 180, 100); 5 | 6 | rectMode(CENTER); 7 | square(100, 180, 100); 8 | 9 | line(100, 180, 500, 180); 10 | -------------------------------------------------------------------------------- /02_Drawing/CodingTrainShapesWithColor/CodingTrainExample2.pde: -------------------------------------------------------------------------------- 1 | size(640, 360); 2 | background(255, 0, 150); 3 | 4 | noStroke(); 5 | fill(99, 50, 200); 6 | circle(500, 180, 150); 7 | 8 | strokeWeight(4); 9 | stroke(100, 150, 200, 255); 10 | noFill(); 11 | rectMode(CENTER); 12 | square(400, 180, 100); 13 | -------------------------------------------------------------------------------- /04_Variables/paintbrush_plain/paintbrush_plain.pde: -------------------------------------------------------------------------------- 1 | // Paintbrush: plain 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | void setup() { 6 | size(640, 320); 7 | pixelDensity(2); 8 | background(255); 9 | } 10 | 11 | void draw() { 12 | noStroke(); 13 | fill(0); 14 | circle(mouseX, mouseY, 24); 15 | } 16 | -------------------------------------------------------------------------------- /05_Conditionals/ball_turn_around/ball_turn_around.pde: -------------------------------------------------------------------------------- 1 | // Ball turning around 2 | 3 | float x = 0; 4 | float speed = 4; 5 | void setup() { 6 | size(640, 360); 7 | pixelDensity(2); 8 | } 9 | 10 | void draw() { 11 | background(0); 12 | noStroke(); 13 | fill(255); 14 | 15 | circle(x, height/2, 48); 16 | 17 | x = x + speed; 18 | 19 | if (x > width) { 20 | speed = -4; 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /06_Loops/vertical_stripes/vertical_stripes.pde: -------------------------------------------------------------------------------- 1 | // Vertical Stripes 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float w = 20; 6 | 7 | void setup() { 8 | size(640, 360); 9 | pixelDensity(2); 10 | } 11 | 12 | void draw() { 13 | background(0); 14 | fill(255); 15 | noStroke(); 16 | for (float x = 0; x < width; x += w * 2) { 17 | rect(x, 0, w, height); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /06_Loops/horizontal_stripes/horizontal_stripes.pde: -------------------------------------------------------------------------------- 1 | // Horizontal Stripes 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float h = 20; 6 | 7 | void setup() { 8 | size(640, 360); 9 | pixelDensity(2); 10 | } 11 | 12 | void draw() { 13 | background(0); 14 | fill(255); 15 | noStroke(); 16 | for (float y = 0; y < height; y += h * 2) { 17 | rect(0, y, width, h); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /04_Variables/mouse_width_variables/mouse_width_variables.pde: -------------------------------------------------------------------------------- 1 | // Variables example using mouseX, mouseY, width, height 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | void setup(){ 5 | size(640, 320); 6 | pixelDensity(2); 7 | } 8 | 9 | void draw(){ 10 | background(255); 11 | line(mouseX, 0, mouseX, height); // vertical line 12 | line(0, mouseY, width, mouseY); // horizontal line 13 | } 14 | -------------------------------------------------------------------------------- /02_Drawing/abstract_sketch/abstract_sketch.pde: -------------------------------------------------------------------------------- 1 | // Abstract 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | size(640, 360); //canvas size 6 | pixelDensity(2); 7 | 8 | background(255); //set background color 9 | noFill(); // don't fill the shapes 10 | strokeWeight(50); //line thickness 11 | 12 | line(0, 120, 500, 400); 13 | 14 | circle(300, 150, 200); 15 | 16 | rectMode(CENTER); 17 | square(515, 240, 200); 18 | -------------------------------------------------------------------------------- /06_Loops/concentric_circles/concentric_circles.pde: -------------------------------------------------------------------------------- 1 | // Concentric circles 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | void setup(){ 6 | size(640, 360); 7 | pixelDensity(2); 8 | } 9 | 10 | void draw(){ 11 | background(0); 12 | noFill(); 13 | stroke(255); 14 | strokeWeight(2); 15 | 16 | for(float radius = 10; radius < 150; radius +=10){ 17 | circle(width/2, height/2, radius*2); 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /02_Drawing/Zoog/Zoog.pde: -------------------------------------------------------------------------------- 1 | size(480, 270); 2 | rectMode(CENTER); 3 | colorMode(RGB, 255, 255, 255, 100); 4 | background(100, 0, 150); 5 | 6 | // Legs 7 | stroke(255, 255, 0); 8 | strokeWeight(8); 9 | line(235, 180, 220, 205); 10 | line(245, 180, 260, 205); 11 | 12 | // Body 13 | noStroke(); 14 | fill(255, 150, 200, 75); 15 | rect(240, 145, 25, 100); 16 | 17 | // Head 18 | fill(255, 200, 100); 19 | circle(240, 115, 60); 20 | 21 | // Eyes 22 | fill(0, 150, 255); 23 | ellipse(221, 115, 16, 32); 24 | ellipse(259, 115, 16, 32); 25 | -------------------------------------------------------------------------------- /04_Variables/random_lines/random_lines.pde: -------------------------------------------------------------------------------- 1 | // Random Lines 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float x1, y1, x2, y2; 6 | 7 | void setup() { 8 | size(640, 360); 9 | pixelDensity(2); 10 | background(0); 11 | } 12 | 13 | void draw() { 14 | stroke(random(150, 255), random(100, 250), 0, 200); 15 | strokeWeight(random(1, 4)); 16 | x1 = random(width); 17 | y1 = random(height); 18 | x2 = x1 + random(-50, 50); 19 | y2 = y1 + random(-50, 50); 20 | line(x1, y1, x2, y2); 21 | } 22 | -------------------------------------------------------------------------------- /06_Loops/grid_circles/grid_circles.pde: -------------------------------------------------------------------------------- 1 | // Grid of circles 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float spacing = 40; 6 | void setup() { 7 | size(640, 360); 8 | pixelDensity(2); 9 | } 10 | 11 | void draw() { 12 | background(0); 13 | fill(255); 14 | noStroke(); 15 | 16 | for (float x = 0; x <= width; x+=spacing) { 17 | for (float y = 0; y <= height; y+=spacing) { 18 | circle(x + spacing/2, y + spacing/2, spacing); 19 | } 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubble_example/bubble_example.pde: -------------------------------------------------------------------------------- 1 | // Bubble class 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | Bubble bub0; 6 | Bubble bub1; //add second bubble 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | 12 | //initialize bubbles 13 | bub0 = new Bubble(); 14 | bub1 = new Bubble(); 15 | } 16 | 17 | void draw() { 18 | background(255); 19 | 20 | //show and update bubbles 21 | bub0.update(); 22 | bub0.edges(); 23 | bub0.show(); 24 | 25 | bub1.update(); 26 | bub1.edges(); 27 | bub1.show(); 28 | } 29 | -------------------------------------------------------------------------------- /04_Variables/paintbrush_mouse_random/paintbrush_mouse_random.pde: -------------------------------------------------------------------------------- 1 | // Paintbrush: random color when mouse pressed 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float r, g, b; 6 | 7 | void setup() { 8 | size(640, 320); 9 | pixelDensity(2); 10 | background(255); 11 | 12 | r = 255; 13 | g = 250; 14 | b = 150; 15 | } 16 | 17 | void draw() { 18 | fill(r, g, b); 19 | noStroke(); 20 | circle(mouseX, mouseY, 24); 21 | } 22 | 23 | void mousePressed() { 24 | // background(255); 25 | r = random(255); 26 | g = random(255); 27 | b = random(255); 28 | } 29 | -------------------------------------------------------------------------------- /04_Variables/paintbrush_random/paintbrush_random.pde: -------------------------------------------------------------------------------- 1 | // Paintbrush: random color/random size 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | void setup(){ 5 | size(640, 320); 6 | pixelDensity(2); 7 | background(255); 8 | } 9 | 10 | void draw(){ 11 | float randRed = random(255); 12 | float randBlue = random(50, 150); 13 | float randGreen = random(150, 255); 14 | 15 | fill(randRed, randBlue, randGreen); 16 | noStroke(); 17 | circle(mouseX, mouseY, random(10, 50)); 18 | } 19 | 20 | void mousePressed(){ 21 | background(255); 22 | } 23 | -------------------------------------------------------------------------------- /10_ConfettiProject/confetti_party/Confetti.pde: -------------------------------------------------------------------------------- 1 | class Confetti { 2 | float x, y; 3 | float xspeed, yspeed; 4 | Confetti() { 5 | x = -1000; 6 | y = -1000; 7 | xspeed = 0; 8 | yspeed = 0; 9 | } 10 | 11 | void burst(float mx, float my) { 12 | x = mx; 13 | y = my; 14 | xspeed = random(-5, 5); 15 | yspeed = random(-5, 5); 16 | } 17 | 18 | void update(){ 19 | x = x + xspeed; 20 | y = y + yspeed; 21 | 22 | yspeed = yspeed + 0.1; 23 | } 24 | 25 | void show() { 26 | fill(0); 27 | rectMode(CENTER); 28 | square(x, y, 10); 29 | } 30 | 31 | } 32 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubble_example/Bubble.pde: -------------------------------------------------------------------------------- 1 | class Bubble { 2 | float x, y, r; 3 | color bubCol; 4 | Bubble() { 5 | x = random(width); 6 | y = height; 7 | r = random(32, 128); 8 | bubCol = color(random(100, 255), random(100, 200), 255); //bubble color 9 | } 10 | 11 | void update() { 12 | y = y - random(1, 4); 13 | x = x + random(-1, 1); 14 | } 15 | 16 | void show() { 17 | strokeWeight(4); 18 | fill(bubCol); 19 | circle(x, y, r*2); 20 | } 21 | 22 | void edges() { 23 | //place bubble back at the bottom of canvas 24 | if (y < -r) { 25 | y = height + r/2; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubble_example_arguments/Bubble.pde: -------------------------------------------------------------------------------- 1 | class Bubble { 2 | float x, y, r; 3 | color bubCol; 4 | Bubble(float _x, float _r) { 5 | x = _x; 6 | y = 360; 7 | r = _r; 8 | bubCol = color(255, 192, 203); //bubble color 9 | } 10 | 11 | void update() { 12 | y = y - random(1, 4); 13 | x = x + random(-1, 1); 14 | } 15 | 16 | void show() { 17 | strokeWeight(4); 18 | fill(bubCol); 19 | circle(x, y, r*2); 20 | } 21 | 22 | void edges() { 23 | //place bubble back at the bottom of canvas 24 | if (y < -r) { 25 | y = height + r/2; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubble_example_arguments/bubble_example_arguments.pde: -------------------------------------------------------------------------------- 1 | // Two bubbles 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | Bubble bub0; 6 | Bubble bub1; //add second bubble 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | 12 | //initialize bubbles 13 | bub0 = new Bubble(100, 10); 14 | bub1 = new Bubble(500, 100); 15 | } 16 | 17 | void draw() { 18 | background(255); 19 | 20 | //show and update bubbles 21 | bub0.update(); 22 | bub0.edges(); 23 | bub0.show(); 24 | 25 | bub1.update(); 26 | bub1.edges(); 27 | bub1.show(); 28 | } 29 | -------------------------------------------------------------------------------- /02_Drawing/self_portrait/self_portrait.pde: -------------------------------------------------------------------------------- 1 | // Self Portrait 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | size(640, 360); //canvas size 6 | pixelDensity(2); 7 | 8 | background(255); //set background color 9 | rectMode(CENTER); 10 | //body 11 | rect(320, 180 + 125, 160, 150); 12 | triangle(320 - 80, 180 + 50, 320, 360, 320 + 80, 180+50); 13 | 14 | //head 15 | circle(320, 180, 150); 16 | 17 | //eyes 18 | circle(320 - 30, 180 - 15, 25); 19 | square(320 + 30, 180 - 15, 30); 20 | 21 | //eyebrows 22 | rect(320 - 30, 180 - 25, 50, 10); 23 | rect(320 + 30, 180 - 45, 50, 10); 24 | 25 | //mouth 26 | arc(320, 180+25, 50, 50, 0, PI, CLOSE); 27 | -------------------------------------------------------------------------------- /02_Drawing/spaceship/spaceship.pde: -------------------------------------------------------------------------------- 1 | // Spaceship 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | size(640, 360); //canvas size 6 | pixelDensity(2); 7 | 8 | background(255); //set background color 9 | strokeWeight(2); //line thickness 10 | 11 | noFill(); 12 | ellipse(320, 180 - 70 + 35, 300, 150); 13 | circle(320, 180 + 5, 20); 14 | circle(320 + 75, 180 - 10, 20); 15 | circle(320 - 75, 180 - 10, 20); 16 | circle(320 - 120, 180 - 50, 20); 17 | circle(320 + 120, 180 - 50, 20); 18 | 19 | fill(240); 20 | ellipse(320, 180 - 70, 200, 100); 21 | 22 | line(320 - 100, 180 + 30, 320 - 200, 180 + 200); 23 | line(320 + 100, 180 + 30, 320 + 200, 180 + 200); 24 | -------------------------------------------------------------------------------- /10_ConfettiProject/confetti_party/confetti_party.pde: -------------------------------------------------------------------------------- 1 | // Confetti Party!!! 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | Confetti[] confetti = new Confetti[100]; 6 | boolean partyTime = false; 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | 12 | for (int i = 0; i < confetti.length; i++) { 13 | confetti[i] = new Confetti(); 14 | } 15 | } 16 | 17 | void mousePressed() { 18 | partyTime = true; 19 | for (Confetti c : confetti) { 20 | c.burst(mouseX, mouseY); 21 | } 22 | } 23 | 24 | void draw() { 25 | background(255); 26 | if (partyTime) { 27 | for (Confetti c : confetti) { 28 | c.show(); 29 | c.update(); 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubbles_and_rain/RainDrop.pde: -------------------------------------------------------------------------------- 1 | class RainDrop { 2 | float x, y, r; 3 | float yspeed; 4 | 5 | color dropColor; 6 | RainDrop(float _x, float _y) { 7 | x = _x; 8 | y = _y; 9 | yspeed = 0; 10 | r = 10; 11 | dropColor = color(0, 0, 255); 12 | } 13 | 14 | void update() { 15 | y = y + yspeed; 16 | yspeed += 0.1; 17 | } 18 | 19 | void show() { 20 | noStroke(); 21 | fill(dropColor); 22 | for (float i = 1; i < 10; i++) { 23 | circle(x, y-i, r-i); //bubble 24 | } 25 | } 26 | 27 | void edges() { 28 | //place bubble back at the bottom of canvas 29 | if (y > height + r) { 30 | y = -height; 31 | yspeed = 0; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubbles_and_rain_pop/RainDrop.pde: -------------------------------------------------------------------------------- 1 | class RainDrop { 2 | float x, y, r; 3 | float yspeed; 4 | 5 | color dropColor; 6 | RainDrop(float _x, float _y) { 7 | x = _x; 8 | y = _y; 9 | yspeed = 0; 10 | r = 10; 11 | dropColor = color(0, 0, 255); 12 | } 13 | 14 | void update() { 15 | y = y + yspeed; 16 | yspeed += 0.1; 17 | } 18 | 19 | void show() { 20 | noStroke(); 21 | fill(dropColor); 22 | for (float i = 1; i < 10; i++) { 23 | circle(x, y-i, r-i); //bubble 24 | } 25 | } 26 | 27 | void edges() { 28 | //place bubble back at the bottom of canvas 29 | if (y > height + r) { 30 | y = -height; 31 | yspeed = 0; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /02_Drawing/flower/flower.pde: -------------------------------------------------------------------------------- 1 | // Flower 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | size(640, 360); //canvas size 6 | pixelDensity(2); 7 | 8 | background(0); //set background color 9 | 10 | stroke(0); //black outline 11 | rect(320-5, 180, 10, 320); 12 | 13 | noStroke(); //no circle outline 14 | 15 | //petals 16 | circle(320 + 50, 180, 50); 17 | circle(320 - 50, 180, 50); 18 | circle(320, 180 + 50, 50); 19 | circle(320, 180 - 50, 50); 20 | circle(320 - 37.5, 180 - 37.5, 50); 21 | circle(320 + 37.5, 180 + 37.5, 50); 22 | circle(320 - 37.5, 180 + 37.5, 50); 23 | circle(320 + 37.5, 180 - 37.5, 50); 24 | 25 | stroke(0); //black outline 26 | circle(320, 180, 85); //flower center 27 | -------------------------------------------------------------------------------- /04_Variables/circle_y_only/circle_y_only.pde: -------------------------------------------------------------------------------- 1 | // Circle - move y only 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | // 1: Declare and 2: initialize the variable! 6 | float circleX, circleY, circleSize; 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | circleSize = 48; 12 | circleX = width/2; 13 | circleY = 3*height/4; 14 | background(0); 15 | } 16 | 17 | void mousePressed() { 18 | //reset when mouse is pressed! 19 | circleY = 3*height/4; 20 | } 21 | 22 | void draw() { 23 | background(0); 24 | 25 | // Use the variables! 26 | noStroke(); 27 | fill(255); 28 | circle(circleX, circleY, circleSize); 29 | 30 | /*1: Gradually move circle up*/ 31 | circleY = circleY - 1; 32 | } 33 | -------------------------------------------------------------------------------- /05_Conditionals/circle_rollover/circle_rollover.pde: -------------------------------------------------------------------------------- 1 | // Circle rollover 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float xpos, ypos, radius; 6 | void setup() { 7 | size(640, 360); 8 | pixelDensity(2); 9 | xpos = width/2; 10 | ypos = height/2; 11 | radius = 100; 12 | } 13 | 14 | void draw() { 15 | background(0); 16 | stroke(255); 17 | strokeWeight(4); 18 | 19 | //Check the distance of the mouse from center of circle 20 | float distance = dist(mouseX, mouseY, xpos, ypos); 21 | 22 | //If mouse is within circle, fill white 23 | if (distance < radius) { 24 | fill(255); 25 | } else { 26 | fill(175); 27 | } 28 | 29 | circle(xpos, ypos, radius*2); 30 | } 31 | -------------------------------------------------------------------------------- /02_Drawing/spaceship_color/spaceship_color.pde: -------------------------------------------------------------------------------- 1 | // Spaceship 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | size(640, 360); //canvas size 6 | pixelDensity(2); 7 | 8 | background(45, 197, 244); //set background color 9 | strokeWeight(2); //line thickness 10 | 11 | fill(240, 99, 164); 12 | ellipse(320, 180 - 70 + 35, 300, 150); 13 | circle(320, 180 + 5, 20); 14 | circle(320 + 75, 180 - 10, 20); 15 | circle(320 - 75, 180 - 10, 20); 16 | circle(320 - 120, 180 - 50, 20); 17 | circle(320 + 120, 180 - 50, 20); 18 | 19 | fill(240, 99, 164); 20 | ellipse(320, 180 - 70, 200, 100); 21 | 22 | stroke(252, 238, 33); 23 | line(320 - 100, 180 + 30, 320 - 200, 180 + 200); 24 | line(320 + 100, 180 + 30, 320 + 200, 180 + 200); 25 | -------------------------------------------------------------------------------- /05_Conditionals/rows_conditional/rows_conditional.pde: -------------------------------------------------------------------------------- 1 | // Rows conditional example 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | void setup() { 6 | size(640, 360); 7 | pixelDensity(2); 8 | } 9 | 10 | void draw() { 11 | background(0); 12 | stroke(255); 13 | fill(175); 14 | rectMode(CENTER); 15 | 16 | //Check the mouseY position to determine what's displayed! 17 | if (mouseY < 120) { 18 | line(250, 130, 350, 220); 19 | } else if (mouseY < 240) { 20 | square(300, 180, 100); 21 | } else { 22 | circle(300, 180, 100); 23 | } 24 | 25 | stroke(127); 26 | strokeWeight(4); 27 | 28 | //Draw horizontal lines 29 | line(0, 120, width, 120); 30 | line(0, 240, width, 240); 31 | } 32 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubbles_and_rain/Bubble.pde: -------------------------------------------------------------------------------- 1 | class Bubble { 2 | float x, y, r; 3 | color bubCol; 4 | 5 | Bubble(float _x, float _y, float _r) { 6 | x = _x; 7 | y = _y; 8 | r = _r; 9 | bubCol = color(random(100, 255), 0, random(100, 255), 200); //bubble color 10 | } 11 | 12 | void update() { 13 | y = y - random(1, 4); 14 | x = x + random(-1, 1); 15 | } 16 | 17 | void show() { 18 | strokeWeight(2); 19 | stroke(255); 20 | fill(bubCol); 21 | circle(x, y, r*2); //bubble 22 | strokeWeight(r/5); 23 | arc(x, y, r, r, PI, radians(250)); //highlight 24 | } 25 | 26 | 27 | void edges() { 28 | //place bubble back at the bottom of canvas 29 | if (y < -r) { 30 | y = height + r/2; 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /02_Drawing/alien/alien.pde: -------------------------------------------------------------------------------- 1 | // Alien 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | size(640, 360); //canvas size 6 | pixelDensity(2); 7 | 8 | background(255); //set background color 9 | 10 | //antennas 11 | rectMode(CENTER); 12 | rect(320 - 30, 180 - 80, 15, 75); 13 | rect(320 + 30, 180 - 80, 15, 75); 14 | circle(320 - 30, 180 - 120, 25); 15 | circle(320 + 30, 180 - 120, 25); 16 | 17 | //head 18 | circle(320, 180, 150); 19 | 20 | //eyes 21 | circle(320 - 30, 180 - 15, 40); 22 | circle(320 + 30, 180 - 15, 40); 23 | circle(320 + 30, 180 - 25, 50); 24 | circle(320 - 30, 180 - 25, 50); 25 | circle(320 + 30 - 10, 180 - 35, 10); 26 | circle(320 - 30 - 10, 180 - 35, 10); 27 | 28 | 29 | //mouth 30 | arc(320, 180+10, 25, 25, 0, PI); 31 | -------------------------------------------------------------------------------- /06_Loops/grid_changing_size/grid_changing_size.pde: -------------------------------------------------------------------------------- 1 | // Grid changing resolution 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float spacing = 30; 6 | float maxSpacing, minSpacing; 7 | float theta = 0; 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | maxSpacing = 80; 12 | minSpacing = 30; 13 | } 14 | 15 | void draw() { 16 | background(0); 17 | fill(255); 18 | strokeWeight(2); 19 | 20 | for (float x = 0; x <= width; x+=spacing) { 21 | for (float y = 0; y <= height; y+=spacing) { 22 | rect(x, y, spacing, spacing); 23 | } 24 | } 25 | 26 | //the sin or cosine function help create oscillating motion 27 | theta += radians(1); 28 | spacing = maxSpacing*(1+sin(theta)) + minSpacing; 29 | } 30 | -------------------------------------------------------------------------------- /02_Drawing/flower_color/flower_color.pde: -------------------------------------------------------------------------------- 1 | // Flower 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | size(640, 360); //canvas size 6 | pixelDensity(2); 7 | 8 | background(255); //set background color 9 | 10 | stroke(0, 128, 0); // stem color 11 | strokeWeight(10); //thickness of line 12 | line(320, 180, 320, 360); //stem 13 | 14 | fill(147, 112, 219); //petal color 15 | noStroke(); //no circle outline 16 | 17 | //petals 18 | circle(320 + 50, 180, 50); 19 | circle(320 - 50, 180, 50); 20 | circle(320, 180 + 50, 50); 21 | circle(320, 180 - 50, 50); 22 | circle(320 - 37.5, 180 - 37.5, 50); 23 | circle(320 + 37.5, 180 + 37.5, 50); 24 | circle(320 - 37.5, 180 + 37.5, 50); 25 | circle(320 + 37.5, 180 - 37.5, 50); 26 | 27 | fill(255, 255, 0); //flower center color 28 | circle(320, 180, 85); //flower center 29 | -------------------------------------------------------------------------------- /05_Conditionals/bouncingBall_gravity/bouncingBall_gravity.pde: -------------------------------------------------------------------------------- 1 | // Bouncing ball with gravity 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float x, y, radius; 6 | float velY, accY; //velocity and acceleration 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | radius = 25; 12 | 13 | velY = 3; //initial velocity 14 | accY = 1; //acceleration/gravity 15 | 16 | //position of ball 17 | x = width/2; 18 | y = height/4; 19 | } 20 | 21 | void draw() { 22 | background(0); 23 | noStroke(); 24 | 25 | velY = velY + accY; 26 | y = y + velY; 27 | 28 | if (y < radius || y > height - radius) { 29 | velY = velY * -.85; //reduce the speed each time ball hits floor 30 | y = height - radius; 31 | } 32 | 33 | 34 | circle(x, y, radius*2); 35 | 36 | } 37 | -------------------------------------------------------------------------------- /05_Conditionals/paintbrush_conditional/paintbrush_conditional.pde: -------------------------------------------------------------------------------- 1 | // Paintbrush with conditional 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float minSize = 10; 6 | float maxSize = 100; 7 | float circleSize = minSize; //circle starts at min size 8 | float speed = 1; // speed of size changing 9 | 10 | void setup() { 11 | size(640, 360); 12 | pixelDensity(2); 13 | background(240); 14 | } 15 | 16 | void draw() { 17 | circle(mouseX, mouseY, circleSize); 18 | stroke(240, 80); 19 | fill(236, 1, 90); 20 | 21 | //reset to minimum size once size > maxSize 22 | if (circleSize >= maxSize) { 23 | circleSize = minSize; 24 | } 25 | 26 | if (circleSize >= maxSize/2) { 27 | fill(112, 50, 126); 28 | } 29 | 30 | circleSize = circleSize + speed; //change the size of the circle 31 | } 32 | 33 | void mousePressed() { 34 | background(240); 35 | } 36 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/flower_example/flower_example.pde: -------------------------------------------------------------------------------- 1 | // Flower class 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | /*Another way to represent colors instead of RGB, is by using 6 | hexidecimal notation (ex: #FFFFFF is the color white). Many 7 | color palettes found online use hex codes to denote colors. 8 | You can convert RGB to Hex or vice versa using online tools. */ 9 | color[] rainbowColors = new int[]{#9A56FF, #527AF2, #F2B807, #F28907, #F2220F}; 10 | Flower f; 11 | 12 | void setup() { 13 | size(640, 360); 14 | pixelDensity(2); 15 | 16 | /*Use hue, saturation and brightness to specify 17 | color with a minimum value of 0 and maximum value of 18 | 255.*/ 19 | colorMode(HSB, 255); 20 | 21 | f = new Flower(width/2, height/2); 22 | } 23 | 24 | void draw() { 25 | background(150, 30, 255); 26 | f.showFlower(); 27 | f.update(); 28 | } 29 | -------------------------------------------------------------------------------- /05_Conditionals/four_sections/four_sections.pde: -------------------------------------------------------------------------------- 1 | // Four sections 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | void setup() { 6 | size(640, 360); 7 | pixelDensity(2); 8 | } 9 | 10 | void draw() { 11 | background(0); 12 | stroke(255); 13 | fill(175); 14 | rectMode(CENTER); 15 | 16 | //Check the mouseY position to determine what's displayed! 17 | //Draw each shape within the row that evaluates to true 18 | if (mouseY < 90) { 19 | line(250, 45-35, 350, 45+35); 20 | } else if (mouseY < 180) { 21 | square(300, 135, 70); 22 | } else if(mouseY < 270){ 23 | rect(300, 225, 150, 35, 5); 24 | }else { 25 | circle(300, 315, 70); 26 | } 27 | 28 | stroke(127); 29 | strokeWeight(4); 30 | 31 | //Draw horizontal lines 32 | line(0, 90, width, 90); 33 | line(0, 180, width, 180); 34 | line(0, 270, width, 270); 35 | } 36 | -------------------------------------------------------------------------------- /02_Drawing/alien_color/alien_color.pde: -------------------------------------------------------------------------------- 1 | // Alien with color 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | size(640, 360); //canvas size 6 | pixelDensity(2); 7 | 8 | background(255); //set background color 9 | 10 | //antennas 11 | fill(45, 197, 244); 12 | rectMode(CENTER); 13 | rect(320 - 30, 180 - 80, 15, 75); 14 | rect(320 + 30, 180 - 80, 15, 75); 15 | 16 | fill(236, 1, 90); 17 | circle(320 - 30, 180 - 120, 25); 18 | circle(320 + 30, 180 - 120, 25); 19 | 20 | //head 21 | fill(45, 197, 244); 22 | circle(320, 180, 150); 23 | 24 | //eyes 25 | fill(252, 238, 33); 26 | circle(320 - 30, 180 - 15, 40); 27 | circle(320 + 30, 180 - 15, 40); 28 | circle(320 + 30, 180 - 25, 50); 29 | circle(320 - 30, 180 - 25, 50); 30 | 31 | fill(45, 197, 244); 32 | circle(320 + 30 - 10, 180 - 35, 10); 33 | circle(320 - 30 - 10, 180 - 35, 10); 34 | 35 | 36 | //mouth 37 | noFill(); 38 | arc(320, 180+10, 25, 25, 0, PI); 39 | 40 | -------------------------------------------------------------------------------- /04_Variables/circle_grow/circle_grow.pde: -------------------------------------------------------------------------------- 1 | // Circle growing 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | // 1: Declare and 2: initialize the variable! 6 | float circleX, circleY, circleSize; 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | circleSize = 0; // initial circle size 12 | circleX = width/2; 13 | circleY = 3*height/4; 14 | background(45, 197, 244); 15 | } 16 | 17 | void draw() { 18 | noStroke(); 19 | fill(255, 255, 0); //circle color 20 | 21 | //Use the variables! 22 | circle(circleX, circleY, circleSize); 23 | 24 | /*1: Gradually move circle up while 2: circle increases in size*/ 25 | circleY = circleY - 1; 26 | circleSize = circleSize + 1; 27 | 28 | // Add a candle stick! 29 | rectMode(CENTER); 30 | fill(240); 31 | 32 | /*Adding a 5th parameter in rect rounds the corners. 33 | Check out the reference page for more detail!*/ 34 | rect(width/2, height, 15, height/2, 5); 35 | } 36 | -------------------------------------------------------------------------------- /06_Loops/checkerboard/checkerboard.pde: -------------------------------------------------------------------------------- 1 | // Checkerboard 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | void setup() { 6 | size(640, 360); 7 | pixelDensity(2); 8 | } 9 | 10 | void draw() { 11 | background(0); 12 | //stroke(255); 13 | float spacing = 40; 14 | int countX = 0; //count column number 15 | int countY = 0; //count row number 16 | 17 | for (float x = 0; x <= width; x+=spacing) { 18 | for (float y = 0; y <= height; y+=spacing) { 19 | // %(modulo) calculates the remainder when one number is divided by another. 20 | // If the col is even and the row is odd OR 21 | // If the col is odd and the row is even fill white 22 | if ((countX%2 == 0&&countY%2 == 1) || (countX%2 == 1&&countY%2 == 0)) { 23 | fill(255); 24 | } else { 25 | fill(0); 26 | } 27 | rect(x, y, spacing, spacing); 28 | countY+=1; 29 | } 30 | countX+=1; 31 | } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /05_Conditionals/bouncingBall_changingColor/bouncingBall_changingColor.pde: -------------------------------------------------------------------------------- 1 | // Bouncing ball changing color 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float x, y, xspeed, yspeed, radius; 6 | void setup() { 7 | size(640, 360); 8 | pixelDensity(2); 9 | xspeed = 2; 10 | yspeed = 2; 11 | radius = 25; 12 | 13 | //Start at a random location! 14 | x = random(radius, width-radius); 15 | y = random(radius, height-radius); 16 | } 17 | 18 | void draw() { 19 | background(0); 20 | noStroke(); 21 | 22 | //If ball touches an edge, change the color! 23 | if (x < radius || x > width - radius) { 24 | xspeed = xspeed * -1; 25 | fill(random(255), random(255), random(255)); 26 | } 27 | 28 | if (y < radius || y > height - radius) { 29 | yspeed = yspeed * -1; 30 | fill(random(255), random(255), random(255)); 31 | } 32 | 33 | circle(x, y, radius*2); 34 | 35 | x = x + xspeed; 36 | y = y + yspeed; 37 | } 38 | -------------------------------------------------------------------------------- /10_ConfettiProject/confetti_party_rotate/confetti_party_rotate.pde: -------------------------------------------------------------------------------- 1 | // Confetti Party!!! with rotate 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | /*Another way to represent colors instead of RGB, is by using 6 | hexidecimal notation (ex: #FFFFFF is the color white). Many 7 | color palettes found online use hex codes to denote colors. 8 | You can convert RGB to Hex or vice versa using online tools. */ 9 | color[] rainbowColors = new int[]{#9A56FF, #527AF2, #F2B807, #F28907, #F2220F}; 10 | 11 | Confetti[] confetti = new Confetti[100]; 12 | boolean partyTime = false; 13 | 14 | void setup() { 15 | size(640, 360); 16 | pixelDensity(2); 17 | 18 | for (int i = 0; i < confetti.length; i++) { 19 | confetti[i] = new Confetti(); 20 | } 21 | } 22 | 23 | void mousePressed() { 24 | partyTime = true; 25 | for (Confetti c : confetti) { 26 | c.burst(mouseX, mouseY); 27 | } 28 | } 29 | 30 | void draw() { 31 | background(255); 32 | if (partyTime) { 33 | for (Confetti c : confetti) { 34 | c.show(); 35 | c.update(); 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubble_mouse_interaction/Bubble.pde: -------------------------------------------------------------------------------- 1 | class Bubble { 2 | float x, y, r; 3 | color bubCol; 4 | 5 | Bubble(float _x, float _y, float _r) { 6 | x = _x; 7 | y = _y; 8 | r = _r; 9 | bubCol = color(random(100, 255), 0, random(100, 255), 200); //bubble color 10 | } 11 | 12 | void update() { 13 | y = y - random(1, 2); 14 | x = x + random(-1, 1); 15 | } 16 | 17 | void changeColor(){ 18 | bubCol = color(random(100, 255), random(100), random(100, 255), 200); //bubble color 19 | } 20 | 21 | boolean withinBubble(float mx, float my){ 22 | //check if mouse is within bubble 23 | return dist(mx, my, x, y) < r; 24 | } 25 | 26 | void show() { 27 | strokeWeight(2); 28 | stroke(255); 29 | fill(bubCol); 30 | circle(x, y, r*2); //bubble 31 | strokeWeight(r/5); 32 | arc(x, y, r, r, PI, radians(250)); //highlight 33 | } 34 | 35 | 36 | void edges() { 37 | //place bubble back at the bottom of canvas 38 | if (y < -r) { 39 | y = height + r/2; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubble_mouse_interaction/bubble_mouse_interaction.pde: -------------------------------------------------------------------------------- 1 | // Bubble Mouse Interaction 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | Bubble[] bubbles = new Bubble[5]; 6 | 7 | void setup() { 8 | size(640, 360); 9 | pixelDensity(2); 10 | 11 | //initialize big bubbles 12 | for (int i = 0; i < bubbles.length; i++) { 13 | float x = random(width); 14 | float y = random(height); 15 | float r = random(20, 40); 16 | bubbles[i] = new Bubble(x, y, r); 17 | } 18 | } 19 | 20 | void draw() { 21 | background(200, 200, 255); 22 | 23 | //show and update bubbles 24 | for (int j = 0; j < bubbles.length; j++) { 25 | bubbles[j].update(); 26 | bubbles[j].edges(); 27 | bubbles[j].show(); 28 | } 29 | 30 | } 31 | 32 | void mousePressed(){ 33 | //check each bubble to verify if mouse is over any bubble 34 | for (int j = 0; j < bubbles.length; j++) { 35 | boolean inBubble = bubbles[j].withinBubble(mouseX, mouseY); 36 | if(inBubble){ 37 | bubbles[j].changeColor(); 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /10_ConfettiProject/confetti_party_ArrayList/confetti_party_ArrayList.pde: -------------------------------------------------------------------------------- 1 | // Add elements using ArrayList 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | /*Another way to represent colors instead of RGB, is by using 6 | hexidecimal notation (ex: #FFFFFF is the color white). Many 7 | color palettes found online use hex codes to denote colors. 8 | You can convert RGB to Hex or vice versa using online tools. */ 9 | color[] rainbowColors = new int[]{#9A56FF, #527AF2, #F2B807, #F28907, #F2220F}; 10 | 11 | ArrayList clusters = new ArrayList(); //create ArrayList 12 | boolean partyTime = false; 13 | 14 | void setup() { 15 | size(640, 360); 16 | pixelDensity(2); 17 | } 18 | 19 | void mousePressed() { 20 | partyTime = true; 21 | 22 | //each time the mouse is pressed, add 100 more confetti 23 | for (int i = 0; i < 100; i++) { 24 | clusters.add(new Confetti(mouseX, mouseY)); 25 | } 26 | } 27 | 28 | void draw() { 29 | background(255); 30 | if (partyTime) { 31 | for (Confetti c : clusters) { 32 | c.show(); 33 | c.update(); 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubbles_and_rain/bubbles_and_rain.pde: -------------------------------------------------------------------------------- 1 | // Two bubble classes 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | Bubble[] bubbles = new Bubble[5]; 6 | RainDrop[] drops = new RainDrop[100]; 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | 12 | //initialize big bubbles 13 | for (int i = 0; i < bubbles.length; i++) { 14 | float x = random(width); 15 | float y = random(height); 16 | float r = random(20, 40); 17 | bubbles[i] = new Bubble(x, y, r); 18 | } 19 | 20 | //initialize raindrops 21 | for (int j = 0; j < drops.length; j++) { 22 | float x = random(width); 23 | float y = random(-height, height); 24 | drops[j] = new RainDrop(x, y); 25 | } 26 | } 27 | 28 | void draw() { 29 | background(200, 200, 255); 30 | 31 | //show and update bubbles 32 | for (int j = 0; j < bubbles.length; j++) { 33 | bubbles[j].update(); 34 | bubbles[j].edges(); 35 | bubbles[j].show(); 36 | } 37 | 38 | for (int i = 0; i < drops.length; i++) { 39 | drops[i].update(); 40 | drops[i].edges(); 41 | drops[i].show(); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Coding Train 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubbles_and_rain_pop/bubbles_and_rain_pop.pde: -------------------------------------------------------------------------------- 1 | // Two bubble classes 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | Bubble[] bubbles = new Bubble[5]; 6 | RainDrop[] drops = new RainDrop[100]; 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | 12 | //initialize big bubbles 13 | for (int i = 0; i < bubbles.length; i++) { 14 | float x = random(width); 15 | float y = random(height); 16 | float r = random(20, 40); 17 | bubbles[i] = new Bubble(x, y, r); 18 | } 19 | 20 | //initialize raindrops 21 | for (int j = 0; j < drops.length; j++) { 22 | float x = random(width); 23 | float y = random(-height, height); 24 | drops[j] = new RainDrop(x, y); 25 | } 26 | } 27 | 28 | void draw() { 29 | background(200, 200, 255); 30 | 31 | //show and update bubbles 32 | for (int j = 0; j < bubbles.length; j++) { 33 | bubbles[j].update(); 34 | bubbles[j].edges(); 35 | bubbles[j].show(); 36 | } 37 | 38 | for (int i = 0; i < drops.length; i++) { 39 | drops[i].update(); 40 | drops[i].edges(); 41 | drops[i].show(); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /07_Arrays/fruit_array_index1/fruit_array_index1.pde: -------------------------------------------------------------------------------- 1 | // Fruit array 1 - parse the array and reset to beginning 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | float[] fruitInventory = {50, 100, 70, 110}; 5 | String[] fruitNames = {"mango", "strawberry", "kiwi", "plum"}; 6 | int index = 0; 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | } 12 | 13 | void mousePressed() { 14 | index = index + 1; 15 | 16 | //reset back to beginning 17 | if (index >= fruitInventory.length) { 18 | index = 0; 19 | } 20 | } 21 | 22 | void draw() { 23 | background(0); 24 | stroke(255); 25 | strokeWeight(24); 26 | strokeCap(SQUARE); //Line has squared end, not rounded 27 | 28 | //line height is number of fruits in inventory 29 | line(width/2, height/2, width/2, height/2 - fruitInventory[index]); 30 | 31 | textAlign(CENTER); 32 | textSize(64); 33 | fill(255); 34 | text(fruitNames[index], width/2, height/2 + 64); 35 | 36 | //Using '+' lets you add (concatenate) strings or strings and variables 37 | text("index = " + index, width/2, height/2 + 64*2); 38 | } 39 | -------------------------------------------------------------------------------- /05_Conditionals/bouncingBall_changingSize/bouncingBall_changingSize.pde: -------------------------------------------------------------------------------- 1 | // Bouncing ball changing size 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float x, y, xspeed, yspeed, radius, rspeed; 6 | void setup() { 7 | size(640, 360); 8 | pixelDensity(2); 9 | xspeed = 2; 10 | yspeed = 2; 11 | rspeed = 0.50; // speed at which radius changes 12 | radius = 25; 13 | 14 | //Start at a random location! 15 | x = random(radius, width-radius); 16 | y = random(radius, height-radius); 17 | } 18 | 19 | void draw() { 20 | background(0); 21 | noStroke(); 22 | fill(255); 23 | 24 | float minSize = 10; 25 | float maxSize = 100; 26 | 27 | //Check if ball bounces on edges! 28 | if (x < radius || x > width - radius) { 29 | xspeed = xspeed * -1; 30 | rspeed = rspeed * -1; 31 | } 32 | 33 | if (y < radius || y > height - radius) { 34 | yspeed = yspeed * -1; 35 | rspeed = rspeed * -1; 36 | } 37 | 38 | circle(x, y, radius*2); 39 | 40 | x = x + xspeed; 41 | y = y + yspeed; 42 | //The constrain function constrains a value to not exceed a minimum and maximum value. 43 | radius = constrain(radius + rspeed, minSize, maxSize); 44 | } 45 | -------------------------------------------------------------------------------- /05_Conditionals/bouncingBall_changingSpeed/bouncingBall_changingSpeed.pde: -------------------------------------------------------------------------------- 1 | // Bouncing ball changing speed 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float x, y, xspeed, yspeed, radius; 6 | int maxSpeed = 10; 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | xspeed = 5; 12 | yspeed = 5; 13 | radius = 25; 14 | 15 | //Start at a random location! 16 | x = random(radius, width-radius); 17 | y = random(radius, height-radius); 18 | } 19 | 20 | void draw() { 21 | background(0); 22 | noStroke(); 23 | 24 | if (x < radius || x > width - radius) { 25 | xspeed = constrain(random(xspeed, xspeed*2), -maxSpeed, maxSpeed) * -1; 26 | 27 | //abs() returns the absolute value 28 | if (abs(xspeed) == maxSpeed) { 29 | xspeed = xspeed/5; //reset 30 | } 31 | } 32 | 33 | if (y < radius || y > height - radius) { 34 | yspeed = constrain(random(yspeed, yspeed*2), -maxSpeed, maxSpeed) * -1; 35 | 36 | //abs() returns the absolute value 37 | if (abs(yspeed) == maxSpeed) { 38 | yspeed = yspeed/5; //reset 39 | } 40 | } 41 | 42 | circle(x, y, radius*2); 43 | 44 | x = x + xspeed; 45 | y = y + yspeed; 46 | } 47 | -------------------------------------------------------------------------------- /04_Variables/circles_fade_out/circles_fade_out.pde: -------------------------------------------------------------------------------- 1 | // Circles fade out 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | // 1: Declare and 2: initialize the variable! 6 | float circle1_x, circle1_y, circle2_x, circle2_y, circle3_x, circle3_y; 7 | float circleSize, circleColor; 8 | float bright1 = 0; //brightness value 9 | float bright2 = 0; //brightness value 10 | float bright3 = 0; //brightness value 11 | 12 | void setup() { 13 | size(640, 360); 14 | pixelDensity(2); 15 | circleSize = 100; // circle size 16 | 17 | circle1_x = 320; 18 | circle1_y = 90; 19 | 20 | circle2_x = 120; 21 | circle2_y = 160; 22 | 23 | circle3_x = 550; 24 | circle3_y = 220; 25 | background(45, 197, 244); 26 | 27 | } 28 | 29 | void draw() { 30 | background(45, 197, 244); 31 | 32 | noStroke(); 33 | 34 | //Use the variables! 35 | fill(bright1); //circle color/brightness 36 | circle(circle1_x, circle1_y, circleSize); 37 | 38 | fill(bright2); 39 | circle(circle2_x, circle2_y, circleSize); 40 | 41 | fill(bright3); 42 | circle(circle3_x, circle3_y, circleSize); 43 | 44 | //increase brightness values 45 | bright1 = bright1 + 8; 46 | bright2 = bright2 + 4; 47 | bright3 = bright3 + 3; 48 | 49 | } 50 | -------------------------------------------------------------------------------- /03_Flow/alien_antennas/alien_antennas.pde: -------------------------------------------------------------------------------- 1 | // Alien 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | void setup() { 5 | size(640, 360); //canvas size 6 | pixelDensity(2); 7 | //colorMode(RGB, width, height, 255); 8 | } 9 | 10 | void draw() { 11 | background(240, 99, 164); //set background color 12 | stroke(0); //outline color of the alien 13 | strokeWeight(2); 14 | fill(252, 238, 33); 15 | 16 | //antennas 17 | /*Wiggle antennas left to right with the use of sin() function 18 | Check out the reference page for more detail!*/ 19 | rectMode(CENTER); 20 | rect(320 - 30 + mouseX / 10, 180 - 80, 15, 75); 21 | rect(320 + 30 - mouseX / 10, 180 - 80, 15, 75); 22 | circle(320 - 30 + mouseX / 10, 180 - 120, 25); 23 | circle(320 + 30 - mouseX / 10, 180 - 120, 25); 24 | 25 | //head 26 | fill(45, 197, 244); 27 | circle(320, 180, 150); 28 | 29 | //eyes 30 | fill(252, 238, 33); 31 | circle(320 - 30, 180 - 15, 40); 32 | circle(320 + 30, 180 - 15, 40); 33 | circle(320 + 30, 180 - 25, 50); 34 | circle(320 - 30, 180 - 25, 50); 35 | fill(146, 83, 161); 36 | circle(320 + 30 - 10 + mouseX / 30, 180 - 35, 10); 37 | circle(320 - 30 - 10 + mouseX / 30, 180 - 35, 10); 38 | 39 | 40 | //mouth 41 | noFill(); 42 | arc(320, 180+10, 25, 25, 0, PI); 43 | } 44 | -------------------------------------------------------------------------------- /10_ConfettiProject/confetti_party_ArrayList/Confetti.pde: -------------------------------------------------------------------------------- 1 | class Confetti { 2 | float x, y, w, h; 3 | float xspeed, yspeed; 4 | float rotationSpeed, angle; //rotation variables 5 | color col; //color 6 | 7 | Confetti(float _x, float _y) { 8 | x = _x; 9 | y = _y; 10 | w = 8; //confetti width 11 | h = random(4, 12); //confetti height 12 | xspeed = random(-5, 5); 13 | yspeed = random(-5, 5); 14 | angle = 0; 15 | rotationSpeed = 3; //try adjusting this! 16 | col = rainbowColors[int(random(rainbowColors.length))]; 17 | } 18 | 19 | 20 | void update() { 21 | x = x + xspeed; 22 | y = y + yspeed; 23 | angle = angle + radians(rotationSpeed); //update the angle 24 | 25 | yspeed = yspeed + 0.1; 26 | } 27 | 28 | void show() { 29 | /*Shapes are rotated about their relative position to 30 | the origin. translate() transforms the origin from the top left 31 | corner to the specified coordinate which allows the shape to rotate 32 | about that point. See the processing reference pages for translate(), 33 | rotate(), push(), and pop() for further information.*/ 34 | push(); 35 | fill(col); 36 | noStroke(); 37 | rectMode(CENTER); 38 | translate(x, y); 39 | rotate(angle); 40 | rect(0, 0, w, h); 41 | pop(); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /03_Flow/alien_frown/alien_frown.pde: -------------------------------------------------------------------------------- 1 | // Alien Frown 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | void setup() { 6 | size(640, 360); //canvas size 7 | pixelDensity(2); 8 | colorMode(RGB, 255, 255, 255, width); 9 | } 10 | 11 | void draw() { 12 | background(240, 99, 164); //set background color 13 | strokeWeight(2); 14 | stroke(0); //outline color of the alien 15 | fill(252, 238, 33); 16 | 17 | //antennas 18 | rectMode(CENTER); 19 | rect(320 - 30, 180 - 80, 15, 75); 20 | rect(320 + 30, 180 - 80, 15, 75); 21 | circle(320 - 30, 180 - 120, 25); 22 | circle(320 + 30, 180 - 120, 25); 23 | 24 | //head 25 | fill(45, 197, 244); 26 | circle(320, 180, 150); 27 | 28 | //eyes 29 | fill(252, 238, 33); 30 | circle(320 - 30, 180 - 15, 40); 31 | circle(320 + 30, 180 - 15, 40); 32 | circle(320 + 30, 180 - 25, 50); 33 | circle(320 - 30, 180 - 25, 50); 34 | fill(146, 83, 161); 35 | circle(320 + 30 - 10 + mouseX / 30, 180 - 35, 10); 36 | circle(320 - 30 - 10 + mouseX / 30, 180 - 35, 10); 37 | 38 | 39 | //mouth 40 | strokeWeight(4); 41 | noFill(); 42 | stroke(0, mouseX); //fade the smile out as the mouse moves left to right 43 | arc(320, 180+25, 100, 30, 0, PI); 44 | stroke(0, width-mouseX); //fade the frown in as the mouse moves left to right 45 | arc(320, 180+40, 100, 30, PI, TWO_PI); 46 | } 47 | -------------------------------------------------------------------------------- /07_Arrays/fruit_array_index2/fruit_array_index2.pde: -------------------------------------------------------------------------------- 1 | // Fruit array 2 - parse the array forward & backward 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | float[] fruitInventory = {50, 100, 70, 110}; 5 | String[] fruitNames = {"mango", "strawberry", "kiwi", "plum"}; 6 | int index = 0; 7 | boolean goForward = true; 8 | 9 | void setup() { 10 | size(640, 360); 11 | pixelDensity(2); 12 | } 13 | 14 | void mousePressed() { 15 | //go through the array forward and backward 16 | 17 | if (goForward) { 18 | //go forward 19 | index = index + 1; 20 | } else { 21 | //go backward 22 | index = index - 1; 23 | } 24 | 25 | if (index >= fruitInventory.length-1 || index <= 0) { 26 | goForward = !goForward; //reverse the direction 27 | } 28 | } 29 | 30 | void draw() { 31 | background(0); 32 | stroke(255); 33 | strokeWeight(24); 34 | strokeCap(SQUARE); //Line has squared end, not rounded 35 | 36 | //line height is number of fruit inventory 37 | line(width/2, height/2, width/2, height/2 - fruitInventory[index]); 38 | 39 | textAlign(CENTER); 40 | textSize(64); 41 | fill(255); 42 | text(fruitNames[index], width/2, height/2 + 64); 43 | 44 | //Using '+' lets you add (concatenate) strings or strings and variables 45 | text("index = " + index, width/2, height/2 + 64*2); 46 | } 47 | -------------------------------------------------------------------------------- /10_ConfettiProject/confetti_party_rotate/Confetti.pde: -------------------------------------------------------------------------------- 1 | class Confetti { 2 | float x, y, w, h; 3 | float xspeed, yspeed; 4 | float rotationSpeed, angle; //rotation variables 5 | color col; //color 6 | Confetti() { 7 | x = -1000; 8 | y = -1000; 9 | w = 8; //confetti width 10 | h = random(4, 12); //confetti height 11 | xspeed = 0; 12 | yspeed = 0; 13 | angle = 0; 14 | rotationSpeed = 3; //try adjusting this! 15 | col = rainbowColors[int(random(rainbowColors.length))]; 16 | } 17 | 18 | void burst(float mx, float my) { 19 | x = mx; 20 | y = my; 21 | xspeed = random(-5, 5); 22 | yspeed = random(-5, 5); 23 | } 24 | 25 | void update() { 26 | x = x + xspeed; 27 | y = y + yspeed; 28 | angle = angle + radians(rotationSpeed); //update the angle 29 | 30 | yspeed = yspeed + 0.1; 31 | } 32 | 33 | void show() { 34 | /*Shapes are rotated about their relative position to 35 | the origin. translate() transforms the origin from the top left 36 | corner to the specified coordinate which allows the shape to rotate 37 | about that point. See the processing reference pages for translate(), 38 | rotate(), push(), and pop() for further information.*/ 39 | push(); 40 | fill(col); 41 | noStroke(); 42 | rectMode(CENTER); 43 | translate(x, y); 44 | rotate(angle); 45 | rect(0, 0, w, h); 46 | pop(); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/flower_example/flower_class.pde: -------------------------------------------------------------------------------- 1 | class Flower { 2 | float x, y, size, maxSize; 3 | color fillCol; //color of the flower 4 | float winkCounter = 0; //keep track of how long wink is closed 5 | 6 | Flower(float _x, float _y) { 7 | x = _x; 8 | y = _y; 9 | maxSize = 50; 10 | fillCol = rainbowColors[int(random(rainbowColors.length))]; //pick a random color from the array 11 | } 12 | 13 | void showFlower() { 14 | petals(); 15 | showFace(); 16 | } 17 | 18 | void update() { 19 | // oscillate the size of the flower 20 | size = 200 + 100 * cos(radians(frameCount)); 21 | winkCounter++; 22 | if (winkCounter > 360) { 23 | winkCounter = 0; 24 | } 25 | } 26 | 27 | void petals() { 28 | //make the petals with thick lines 29 | strokeWeight(size/2); 30 | stroke(fillCol); 31 | float petalSize = size/3; //length of line 32 | line(x - petalSize, y - petalSize, x + petalSize, y+petalSize); 33 | line(x + petalSize, y - petalSize, x - petalSize, y+petalSize); 34 | line(x + size/2, y, x - size/2, y); 35 | line(x, y+ size/2, x, y - size/2); 36 | 37 | //flower 38 | noStroke(); 39 | //decrease the brightness of the main color for the center of the flower 40 | fill(hue(fillCol), saturation(fillCol), brightness(fillCol) - 100); 41 | circle(x, y, size); //center of flower 42 | } 43 | 44 | void showFace() { 45 | //face 46 | fill(255); 47 | stroke(255); 48 | strokeWeight(size/35); 49 | if (winkCounter < 10) { 50 | line(x - size/4 - size/20, y, x - size/4 + size/20, y); //wink 51 | } else { 52 | circle(x - size/4, y, size/10); //left eye 53 | } 54 | circle(x + size/4, y, size/10); //right eye 55 | noFill(); 56 | arc(x, y + size/10, size/5, size/5, 0, PI); //smile 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /07_Arrays/color_palette_array/color_palette_array.pde: -------------------------------------------------------------------------------- 1 | // Color Palette Array 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | /*Another way to represent colors instead of RGB, is by using 6 | hexidecimal notation (ex: #FFFFFF is the color white). Many 7 | color palettes found online use hex codes to denote colors. 8 | You can convert RGB to Hex or vice versa using online tools. */ 9 | //color[] colorArray = new color[]{#0b6a88, #ec015a, #f89e4f, #2dc5f4, #9253a1}; 10 | //Color using RGB 11 | color[] colorArray = new int[]{color(11, 106, 136), color(236, 1, 90), color(248, 158, 79), color(45, 197, 244), color(146, 83, 161)}; 12 | 13 | void setup() { 14 | size(640, 360); 15 | rectMode(CENTER); 16 | pixelDensity(2); 17 | } 18 | 19 | void draw() { 20 | background(255); 21 | noStroke(); 22 | 23 | float size = 100; 24 | for (int i = 0; i < colorArray.length; i++) { 25 | fill(colorArray[i]); //fill with the colors in the array 26 | 27 | //place the rectangles so they are centered based on the amount of colors/shapes 28 | float initialX = width/2 - size*colorArray.length/2 + size/2; 29 | rect(initialX + size*i, height/2, size, size*2); 30 | 31 | /* labels */ 32 | fill(240); 33 | textSize(18); 34 | textAlign(LEFT, CENTER); 35 | //convert the red value of each color to an integer 36 | int r = int(red(colorArray[i])); 37 | int g = int(green(colorArray[i])); 38 | int b = int(blue(colorArray[i])); 39 | 40 | text("r: " + str(r), size+size*i - 20, 60 + height/2 - 18); 41 | text("g: " + str(g), size+size*i - 20, 60 + height/2); 42 | text("b: " + str(b), size+size*i - 20, 60 + height/2 + 20); 43 | } 44 | 45 | fill(0); 46 | textSize(14); 47 | text("PALETTE NAME: THE CODING RAINBOW", size - 30, height/2 + size + 10); 48 | } 49 | -------------------------------------------------------------------------------- /04_Variables/random_house/random_house.pde: -------------------------------------------------------------------------------- 1 | // The random() function (Random House Exercise) 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | void setup() { 6 | size(640, 460); 7 | pixelDensity(2); 8 | frameRate(5); //sketch will refresh 5 times per second 9 | } 10 | 11 | void draw() { 12 | // Sky 13 | background(50, 50, 250); 14 | rectMode(CORNER); 15 | 16 | // Grass 17 | fill(25, 200, 25); 18 | rect(0, height / 2, width, height / 2); //Draw grass 19 | 20 | 21 | float x = width / 2; 22 | float y = height / 2; 23 | float w = random(150, 400); 24 | float r = random(0.2, 1); //scale ratio 25 | float h = w * r; 26 | float sw = random(2, 4); //thickness of line 27 | strokeWeight(sw); 28 | stroke(0); 29 | 30 | // House 31 | rectMode(CENTER); 32 | fill(random(100, 255), 0, random(100, 255)); 33 | rect(x, y, w, w * r); 34 | 35 | // Roof 36 | float randomHeight = random(h / 2 + 50, 200); 37 | fill(random(50, 255), random(0, 50), random(0, 50)); 38 | triangle(x - w / 2, y - (w * r) / 2, x + w / 2, y - (w * r) / 2, x, y - randomHeight); 39 | 40 | // Windows 41 | float windowWidth = random(10, h / 3); 42 | float windowPosX = random(windowWidth, w / 2 - windowWidth); 43 | strokeWeight(2); 44 | stroke(0); 45 | fill(random(100, 255), random(100, 255), random(100, 255)); 46 | rect(x - windowPosX, y - (w * r) / 4, windowWidth, windowWidth); 47 | rect(x + windowPosX, y - (w * r) / 4, windowWidth, windowWidth); 48 | line(x - windowPosX, y - (w * r) / 4 - windowWidth / 2, x - windowPosX, y - (w * r) / 4 + windowWidth / 2); 49 | line(x - windowPosX - windowWidth / 2, y - (w * r) / 4, x - windowPosX + windowWidth / 2, y - (w * r) / 4); 50 | line(x + windowPosX, y - (w * r) / 4 - windowWidth / 2, x + windowPosX, y - (w * r) / 4 + windowWidth / 2); 51 | line(x + windowPosX - windowWidth / 2, y - (w * r) / 4, x + windowPosX + windowWidth / 2, y - (w * r) / 4); 52 | 53 | //Door 54 | noStroke(); 55 | fill(random(100, 255), random(100, 255), random(100, 255)); 56 | rect(x, y + h / 4, h / 4, h / 2 - sw * 2); 57 | fill(random(0, 50), random(0, 50), random(0, 50)); 58 | circle(x - h / 24, y + h / 4, h / 12); 59 | } 60 | 61 | void mousePressed() { 62 | background(0); 63 | } 64 | -------------------------------------------------------------------------------- /08_Functions/lollipops/lollipops.pde: -------------------------------------------------------------------------------- 1 | // Lollipops 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | /*Another way to represent colors instead of RGB, is by using 6 | hexidecimal notation (ex: #FFFFFF is the color white). Many 7 | color palettes found online use hex codes to denote colors. 8 | You can convert RGB to Hex or vice versa using online tools. */ 9 | color[] rainbowColors = new int[]{#9A56FF, #527AF2, #F2B807, #F28907, #F2220F}; 10 | 11 | void setup() { 12 | size(640, 360); 13 | pixelDensity(2); 14 | 15 | /*Use hue, saturation and brightness to specify 16 | color with a minimum value of 0 and maximum value of 17 | 255.*/ 18 | colorMode(HSB, 255); 19 | } 20 | 21 | void draw() { 22 | background(150, 30, 255); 23 | 24 | sunshine(); 25 | cloud(110, 75, 100); 26 | cloud(450, 95, 50); 27 | lollipop(100, 180, 100, rainbowColors[0]); 28 | lollipop(210, 180, 150, rainbowColors[1]); 29 | lollipop(320, 180, 70, rainbowColors[2]); 30 | lollipop(430, 180, 120, rainbowColors[3]); 31 | lollipop(540, 180, 80, rainbowColors[4]); 32 | } 33 | 34 | void lollipop(float x, float y, float size, int fillCol) { 35 | 36 | //stem 37 | strokeWeight(1); 38 | fill(255); 39 | noStroke(); 40 | rect(x -5, y, 10, height-y-20); 41 | 42 | //lollipop 43 | noStroke(); 44 | fill(fillCol); 45 | circle(x, y, size); 46 | float rectSize = size + 10; //lollipop center shape 47 | rect(x-rectSize/2, y-rectSize/8, rectSize, rectSize/4, 5); 48 | stroke(hue(fillCol), saturation(fillCol) - 100, brightness(fillCol)); //highlight 49 | line(x - rectSize/2 + rectSize/8, y-rectSize/8, x+rectSize/2 - rectSize/8, y-rectSize/8); 50 | stroke(hue(fillCol), saturation(fillCol), brightness(fillCol) - 100); //shaddow 51 | line(x - rectSize/2 + rectSize/8, y+rectSize/8, x+rectSize/2 - rectSize/8, y+rectSize/8); 52 | 53 | //white arc for glossy effect 54 | noFill(); 55 | strokeWeight(5); 56 | stroke(255); 57 | arc(x, y, size - 20, size - 20, PI, PI+PI/3); 58 | } 59 | 60 | void sunshine() { 61 | noStroke(); 62 | fill(35, 255, 255); 63 | circle(60, 60, 100); 64 | } 65 | 66 | void cloud(float posX, float posY, float size) { 67 | for (int i = 0; i < 3; i++) { 68 | fill(255); 69 | noStroke(); 70 | circle(posX + size/2*i, posY, size); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /08_Functions/conversion_function/conversion_function.pde: -------------------------------------------------------------------------------- 1 | // Conversion Function 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | float measurement, fahrenheit, celsius; 6 | float minNum = 32; //min measurement 7 | float maxNum = 330; //max measurement 8 | 9 | void setup() { 10 | size(640, 360); 11 | pixelDensity(2); 12 | measurement = selectNum(); 13 | } 14 | 15 | void mousePressed() { 16 | measurement = selectNum(); 17 | } 18 | 19 | void draw() { 20 | background(255); 21 | //Position of lines 22 | float x1 = width/6; 23 | float x2 = width - width/6; 24 | float fLine = height/4; //top line (fahrenheit) 25 | float cLine = height - height/4; //bottom line (celsius) 26 | 27 | strokeWeight(80); 28 | /*blendMode() blends the pixels in the display window according to a defined mode. 29 | blendMode(BLEND) is the default. */ 30 | 31 | //Gray background lines 32 | blendMode(BLEND); 33 | stroke(230); 34 | line(x1, fLine, x2, fLine); 35 | line(x1, cLine, x2, cLine); 36 | 37 | //Black lines (update with every new measurement) 38 | stroke(0); 39 | 40 | /*lerp() calculates a number between two numbers at a specific increment. 41 | It is convenient for creating motion along a straight path. 42 | Try un-commenting the alternative to see how the line length changes from 43 | a gradual motion to instantaneous update.*/ 44 | fahrenheit = lerp(fahrenheit, measurement, 0.05); 45 | celsius = lerp(celsius, fahrenheitToCelsius(measurement), 0.05); 46 | 47 | //----ALTERNATIVE----- 48 | //fahrenheit = measurement; 49 | //celsius = fahrenheitToCelsius(measurement); 50 | 51 | line(x1, fLine, x1 + fahrenheit, fLine); 52 | line(x1, cLine, x1 + celsius, cLine); 53 | 54 | 55 | textSize(14); 56 | fill(255); 57 | /*blendMode(DIFFERENCE) subtracts colors from the underlying image/shape so 58 | when the black line is over the text, the text is white. Otherwise, 59 | the text is black (legibility). */ 60 | blendMode(DIFFERENCE); 61 | textAlign(CENTER, CENTER); 62 | 63 | //Use the round() function to round to the nearest degree. 64 | text(round(fahrenheitToCelsius(measurement)) + "° CELSIUS", width/2, cLine); 65 | text(round(measurement) + "° FAHRENHEIT", width/2, fLine); 66 | } 67 | 68 | float selectNum() { 69 | return (random(minNum, maxNum)); 70 | } 71 | 72 | float fahrenheitToCelsius(float degF) { 73 | return (degF - 31) * 5/9 ; 74 | } 75 | -------------------------------------------------------------------------------- /07_Arrays/fruit_data_viz/fruit_data_viz.pde: -------------------------------------------------------------------------------- 1 | // Fruit Data Visualization 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | float[] fruitInventory = new float[5]; 5 | String[] fruitNames = {"mango", "strawberry", "kiwi", "plum", "blueberry"}; 6 | 7 | /*Another way to represent colors instead of RGB, is by using 8 | hexidecimal notation (ex: #FFFFFF is the color white). Many 9 | color palettes found online use hex codes to denote colors. 10 | You can convert RGB to Hex or vice versa using online tools. */ 11 | color[] colorArray = new color[]{#D9A407, #EE0E00, #8C6432, #9253A1, #4188FF}; 12 | 13 | void setup() { 14 | size(640, 360); 15 | 16 | for (int i = 0; i < fruitInventory.length; i++) { 17 | fruitInventory[i] = random(25, 145); 18 | } 19 | 20 | pixelDensity(2); 21 | } 22 | 23 | void mousePressed() { 24 | //randomize when mouse pressed 25 | for (int i = 0; i < fruitInventory.length; i++) { 26 | fruitInventory[i] = random(25, 145); 27 | } 28 | } 29 | 30 | void draw() { 31 | background(0, 0, 50); 32 | strokeCap(SQUARE); //Line has squared end, not rounded 33 | textAlign(CENTER); 34 | textSize(24); 35 | 36 | for (int i = 0; i < fruitInventory.length; i++) { 37 | fill(colorArray[i]); 38 | rectMode(CORNER); 39 | strokeWeight(2); 40 | stroke(colorArray[i]); 41 | noFill(); 42 | 43 | float x = 80 + i * 120; 44 | 45 | //bar outline 46 | rect(x - 12, height/2, 24, -150); 47 | 48 | //line height is number of fruit inventory 49 | strokeWeight(24); 50 | line(x, height/2, x, height/2 - fruitInventory[i]); 51 | text(fruitNames[i], x, height/2 + 24); //fruit name labels 52 | 53 | /*We declared the fruit inventory array as having floats 54 | which means the random values we assign will be decimal 55 | numbers, but if you want to display a whole number you can use 56 | int() to convert a float to an integer. See what happens 57 | when you remove int()!*/ 58 | text("qty: " + int(fruitInventory[i]), x, height/2 + 48); //display number of each fruit 59 | } 60 | 61 | fill(240); 62 | textSize(14); 63 | 64 | textAlign(LEFT, CENTER); 65 | text("FRUIT INVENTORY", 40, height - 40); 66 | 67 | textAlign(CENTER, CENTER); 68 | text("CTRL + ALT + DELI", width/2, height - 40); 69 | 70 | textAlign(RIGHT, CENTER); 71 | text("EST. 2001", width - 40, height - 40); 72 | } 73 | -------------------------------------------------------------------------------- /07_Arrays/fruit_data_viz_sum/fruit_data_viz_sum.pde: -------------------------------------------------------------------------------- 1 | // Fruit Data Visualization 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | float[] fruitInventory = new float[5]; 5 | String[] fruitNames = {"mango", "strawberry", "kiwi", "plum", "blueberry"}; 6 | 7 | /*Another way to represent colors instead of RGB, is by using 8 | hexidecimal notation (ex: #FFFFFF is the color white). Many 9 | color palettes found online use hex codes to denote colors. 10 | You can convert RGB to Hex or vice versa using online tools. */ 11 | color[] colorArray = new color[]{#D9A407, #EE0E00, #8C6432, #9253A1, #4188FF}; 12 | 13 | void setup() { 14 | size(640, 360); 15 | 16 | for (int i = 0; i < fruitInventory.length; i++) { 17 | fruitInventory[i] = random(25, 145); 18 | } 19 | 20 | pixelDensity(2); 21 | } 22 | 23 | void mousePressed() { 24 | //randomize when mouse pressed 25 | for (int i = 0; i < fruitInventory.length; i++) { 26 | fruitInventory[i] = random(25, 145); 27 | } 28 | } 29 | 30 | void draw() { 31 | background(0, 0, 50); 32 | strokeCap(SQUARE); //Line has squared end, not rounded 33 | textAlign(CENTER); 34 | textSize(24); 35 | 36 | float sum = 0; 37 | for (int i = 0; i < fruitInventory.length; i++) { 38 | fill(colorArray[i]); 39 | rectMode(CORNER); 40 | strokeWeight(2); 41 | stroke(colorArray[i]); 42 | noFill(); 43 | 44 | float x = 80 + i * 120; 45 | 46 | //bar outline 47 | rect(x - 12, height/2, 24, -150); 48 | 49 | //line height is number of fruit inventory 50 | strokeWeight(24); 51 | line(x, height/2, x, height/2 - fruitInventory[i]); 52 | text(fruitNames[i], x, height/2 + 24); //fruit name labels 53 | 54 | /*We declared the fruit inventory array as having floats 55 | which means the random values we assign will be decimal 56 | numbers, but if you want to display a whole number you can use 57 | int() to convert a float to an integer. See what happens 58 | when you remove int()!*/ 59 | text("qty: " + int(fruitInventory[i]), x, height/2 + 48); //display number of each fruit 60 | 61 | sum += fruitInventory[i]; //add the value of the inventory each time through the loop 62 | } 63 | 64 | fill(240); 65 | text("Total Fruit Inventory: " + int(sum), width/2, height/2 + 100); 66 | 67 | fill(240); 68 | textSize(14); 69 | 70 | textAlign(LEFT, CENTER); 71 | text("FRUIT INVENTORY", 40, height - 40); 72 | 73 | textAlign(CENTER, CENTER); 74 | text("CTRL + ALT + DELI", width/2, height - 40); 75 | 76 | textAlign(RIGHT, CENTER); 77 | text("EST. 2001", width - 40, height - 40); 78 | } 79 | -------------------------------------------------------------------------------- /07_Arrays/fruit_data_viz_average/fruit_data_viz_average.pde: -------------------------------------------------------------------------------- 1 | // Fruit Data Visualization 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | float[] fruitInventory = new float[5]; 5 | String[] fruitNames = {"mango", "strawberry", "kiwi", "plum", "blueberry"}; 6 | 7 | /*Another way to represent colors instead of RGB, is by using 8 | hexidecimal notation (ex: #FFFFFF is the color white). Many 9 | color palettes found online use hex codes to denote colors. 10 | You can convert RGB to Hex or vice versa using online tools. */ 11 | color[] colorArray = new color[]{#D9A407, #EE0E00, #8C6432, #9253A1, #4188FF}; 12 | 13 | void setup() { 14 | size(640, 360); 15 | 16 | for (int i = 0; i < fruitInventory.length; i++) { 17 | fruitInventory[i] = random(25, 145); 18 | } 19 | 20 | pixelDensity(2); 21 | } 22 | 23 | void mousePressed() { 24 | //randomize when mouse pressed 25 | for (int i = 0; i < fruitInventory.length; i++) { 26 | fruitInventory[i] = random(25, 145); 27 | } 28 | } 29 | 30 | void draw() { 31 | background(0, 0, 50); 32 | strokeCap(SQUARE); //Line has squared end, not rounded 33 | textAlign(CENTER); 34 | textSize(24); 35 | 36 | float sum = 0; 37 | for (int i = 0; i < fruitInventory.length; i++) { 38 | fill(colorArray[i]); 39 | rectMode(CORNER); 40 | strokeWeight(2); 41 | stroke(colorArray[i]); 42 | noFill(); 43 | 44 | float x = 80 + i * 120; 45 | 46 | //bar outline 47 | rect(x - 12, height/2, 24, -150); 48 | 49 | //line height is number of fruit inventory 50 | strokeWeight(24); 51 | line(x, height/2, x, height/2 - fruitInventory[i]); 52 | text(fruitNames[i], x, height/2 + 24); //fruit name labels 53 | 54 | /*We declared the fruit inventory array as having floats 55 | which means the random values we assign will be decimal 56 | numbers, but if you want to display a whole number you can use 57 | int() to convert a float to an integer. See what happens 58 | when you remove int()!*/ 59 | text("qty: " + int(fruitInventory[i]), x, height/2 + 48); //display number of each fruit 60 | 61 | sum += fruitInventory[i]; //add the value of the inventory each time through the loop 62 | } 63 | 64 | fill(240); 65 | float average = sum/fruitInventory.length; 66 | text("Average Number of Fruits: " + int(average), width/2, height/2 + 100); 67 | 68 | fill(240); 69 | textSize(14); 70 | 71 | textAlign(LEFT, CENTER); 72 | text("FRUIT INVENTORY", 40, height - 40); 73 | 74 | textAlign(CENTER, CENTER); 75 | text("CTRL + ALT + DELI", width/2, height - 40); 76 | 77 | textAlign(RIGHT, CENTER); 78 | text("EST. 2001", width - 40, height - 40); 79 | } 80 | -------------------------------------------------------------------------------- /09_ClassesAndObjects/bubbles_and_rain_pop/Bubble.pde: -------------------------------------------------------------------------------- 1 | class Bubble { 2 | float x, y, r; 3 | color bubCol; 4 | float growRate, initialSize, animationCount, acc; 5 | boolean popBub; 6 | 7 | Bubble(float _x, float _y, float _r) { 8 | x = _x; 9 | y = _y; 10 | r = _r; 11 | initialSize = r; 12 | growRate = random(0.1, 0.3); //grow size of buuble 13 | acc = random(0.0005, 0.01); //acceleration of growRate 14 | popBub = false; 15 | animationCount = 0; //to track length of pop animation 16 | bubCol = color(random(100, 255), 0, random(100, 255), 200); //bubble color 17 | } 18 | 19 | void update() { 20 | y = y - random(1, 4); 21 | x = x + random(-1, 1); 22 | r = r + growRate; 23 | growRate += acc; 24 | } 25 | 26 | void show() { 27 | popBub = checkSize(); 28 | float duration = 0.1; //pop animation length 29 | 30 | if (popBub) { 31 | animatePop(); 32 | resetPop(duration); 33 | } else { 34 | strokeWeight(2); 35 | stroke(255); 36 | fill(bubCol); 37 | circle(x, y, r*2); //bubble 38 | strokeWeight(r/5); 39 | arc(x, y, r, r, PI, radians(250)); //highlight 40 | } 41 | } 42 | 43 | void animatePop() { 44 | strokeWeight(10); 45 | stroke(255); 46 | float numLines = 5; 47 | float lineLength = 20; 48 | 49 | for (float angle = 0; angle < 2*PI; angle += 2*PI/numLines) { 50 | /*The equation for cartesian (x,y) coordinates to polar (r, theta/angle) coordinates 51 | is x = r*cos(theta/angle), y = r*sin(theta/angle). 52 | For more resources, refer to the polar coordinates chapter in 53 | The Nature of Code track on thecodingtrain.com/tracks*/ 54 | 55 | //start the line at the edge of the bubble and extend by a length of 20 56 | 57 | float x1 = x + r*cos(angle); 58 | float y1 = y + r*sin(angle); 59 | 60 | float x2 = x + (r+lineLength)*cos(angle); 61 | float y2 = y + (r+lineLength)*sin(angle); 62 | 63 | line(x1, y1, x2, y2); 64 | 65 | textSize(24); 66 | textAlign(CENTER, CENTER); 67 | fill(255); 68 | text("POP", x, y); 69 | } 70 | animationCount+=1; //increment animation count 71 | } 72 | 73 | void edges() { 74 | //place bubble back at the bottom of canvas 75 | if (y < -r) { 76 | y = height + r/2; 77 | } 78 | } 79 | 80 | void resetPop(float duration) { 81 | if (animationCount > duration*60) { 82 | y = height + r/2; //start at the bottom 83 | popBub = false; //do not pop bubble 84 | r = initialSize; //reset to original size 85 | animationCount = 0; //reset animationCount 86 | growRate = 0; //reset growRate 87 | acc = random(0.0005, 0.02); //reset acceleration 88 | } 89 | } 90 | 91 | boolean checkSize() { 92 | //return true if the size of the bubble is greater than twice it's initial size 93 | return r > initialSize*2; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /08_Functions/unicorn_only/unicorn_only.pde: -------------------------------------------------------------------------------- 1 | // Rainbow, Unicorn, Puppy Functions 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | color[] rainbowColors = new int[]{#9A56FF, #527AF2, #F2B807, #F28907, #F2220F}; 6 | 7 | 8 | void setup() { 9 | size(640, 360); 10 | pixelDensity(2); 11 | colorMode(HSB, 255); 12 | rectMode(CENTER); 13 | } 14 | 15 | void draw() { 16 | background(150, 30, 255); 17 | rainbow(); 18 | unicorn(); 19 | noLoop(); 20 | } 21 | 22 | void rainbow() { 23 | float sw = 15; 24 | strokeWeight(sw); 25 | noFill(); 26 | 27 | for (int i = 0; i < rainbowColors.length; i++) { 28 | stroke(rainbowColors[i]); //pick a color from the array 29 | arc(width/2, (height + 100) - sw*i, width + sw*i, width, PI, PI*2); 30 | } 31 | } 32 | 33 | void unicorn() { 34 | float sw = 3; //strokeWeight 35 | float posX = width/2 - 110; 36 | float posY = height/2 + 50; 37 | stroke(0); 38 | strokeWeight(sw); 39 | float triSize = 50; //size of triangle 40 | //pick a random horn color 41 | fill(rainbowColors[int(random(rainbowColors.length))]); 42 | triangle(posX - triSize/2, posY - 100, posX + triSize, posY - 90, posX+triSize/2, posY -100 - triSize*2); 43 | 44 | //unicorn "mane" 45 | for (int i = 0; i < 7; i++) { 46 | fill(130, 100, 255); 47 | circle((posX - 40) - 10*i, posY - 50 + 40*i, 100); 48 | } 49 | 50 | //head 51 | fill(255); 52 | rect(posX, posY, 150, 215, 100); 53 | 54 | //nose 55 | fill(0, 120, 255); 56 | ellipse(posX, posY+60, 150, 110); 57 | 58 | // nostrils 59 | fill(0, 50, 255); 60 | ellipse(posX + 10, posY + 60, 10, 10); 61 | ellipse(posX - 10, posY + 60, 10, 10); 62 | 63 | //eyes 64 | fill(0); 65 | ellipse(posX, posY - 50, 5, 5); 66 | ellipse(posX + 10, posY - 50, 8, 8); 67 | } 68 | 69 | void puppy() { 70 | float sw = 3; 71 | float posX = width/2 + 110; 72 | float posY = height/2 + 50; 73 | stroke(0); 74 | strokeWeight(sw); 75 | 76 | //ears 77 | for (float i = 0; i < 3; i+=0.3) { 78 | fill(15, 150, 100); 79 | noStroke(); 80 | circle((posX - 50) - 10*i, posY - 55 + 40*i, 100); 81 | circle((posX + 50) + 10*i, posY - 55 + 40*i, 100); 82 | } 83 | 84 | //head 85 | stroke(0); 86 | fill(15, 75, 200); 87 | rect(posX, posY, 150, 215, 100); 88 | 89 | //nose 90 | fill(35, 75, 255); 91 | ellipse(posX, posY+60, 150, 110); 92 | 93 | //mouth 94 | fill(0); 95 | ellipse(posX, posY+25, 70, 35); 96 | line(posX, posY+25, posX, posY+75); 97 | noFill(); 98 | arc(posX - 20, posY+75, 40, 25, 0, PI); 99 | arc(posX + 20, posY+75, 40, 25, 0, PI); 100 | 101 | //eyes 102 | fill(0); 103 | ellipse(posX - 25, posY - 25, 20, 20); 104 | ellipse(posX + 25, posY - 25, 20, 20); 105 | 106 | //eyebrows 107 | noFill(); 108 | arc(posX - 25, posY - 50, 40, 25, PI, 2*PI - PI/4); 109 | arc(posX + 25, posY - 50, 40, 25, PI + PI/4, 2*PI); 110 | } 111 | -------------------------------------------------------------------------------- /08_Functions/rainbow_unicorn_puppy/rainbow_unicorn_puppy.pde: -------------------------------------------------------------------------------- 1 | // Rainbow, Unicorn, Cupcake, Puppy Functions 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | color[] rainbowColors = new color[]{color(154, 86, 255), color(82, 122, 242), color(242, 184, 7), color(242, 137, 7), color(242, 34, 15)}; 6 | 7 | void setup() { 8 | size(640, 360); 9 | pixelDensity(2); 10 | colorMode(HSB, 255); 11 | rectMode(CENTER); 12 | } 13 | 14 | void draw() { 15 | background(150, 30, 255); 16 | rainbow(); 17 | cupcake(); 18 | puppy(); 19 | unicorn(); 20 | noLoop(); 21 | } 22 | 23 | void cupcake() { 24 | float sw = 3; //strokeWeight 25 | float posX = width/2; 26 | float posY = height/2; 27 | stroke(0); 28 | strokeWeight(sw); 29 | 30 | //cherry 31 | fill(0, 255, 255); 32 | circle(posX, posY-100, 50); 33 | 34 | //frosting 35 | fill(0, 80, 255); 36 | rect(posX, posY-50, 120, 50, 50); 37 | rect(posX, posY, 150, 50, 50); 38 | 39 | //cup 40 | fill(40, 100, 255); 41 | rect(posX, posY+100, 200, 150, 10); 42 | for (int i = 0; i < 5; i++) { 43 | line(posX - 70 + 35 * i, posY + 50, posX - 70 + 35 * i, posY + 150); 44 | } 45 | } 46 | 47 | void rainbow() { 48 | float sw = 15; 49 | strokeWeight(sw); 50 | noFill(); 51 | 52 | for (int i = 0; i < rainbowColors.length; i++) { 53 | stroke(rainbowColors[i]); //pick a color from the array 54 | arc(width/2, (height + 100) - sw*i, width + sw*i, width, PI, PI*2); 55 | } 56 | } 57 | 58 | void unicorn() { 59 | float sw = 3; //strokeWeight 60 | float posX = width/2 - 180; 61 | float posY = height/2 + 50; 62 | stroke(0); 63 | strokeWeight(sw); 64 | float triSize = 50; //size of triangle 65 | //pick a random horn color 66 | fill(rainbowColors[int(random(rainbowColors.length))]); 67 | triangle(posX - triSize/2, posY - 100, posX + triSize, posY - 90, posX+triSize/2, posY -100 - triSize*2); 68 | 69 | //unicorn "mane" 70 | for (int i = 0; i < 7; i++) { 71 | fill(130, 100, 255); 72 | circle((posX - 40) - 10*i, posY - 50 + 40*i, 100); 73 | } 74 | 75 | //head 76 | fill(255); 77 | rect(posX, posY, 150, 215, 100); 78 | 79 | //nose 80 | fill(0, 120, 255); 81 | ellipse(posX, posY+60, 150, 110); 82 | 83 | // nostrils 84 | fill(0, 50, 255); 85 | ellipse(posX + 10, posY + 60, 10, 10); 86 | ellipse(posX - 10, posY + 60, 10, 10); 87 | 88 | //eyes 89 | fill(0); 90 | ellipse(posX, posY - 50, 5, 5); 91 | ellipse(posX + 10, posY - 50, 8, 8); 92 | } 93 | 94 | void puppy() { 95 | float sw = 3; 96 | float posX = width/2 + 200; 97 | float posY = height/2 + 50; 98 | stroke(0); 99 | strokeWeight(sw); 100 | 101 | //ears 102 | for (float i = 0; i < 3; i+=0.3) { 103 | fill(15, 150, 100); 104 | noStroke(); 105 | circle((posX - 50) - 10*i, posY - 55 + 40*i, 100); 106 | circle((posX + 50) + 10*i, posY - 55 + 40*i, 100); 107 | } 108 | 109 | //head 110 | stroke(0); 111 | fill(15, 75, 200); 112 | rect(posX, posY, 150, 215, 100); 113 | 114 | //nose 115 | fill(35, 75, 255); 116 | ellipse(posX, posY+60, 150, 110); 117 | 118 | //mouth 119 | fill(0); 120 | ellipse(posX, posY+25, 70, 35); 121 | line(posX, posY+25, posX, posY+75); 122 | noFill(); 123 | arc(posX - 20, posY+75, 40, 25, 0, PI); 124 | arc(posX + 20, posY+75, 40, 25, 0, PI); 125 | 126 | //eyes 127 | fill(0); 128 | ellipse(posX - 25, posY - 25, 20, 20); 129 | ellipse(posX + 25, posY - 25, 20, 20); 130 | 131 | //eyebrows 132 | noFill(); 133 | arc(posX - 25, posY - 50, 40, 25, PI, 2*PI - PI/4); 134 | arc(posX + 25, posY - 50, 40, 25, PI + PI/4, 2*PI); 135 | } 136 | -------------------------------------------------------------------------------- /05_Conditionals/bouncingBall_buttonInterface/bouncingBall_buttonInterface.pde: -------------------------------------------------------------------------------- 1 | // Button interface / bouncing ball 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | //Declare ball variables 6 | float x, y, radius, xspeed, yspeed; 7 | color col; 8 | boolean going = true; 9 | 10 | //Declare button variables 11 | float buttonSize = 160; 12 | float padding = 40; //spacing between buttons 13 | float colorButtonX, stopButtonX, radiusButtonX; //x pos of buttons 14 | boolean overColorButton = false; 15 | boolean overStopButton = false; 16 | boolean overRadiusButton = false; 17 | 18 | void setup() { 19 | size(640, 360); 20 | pixelDensity(2); 21 | rectMode(CENTER); 22 | 23 | //Text properties 24 | textAlign(CENTER, CENTER); 25 | textSize(20); 26 | 27 | 28 | //Make the circle a random color 29 | col = color(random(255), random(255), random(255)); 30 | 31 | radius = 25; 32 | xspeed = 3; 33 | yspeed = 3; 34 | 35 | //position of ball 36 | x = random(radius, width-radius); 37 | y = random(radius, height-radius); 38 | 39 | //x position of the buttons 40 | colorButtonX = width/2 - buttonSize - padding; 41 | stopButtonX = width/2; 42 | radiusButtonX = width/2 + buttonSize + padding; 43 | } 44 | 45 | void draw() { 46 | background(0); 47 | noStroke(); 48 | 49 | if (going) { 50 | x = x + xspeed; 51 | y = y + yspeed; 52 | } 53 | 54 | if (x < radius || x > width - radius) { 55 | xspeed = xspeed * -1; 56 | } 57 | 58 | if (y < radius || y > height - radius) { 59 | yspeed = yspeed * -1; 60 | } 61 | 62 | 63 | //------------colorButton---------------- 64 | if (mouseX > colorButtonX - buttonSize/2 && mouseX < colorButtonX + buttonSize/2 65 | && mouseY > height/2 - buttonSize/2 && mouseY < height/2 + buttonSize/2) { 66 | overColorButton = true; //the mouse is over the button 67 | fill(255); 68 | square(colorButtonX, height/2, buttonSize); 69 | } else { 70 | overColorButton = false; 71 | } 72 | 73 | //-----------start/stop button------------ 74 | if (mouseX > stopButtonX - buttonSize/2 && mouseX < stopButtonX + buttonSize/2 75 | && mouseY > height/2 - buttonSize/2 && mouseY < height/2 + buttonSize/2) { 76 | overStopButton = true; //the mouse is over the button 77 | fill(255); 78 | square(stopButtonX, height/2, buttonSize); 79 | } else { 80 | overStopButton = false; 81 | } 82 | 83 | //------------radius button---------------- 84 | if (mouseX > radiusButtonX - buttonSize/2 && mouseX < radiusButtonX + buttonSize/2 85 | && mouseY > height/2 - buttonSize/2 && mouseY < height/2 + buttonSize/2) { 86 | overRadiusButton = true; //the mouse is over the button 87 | fill(255); 88 | square(radiusButtonX, height/2, buttonSize); 89 | } else { 90 | overRadiusButton = false; 91 | } 92 | 93 | 94 | //draw buttons 95 | stroke(255); 96 | noFill(); 97 | square(colorButtonX, height/2, buttonSize); 98 | square(stopButtonX, height/2, buttonSize); 99 | square(radiusButtonX, height/2, buttonSize); 100 | 101 | //draw button labels 102 | fill(255); 103 | text("Color", colorButtonX, height/2 + buttonSize/2 + padding/2); 104 | text("Start/Stop", stopButtonX, height/2 + buttonSize/2 + padding/2); 105 | text("Size", radiusButtonX, height/2 + buttonSize/2 + padding/2); 106 | 107 | //draw ball 108 | fill(col); 109 | noStroke(); 110 | circle(x, y, radius*2); 111 | } 112 | 113 | void mousePressed() { 114 | if (overColorButton) { 115 | //change ball to random color 116 | col = color(random(255), random(255), random(255)); 117 | } 118 | 119 | if (overStopButton) { 120 | //stop or start the ball 121 | going = !going; 122 | } 123 | 124 | if (overRadiusButton) { 125 | //change the radius 126 | radius = random(10, 100); 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /08_Functions/lollipops_animated/lollipops_animated.pde: -------------------------------------------------------------------------------- 1 | // Lollipops 2 | // The Coding Train / Daniel Shiffman 3 | // Processing Intro Series 4 | 5 | /*Another way to represent colors instead of RGB, is by using 6 | hexidecimal notation (ex: #FFFFFF is the color white). Many 7 | color palettes found online use hex codes to denote colors. 8 | You can convert RGB to Hex or vice versa using online tools. */ 9 | color[] rainbowColors = new int[]{#9A56FF, #527AF2, #F2B807, #F28907, #F2220F}; 10 | 11 | void setup() { 12 | size(640, 360); 13 | pixelDensity(2); 14 | 15 | /*Use hue, saturation and brightness to specify 16 | color with a minimum value of 0 and maximum value of 17 | 255.*/ 18 | colorMode(HSB, 255); 19 | } 20 | 21 | void draw() { 22 | background(150, 30, 255); 23 | 24 | sunshine(); 25 | cloud(110, 75, 100); 26 | cloud(450, 95, 50); 27 | 28 | for (int i = 0; i < rainbowColors.length; i++) { 29 | int fillCol = (rainbowColors[i]); // color of lollipop 30 | float size = 100; //size of lollipop 31 | float posX = size/2 + 15 + (width/rainbowColors.length)*i; //x position 32 | 33 | /*Start each lollipop at a different point in the sine function by offsetting the phase. 34 | When removing phase in the sine function below, all lollipops move in unison*/ 35 | float phase = PI/rainbowColors.length * i; 36 | 37 | /*frameCount contains the number of frames displayed since the program started. 38 | It can be used with an oscillating function like sine or cosine, which returns a 39 | number between -1 and 1. Try multiplying frameCount by a number.*/ 40 | float oscillate = easeIn(abs(sin(radians(frameCount) + phase))); 41 | float posY = height/2 + 50 - 100*oscillate; // y position 42 | 43 | lollipop(posX, posY, size, fillCol, oscillate); 44 | } 45 | } 46 | 47 | float easeIn(float num) { 48 | /*"Easing functions specify the rate of change of a parameter over time. 49 | Objects in real life don’t just start and stop instantly, and almost 50 | never move at a constant speed." Reference the following resource for 51 | more information about different easing functions: https://easings.net*/ 52 | 53 | //num should be a number between 0 and 1. 54 | 55 | float easing = 0; 56 | if (num < 0.5) { 57 | easing = (1 - sqrt(1 - pow(2 * num, 2))) / 2; 58 | } else { 59 | easing = (sqrt(1 - pow(-2 * num + 2, 2)) + 1) / 2; 60 | } 61 | 62 | return easing; 63 | } 64 | 65 | void lollipop(float x, float y, float size, int fillCol, float oscillate) { 66 | //shaddow 67 | fill(0, 20); 68 | noStroke(); 69 | 70 | /*use the oscillation to vary the size of the shaddow. The closer the lollipop 71 | is to the ground, the bigger the shaddow gets*/ 72 | ellipse(x, height-20, (size*(1-oscillate)), (size*(1-oscillate)/2)); 73 | 74 | //stem 75 | strokeWeight(1); 76 | fill(255); 77 | noStroke(); 78 | rect(x -5, y, 10, height-y-20); 79 | 80 | //lollipop 81 | noStroke(); 82 | fill(fillCol); 83 | circle(x, y, size); 84 | float rectSize = size + 10; //lollipop center shape 85 | rect(x-rectSize/2, y-rectSize/8, rectSize, rectSize/4, 5); 86 | stroke(hue(fillCol), saturation(fillCol) - 100, brightness(fillCol)); //highlight 87 | line(x - rectSize/2 + rectSize/8, y-rectSize/8, x+rectSize/2 - rectSize/8, y-rectSize/8); 88 | stroke(hue(fillCol), saturation(fillCol), brightness(fillCol) - 100); //shaddow 89 | line(x - rectSize/2 + rectSize/8, y+rectSize/8, x+rectSize/2 - rectSize/8, y+rectSize/8); 90 | 91 | //white arc for glossy effect 92 | noFill(); 93 | strokeWeight(5); 94 | stroke(255); 95 | arc(x, y, size - 20, size - 20, PI, PI+PI/3); 96 | } 97 | 98 | void sunshine() { 99 | noStroke(); 100 | fill(35, 255, 255); 101 | circle(60, 60, 100); 102 | } 103 | 104 | void cloud(float posX, float posY, float size) { 105 | for (int i = 0; i < 3; i++) { 106 | fill(255); 107 | noStroke(); 108 | circle(posX + size/2*i, posY, size); 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚂 Beginner's Guide to Creative Coding w/ Processing 🌈 2 | 3 | [![Video thumbnail with colorful text and characters: "Learning Processing"](img/video-thumb.jpg)](https://nebula.tv/videos/codingtrain-beginners-guide-to-creative-coding-with-processing-full-course) 4 | 5 | Choo choo! Welcome aboard to the world of creative coding! Join me in this beginner-friendly video series and choo-choo-choose to embark on an exciting journey with Processing, a versatile and artist-friendly programming language and environment. Whether you're an absolute beginner or have some experience already, my goal is to inspire and empower you to unleash your creativity through coding. Processing is your gateway to making art, animations, and interactive experiences. No prior experience is required—just curiosity and a desire to create! 6 | 7 | Below, you'll find a detailed itinerary that includes links to all of the coding destinations: code examples, interactive exercises, and other reference material. Found a mechanical issue? Open an issue in this repo or call the conductor at [help@thecodingtrain.com](mailto:help@thecodingtrain.com). 8 | 9 | For passengers looking to chat in the cafe car, [say hello in this reddit thread](https://www.reddit.com/r/Nebula/comments/16iylip/beginners_guide_to_creative_coding_with/) or [hop onto the Discord](https://thecodingtrain.com/discord). There's always room for one more on the Coding Train! 10 | 11 | ## How to Watch 12 | This video is available [right now as a Nebula first](https://nebula.tv/videos/codingtrain-beginners-guide-to-creative-coding-with-processing-full-course)! Want to support The Coding Train and have access to even more coding adventures? [Buy your train tickets for a Nebula journey with the Coding Train](https://go.nebula.tv/codingtrain)! 13 | 14 | ![Tabel of contents outlining timecodes for each chapter](img/outline.png) 15 | 16 | ## Introduction [0:00] 17 | 18 | ### Reference 19 | 20 | - [Processing Website](https://processing.org/) 21 | - [Link to Dan's first Processing Forum post](https://forum.processing.org/beta/num_1113961700_30.html) 22 | - [Introduction to Computation Media Syllabus](https://web.archive.org/web/20120708035400/http://itp.nyu.edu/varwiki/Syllabus/ICM-Daniel-Shiffman-F11) 23 | - [Processing Download](https://processing.org/download) 24 | - [Nature of Code](https://natureofcode.com/) 25 | - [ITP Website](https://itp.nyu.edu/itp/) 26 | - [Lingo bouncing ball code example image](https://www.globalnerdy.com/wp-content/uploads/2020/06/Untitled-11.fw_.png) 27 | - [Macromedia Director launch image](https://www.macintoshrepository.org/_resize.php?w=640&h=480&bg_color=333333&imgenc=ZmlsZ2f5XMvbWcvc2l0ZXMvbWcvZmlsZXMvc2NyZWVuc2hvdHMvYWJvdXRfZGlyZWN0b3JfbXgucG5nfHd3dy5tYWNpbnRvc2hyZXBvc2l0b3J5Lm9yZy8yNjQzNC1tYWNyb21lZGlhLWRpcmVjdG9yLW14) 28 | - [Macromedia Director Lingo Workshop image](https://m.media-amazon.com/images/I/71YV4B05PXL._AC_UF1000,1000_QL80_.gif) 29 | - [John Henry Thompson Coding Train video](https://www.youtube.com/watch?v=DvS4h-1Eyu4&t=1169s&ab_channel=TheCodingTrain) 30 | - [What was Coding like 40 Years Ago?](https://www.youtube.com/watch?v=7r83N3c2kPw&t=122s&ab_channel=TheCodingTrain) 31 | - [Procedural Painting Syllabus](https://shiffman.github.io/Procedural-Painting/) 32 | - [The Coding Train Youtube Channel](https://www.youtube.com/@TheCodingTrain) 33 | - [Casey Reas and Ben Fry Image](https://archive.aec.at/pic/showmode/15831/) 34 | - [John Maeda Image](https://www.flickr.com/photos/scobleizer/2218331001/) 35 | - [Design By Numbers IDE Image](https://i0.wp.com/maeda.pm/wp-content/uploads/2017/12/screen-shot-2017-12-01-at-1-41-09-pm.png?fit=1706%2C1150&ssl=1) 36 | - [LOGO Image]() 37 | - [BASIC Image](https://www.youtube.com/watch?v=PHfKCxjsmos&t=1967s&ab_channel=TheCodingTrain) 38 | - [Rhizome Interview with Casey Reas and Ben Fry](https://rhizome.org/editorial/2009/sep/23/interview-with-casey-reas-and-ben-fry/) 39 | - [Design by Numbers Example Image](https://cdn.dribbble.com/users/810463/screenshots/2015250/dbn.png) 40 | - [Java Website](https://dev.java/) 41 | - [Processing Original IDE Image](https://upload.wikimedia.org/wikipedia/commons/5/50/Processing-ide.png) 42 | - [Processing original libraries page](https://web.archive.org/web/20061206215409/http://processing.org/reference/libraries/index.html) 43 | - [Processing 1.0 Image](https://www.andrew.cmu.edu/course/60-257/reference/environment/index.html) 44 | - [Processing Foundation Website](https://processingfoundation.org/) 45 | - [Python Mode for Processing Website](https://py.processing.org/) 46 | - [Processing for Android Website](https://android.processing.org/) 47 | - [p5.js Website](https://p5js.org/) 48 | - [Coding Challenges Link](https://thecodingtrain.com/challenges) 49 | - [p5.js Web Editor](https://editor.p5js.org/) 50 | - [Processing Libraries Link](https://processing.org/reference/libraries/) 51 | - [Coding Train Tracks Link](https://thecodingtrain.com/tracks) 52 | - [Nebula Website](https://nebula.tv/) 53 | - [The Coding Train Website](https://thecodingtrain.com/) 54 | - [The Coding Train Discord](https://discord.com/invite/ZHydDC8sXN) 55 | - [Processing Forum](https://discourse.processing.org/) 56 | 57 | ## Drawing with Code [17:30] 58 | 59 | ### Reference 60 | 61 | - [Rectangle reference page](https://processing.org/reference/rect_.html) 62 | - [Triangle reference page](https://processing.org/reference/triangle_.html) 63 | - [Quad reference page](https://processing.org/reference/quad_.html) 64 | - [Arc reference page](https://processing.org/reference/arc_.html) 65 | - [Programming Design Systems Website](https://programmingdesignsystems.com/) 66 | 67 | ### Code Examples 68 | #### In-Video Examples: 69 | - [Basic Shapes](https://github.com/CodingTrain/Creative-Coding-Processing-Full-Course/blob/main/02_Drawing/CodingTrainBasicShapes/CodingTrainExample1.pde) 70 | - [Shapes with Color](https://github.com/CodingTrain/Creative-Coding-Processing-Full-Course/blob/main/02_Drawing/CodingTrainShapesWithColor/CodingTrainExample2.pde) 71 | - [Zoog](https://github.com/CodingTrain/Creative-Coding-Processing-Full-Course/blob/main/02_Drawing/Zoog/Zoog.pde) 72 | 73 | #### Do-It-Yourself Solutions: 74 | 75 | - [Abstract](https://github.com/CodingTrain/Learning-Processing-4/blob/main/02_Drawing/abstract_sketch/abstract_sketch.pde) 76 | - [Alien](https://github.com/CodingTrain/Learning-Processing-4/blob/main/02_Drawing/alien/alien.pde) 77 | - [Alien with Color](https://github.com/CodingTrain/Learning-Processing-4/blob/main/02_Drawing/alien_color/alien_color.pde) 78 | - [Flower](https://github.com/CodingTrain/Learning-Processing-4/blob/main/02_Drawing/flower/flower.pde) 79 | - [Flower with Color](https://github.com/CodingTrain/Learning-Processing-4/blob/main/02_Drawing/flower_color/flower_color.pde) 80 | - [Self Portrait](https://github.com/CodingTrain/Learning-Processing-4/blob/main/02_Drawing/self_portrait/self_portrait.pde) 81 | - [Spaceship](https://github.com/CodingTrain/Learning-Processing-4/blob/main/02_Drawing/spaceship/spaceship.pde) 82 | - [Spaceship with Color](https://github.com/CodingTrain/Learning-Processing-4/blob/main/02_Drawing/spaceship_color/spaceship_color.pde) 83 | 84 | ## Flow [1:04:39] 85 | 86 | ### Reference 87 | 88 | - [Space Invaders Clip](https://www.youtube.com/watch?v=uGjgxwiemms&ab_channel=Senboza) 89 | 90 | ### Code Examples 91 | 92 | - [Alien Antennas](https://github.com/CodingTrain/Learning-Processing-4/blob/main/03_Flow/alien_antennas/alien_antennas.pde) 93 | - [Alien Frown](https://github.com/CodingTrain/Learning-Processing-4/blob/main/03_Flow/alien_frown/alien_frown.pde) 94 | 95 | ## Variables [1:29:31] 96 | 97 | ### Code Examples 98 | 99 | - [Circle Grow](https://github.com/CodingTrain/Learning-Processing-4/blob/main/04_Variables/circle_grow/circle_grow.pde) 100 | - [Circle y only](https://github.com/CodingTrain/Learning-Processing-4/blob/main/04_Variables/circle_y_only/circle_y_only.pde) 101 | - [Circles fade out](https://github.com/CodingTrain/Learning-Processing-4/blob/main/04_Variables/circles_fade_out/circles_fade_out.pde) 102 | - [Mouse with variables](https://github.com/CodingTrain/Learning-Processing-4/blob/main/04_Variables/mouse_width_variables/mouse_width_variables.pde) 103 | - [Paintbrush mouse random](https://github.com/CodingTrain/Learning-Processing-4/blob/main/04_Variables/paintbrush_mouse_random/paintbrush_mouse_random.pde) 104 | - [Paintbrush plain](https://github.com/CodingTrain/Learning-Processing-4/blob/main/04_Variables/paintbrush_plain/paintbrush_plain.pde) 105 | - [Paintbrush random](https://github.com/CodingTrain/Learning-Processing-4/blob/main/04_Variables/paintbrush_random/paintbrush_random.pde) 106 | - [Random house](https://github.com/CodingTrain/Learning-Processing-4/blob/main/04_Variables/random_house/random_house.pde) 107 | - [Random lines](https://github.com/CodingTrain/Learning-Processing-4/blob/main/04_Variables/random_lines/random_lines.pde) 108 | 109 | ## Conditionals [2:02:46] 110 | 111 | ### Reference 112 | 113 | - [Distance reference page](https://processing.org/reference/dist_.html) 114 | - [Bouncing DVD logo](https://www.bouncingdvdlogo.com/) 115 | - [Mouse press reference page](https://processing.org/reference/mousePressed_.html) 116 | 117 | ### Code Examples 118 | 119 | - [Ball turn around](https://github.com/CodingTrain/Learning-Processing-4/blob/main/05_Conditionals/ball_turn_around/ball_turn_around.pde) 120 | - [Bouncing ball button interface](https://github.com/CodingTrain/Learning-Processing-4/blob/main/05_Conditionals/bouncingBall_buttonInterface/bouncingBall_buttonInterface.pde) 121 | - [Bouncing ball changing color](https://github.com/CodingTrain/Learning-Processing-4/blob/main/05_Conditionals/bouncingBall_changingColor/bouncingBall_changingColor.pde) 122 | - [Bouncing ball changing size](https://github.com/CodingTrain/Learning-Processing-4/blob/main/05_Conditionals/bouncingBall_changingSize/bouncingBall_changingSize.pde) 123 | - [Bouncing ball changing speed](https://github.com/CodingTrain/Learning-Processing-4/blob/main/05_Conditionals/bouncingBall_changingSpeed/bouncingBall_changingSpeed.pde) 124 | - [Bouncing ball gravity](https://github.com/CodingTrain/Learning-Processing-4/blob/main/05_Conditionals/bouncingBall_gravity/bouncingBall_gravity.pde) 125 | - [Circle rollover](https://github.com/CodingTrain/Learning-Processing-4/blob/main/05_Conditionals/circle_rollover/circle_rollover.pde) 126 | - [Four sections](https://github.com/CodingTrain/Learning-Processing-4/blob/main/05_Conditionals/four_sections/four_sections.pde) 127 | - [Paintbrush conditional](https://github.com/CodingTrain/Learning-Processing-4/blob/main/05_Conditionals/paintbrush_conditional/paintbrush_conditional.pde) 128 | - [Rows conditional](https://github.com/CodingTrain/Learning-Processing-4/blob/main/05_Conditionals/rows_conditional/rows_conditional.pde) 129 | 130 | ## Loops [2:50:01] 131 | 132 | ### Reference 133 | 134 | - [C64 running 10PRINT](https://www.youtube.com/watch?v=m9joBLOZVEo&ab_channel=ThomasWinningham) 135 | - [10PRINT Website](https://10print.org/) 136 | - [10PRINT Coding Challenge and Passenger Showcase](https://thecodingtrain.com/challenges/76-10Print) 137 | - [Passenger Showcase Submission Form](https://thecodingtrain.com/guides/passenger-showcase-guide#submission-form) 138 | - [Commodore 64 image](https://interface-experience.org/site/wp-content/uploads/2015/01/IE-008KKEDIT.jpg) 139 | 140 | ### Code Examples 141 | 142 | - [Checkerboard](https://github.com/CodingTrain/Learning-Processing-4/blob/main/06_Loops/checkerboard/checkerboard.pde) 143 | - [Concentric circles](https://github.com/CodingTrain/Learning-Processing-4/blob/main/06_Loops/concentric_circles/concentric_circles.pde) 144 | - [Grid changing size](https://github.com/CodingTrain/Learning-Processing-4/blob/main/06_Loops/grid_changing_size/grid_changing_size.pde) 145 | - [Grid circles](https://github.com/CodingTrain/Learning-Processing-4/blob/main/06_Loops/grid_circles/grid_circles.pde) 146 | - [Horizontal stripes](https://github.com/CodingTrain/Learning-Processing-4/blob/main/06_Loops/horizontal_stripes/horizontal_stripes.pde) 147 | - [Vertical stripes](https://github.com/CodingTrain/Learning-Processing-4/blob/main/06_Loops/vertical_stripes/vertical_stripes.pde) 148 | 149 | ## Arrays [3:12:29] 150 | 151 | ### Reference 152 | 153 | - [Text reference page](https://processing.org/reference/text_.html) 154 | - [Stroke cap reference page](https://processing.org/reference/strokeCap_.html) 155 | 156 | ### Code Examples 157 | 158 | - [Color palette array](https://github.com/CodingTrain/Learning-Processing-4/blob/main/07_Arrays/color_palette_array/color_palette_array.pde) 159 | - [Fruit array index 1](https://github.com/CodingTrain/Learning-Processing-4/blob/main/07_Arrays/fruit_array_index1/fruit_array_index1.pde) 160 | - [Fruit array index 2](https://github.com/CodingTrain/Learning-Processing-4/blob/main/07_Arrays/fruit_array_index2/fruit_array_index2.pde) 161 | - [Fruit data visualization](https://github.com/CodingTrain/Learning-Processing-4/blob/main/07_Arrays/fruit_data_viz/fruit_data_viz.pde) 162 | - [Fuit data viz average](https://github.com/CodingTrain/Learning-Processing-4/blob/main/07_Arrays/fruit_data_viz_average/fruit_data_viz_average.pde) 163 | - [Fruit data viz sum](https://github.com/CodingTrain/Learning-Processing-4/blob/main/07_Arrays/fruit_data_viz_sum/fruit_data_viz_sum.pde) 164 | 165 | ## Functions [3:40:29] 166 | 167 | ### Code Examples 168 | 169 | - [Conversion function](https://github.com/CodingTrain/Learning-Processing-4/blob/main/08_Functions/conversion_function/conversion_function.pde) 170 | - [Lollipops](https://github.com/CodingTrain/Learning-Processing-4/blob/main/08_Functions/lollipops/lollipops.pde) 171 | - [Lollipops animated](https://github.com/CodingTrain/Learning-Processing-4/blob/main/08_Functions/lollipops_animated/lollipops_animated.pde) 172 | - [Rainbow, unicorn, puppy](https://github.com/CodingTrain/Learning-Processing-4/blob/main/08_Functions/rainbow_unicorn_puppy/rainbow_unicorn_puppy.pde) 173 | - [Unicorn only](https://github.com/CodingTrain/Learning-Processing-4/blob/main/08_Functions/unicorn_only/unicorn_only.pde) 174 | 175 | ## Classes and Objects [4:02:30] 176 | 177 | ### Reference 178 | 179 | - [Distance reference page](https://processing.org/reference/dist_.html) 180 | - [Pixel array video](https://www.youtube.com/watch?v=EmtU0eloTlE&t=768s&ab_channel=TheCodingTrain) 181 | 182 | ### Code Examples 183 | 184 | - [Bubble](https://github.com/CodingTrain/Learning-Processing-4/tree/main/09_ClassesAndObjects/bubble_example) 185 | - [Bubble with arguments](https://github.com/CodingTrain/Learning-Processing-4/tree/main/09_ClassesAndObjects/bubble_example_arguments) 186 | - [Bubble mouse interaction](https://github.com/CodingTrain/Learning-Processing-4/tree/main/09_ClassesAndObjects/bubble_mouse_interaction) 187 | - [Bubbles and rain](https://github.com/CodingTrain/Learning-Processing-4/tree/main/09_ClassesAndObjects/bubbles_and_rain) 188 | - [Bubbles and rain pop](https://github.com/CodingTrain/Learning-Processing-4/tree/main/09_ClassesAndObjects/bubbles_and_rain_pop) 189 | - [Flower class](https://github.com/CodingTrain/Learning-Processing-4/tree/main/09_ClassesAndObjects/flower_example) 190 | 191 | ## Confetti Project [4:56:20] 192 | 193 | ### Reference 194 | 195 | - [Coding challenges](https://thecodingtrain.com/challenges) 196 | - [Nature of Code (Processing)](https://www.youtube.com/watch?v=6vX8wT1G798&list=PLRqwX-V7Uu6aFlwukCmDf0-1-uSR7mklK&ab_channel=TheCodingTrain) 197 | - [Nature of Code (p5.js)](https://www.youtube.com/watch?v=70MQ-FugwbI&list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM&ab_channel=TheCodingTrain) 198 | 199 | ### Code Examples 200 | 201 | - [Confetti party](https://github.com/CodingTrain/Learning-Processing-4/tree/main/10_ConfettiProject/confetti_party) 202 | - [Confetti party arrayList](https://github.com/CodingTrain/Learning-Processing-4/tree/main/10_ConfettiProject/confetti_party_ArrayList) 203 | - [Confetti party rotate](https://github.com/CodingTrain/Learning-Processing-4/tree/main/10_ConfettiProject/confetti_party_rotate) 204 | 205 | ## Conclusion [5:03:15] 206 | 207 | ### Reference 208 | 209 | - [Images and Pixels (Processing playlist)](https://www.youtube.com/watch?v=-f0WEitGmiw&list=PLRqwX-V7Uu6YB9x6f23CBftiyx0u_5sO9&ab_channel=TheCodingTrain) 210 | - [3D Renderer coding challenge](https://www.youtube.com/watch?v=IKB1hWWedMk&ab_channel=TheCodingTrain) 211 | - [Transformations](https://www.youtube.com/watch?v=o9sgjuh-CBM&ab_channel=TheCodingTrain) 212 | - [Text and Data](https://www.youtube.com/watch?v=NLzne4XaR3M&list=PLRqwX-V7Uu6Y4F21kqaFLk6oGW2I5o7FY&ab_channel=TheCodingTrain) 213 | - [Data and API's](https://www.youtube.com/watch?v=DbcLg8nRWEg&list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X&ab_channel=TheCodingTrain) 214 | - [Loading and playing with sound (p5.js](https://www.youtube.com/watch?v=Pn1g1wjxl_0&list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW&ab_channel=TheCodingTrain) 215 | - [Capture and live video](https://www.youtube.com/watch?v=WH31daSj4nc&list=PLRqwX-V7Uu6bw0bVn4M63p8TMJf3OhGy8&ab_channel=TheCodingTrain) 216 | - [Physics engine](https://www.youtube.com/watch?v=wB1pcXtEwIs&list=PLRqwX-V7Uu6akvoNKE4GAxf6ZeBYoJ4uh&ab_channel=TheCodingTrain) 217 | - [The Coding Train Discord](https://discord.gg/brgTTY3C) 218 | - [Twitter](https://twitter.com/thecodingtrain) 219 | - [Instagram](https://www.instagram.com/the.coding.train/) 220 | --------------------------------------------------------------------------------