Clarify or Demo any coding concepts unclear from Coding Sketch #1 (break)
Intro Variables and For Loops
Start work on Coding Sketch for next week
Homework
Coding Sketch: Self Portrait
Find a selfie or take one. Create an interpretation of it using 2D shapes in P5.JS. You can to be accurate, or create an interesting abstraction based on the image. Look at the 2D shapes on https://p5js.org/reference/.
Bonus for using more advanced 2D primitives -- quads, arcs, and I encourage you to lookup how to use Vertexes!
// these are the four functions related to color
// fill()
// noFill()
// noStroke()
// stroke()
// function setup runs ONCE before everything else immediately after pressing play.
function setup() {
// makes a canvas, first number is width second is height
createCanvas(400, 400);
}
// everything in function draw LOOPS again and again
function draw() {
// if 1 value: 0 is black and 255 is white
// if 3 values: 1st red, green, blue [RGB color]
background(255);
stroke(0);
strokeWeight(1);
noFill();
// x1, y1,x2,y2,x3,y3
triangle(30, 75, 100, 125, 347, 42);
strokeWeight(10);
stroke(255, 204, 0);
fill(255, 165, 0);
// x, y , w ,h
//ellipse(100,300,25,66);
//circle(width,0,100);
// x,y, w
//square(width/2-100/2,height/2-100/2,100);
// x, y, w , h
//rect(200,200,100,300);
beginShape();
vertex(100, 200);
vertex(123, 127);
vertex(154, 50);
vertex(200, 180);
vertex(120, 325);
vertex(300, 180);
endShape(CLOSE);
console.log(mouseX, mouseY);
}
// fill()
// noFill()
// noStroke()
// stroke()
function setup() {
createCanvas(400, 400);
}
function draw() {
// 1 number is greyscale, 0 is black 255 is white
// 3 number r,g,b color / hexcode
background(178, 172, 136);
stroke(50, 150, 100);
strokeWeight(20);
fill(100, 100, 0);
beginShape();
vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(120, 230);
vertex(120, 120);
vertex(30, 75);
endShape(CLOSE);
arc(290, 60, 80, 80, PI, TWO_PI + HALF_PI);
strokeWeight(2);
stroke(100, 100, 0);
fill(50, 150, 100);
circle(width / 2, height / 2, width / 10);
strokeWeight(20);
point(100, 300);
}
function setup() {
createCanvas(500, 500);
}
// this is a loop! it runs again and again!
function draw() {
background(255);
// Head
stroke("#E3C292");
fill("#E3C292");
strokeWeight(1);
// x, y, width, height
rect(225, 225, 80, 100);
// eyes
stroke("rgb(89,16,16)");
strokeWeight(10);
point(250, 250);
point(285, 250);
// mouse position finder
console.log(mouseX, mouseY);
// print() does the same thing as console.log !
}
function setup() {
// make a comment with two forward slashes
// multiple values inside of a function need to be seperated by commas.
createCanvas(500, 400); // this line creates a canvas. #1 is width and #2 is height of canvas.
}
// all code for this assignment needs to be within either function setup or draw
function draw() {
// greyscale between black and white; range 0 to 255
// RGB color is three values representing amount of red green and blue; range is 0 to 255
background(0, 140, 255);
// SUN
fill("rgb(255,221,0)");
stroke(100, 100, 100); // penstroke color
// added layers
circle(350, 120, 200); // circle needs an x, y, diameter
// SOLAR RAYS
// GRASS
noStroke();
fill("rgb(14,224,14)");
// rect(x,y,w,h) x and y are top left corner
rect(0, height / 2, width, width / 2);
// CLOUD 1
noStroke();
fill(250);
circle(45 + 20, 43 + 20, 100);
fill(248);
circle(71 + 20, 61 + 20, 80);
fill(252);
circle(110 + 20, 30 + 20, 60);
fill(245);
circle(128 + 20, 59 + 20, 80);
// CLOUD 2
noStroke();
fill(250);
circle(45 + 350, 43 + 40, 100);
fill(248);
circle(71 + 350, 61 + 40, 80);
fill(252);
circle(110 + 350, 30 + 40, 60);
fill(245);
circle(128 + 350, 59 + 40, 80);
// BIRD 1
// line has no fill, only stroke
strokeWeight(2.5);
stroke(0); //black line
line(10 + 200, 10 + 100, 20 + 200, 20 + 100); // beginning vertex plus end vertex: (x1,y1,x2,y2);
line(20 + 200, 20 + 100, 30 + 200, 10 + 100); // beginning vertex plus end vertex: (x1,y1,x2,y2);
// BIRD 2
// line has no fill, only stroke
strokeWeight(2);
stroke(5); //black line
line(10 + 180, 10 + 140, 20 + 180, 20 + 140); // beginning vertex plus end vertex: (x1,y1,x2,y2);
line(20 + 180, 20 + 140, 30 + 180, 10 + 140); // beginning vertex plus end vertex: (x1,y1,x2,y2);
//POND
// need both!
noStroke();
fill("rgb(35,35,170)");
beginShape(); // expect some vertices to come our way
curveVertex(274 + 30, 245); // vertex is an x and y position pair
curveVertex(344 + 30, 221); // vertex is an x and y position pair
curveVertex(400 + 30, 225); // vertex is an x and y position pair
curveVertex(413 + 30, 254); // vertex is an x and y position pair
curveVertex(451 + 30, 289); // vertex is an x and y position pair
curveVertex(399 + 30, 315); // vertex is an x and y position pair
curveVertex(286 + 30, 340); // vertex is an x and y position pair
curveVertex(234 + 30, 282); // vertex is an x and y position pair
endShape(CLOSE); // CLOSE as a parameter for endShape closes the outline
//PIER
noStroke();
fill("brown");
// quad(x1,y1,x2,y2,x3,y3,x4,y4);
// quad(264, 294, 308, 277, 322, 291, 277, 317);
beginShape();
vertex(264, 294); //x1,y1
vertex(308, 277); // x2 y2
vertex(322, 291); // x3, y3
vertex(277, 317); //x4, y4
endShape();
// PERSON
// HEAD
// HAIR
}
function setup() {
createCanvas(400, 400);
background(255);
// Line
line(50, 50, 150, 50);
// Rectangle
rect(50, 80, 100, 60);
// Ellipse
ellipse(100, 200, 80, 40);
// Triangle
triangle(50, 300, 150, 300, 100, 230);
// Quad
quad(200, 50, 300, 50, 350, 120, 250, 120);
// Arc
arc(300, 200, 80, 80, PI, TWO_PI);
// No fill for all shapes
noFill();
stroke(0);
}
function setup() {
createCanvas(400, 200);
background(240);
// Filled rectangle with stroke
fill(255, 0, 0); // Red fill
stroke(0); // Black stroke
rect(20, 40, 60, 60);
// No fill, only stroke
noFill();
stroke(0, 0, 255); // Blue stroke
rect(120, 40, 60, 60);
// Fill, no stroke
fill(0, 255, 0); // Green fill
noStroke();
rect(220, 40, 60, 60);
// No fill, no stroke (invisible)
noFill();
noStroke();
rect(320, 40, 60, 60); // This won't be visible
}
function setup() {
createCanvas(400, 400);
noStroke();
// Using named color
fill("red");
rect(20, 20, 80, 80);
// Using RGB values
fill(0, 255, 0);
rect(120, 20, 80, 80);
// Using RGBA (with alpha)
fill(0, 0, 255, 150);
rect(220, 20, 80, 80);
// Using HEX code
fill("#FFD700");
ellipse(60, 180, 80, 80);
// Using HSB mode
colorMode(HSB);
fill(200, 100, 100);
ellipse(180, 180, 80, 80);
// Using grayscale
colorMode(RGB);
fill(128);
ellipse(300, 180, 80, 80);
}
