Jdbrown-Sketch
function setup() {
createCanvas(1000, 1000);
background(104, 18, 63);
text("p5.js vers 0.5.12 test.", 10, 15);
createDiv("p5.dom.js library is loaded.");
createDiv("Listen for 2 second tone to confirm p5.sound.js is loaded.");
osc = new p5.TriOsc();
osc.freq(220.0);
osc.amp(0.1);
osc.start();
// JDBROWN - JOSHUA BROWN
// JDBROWN@ANDREW.CMU.EDU
}
function draw() {
if (millis() > 2000) {
osc.stop();
noLoop();
}
noStroke()
fill (175, 80, 100);
ellipse (520, 350, 250, 370); // hair (back poof)
fill (220, 80, 100);
ellipse (266, 315, 100, 100); // hair (side poof, back)
fill (222, 132, 136);
ellipse (400, 400, 350, 350); // main face (light pink)
fill (217, 113, 118);
ellipse (467, 400, 215, 290); // face shade (dark pink)
fill (220, 80, 100);
ellipse (410, 225, 390, 200); // hair (main poof, top)
fill (185, 80, 100);
ellipse (525, 320, 100, 100); // hair (side poof, upper right)
fill (185, 80, 100);
ellipse (560, 375, 100, 100); // hair (side poof, lower right)
fill (180, 80, 100);
ellipse (455, 226, 300, 190); // hair shade (main poof, top)
fill (220, 130, 150);
ellipse (275, 200, 30, 30); // hair shine (smol, top)
fill (220, 130, 150);
ellipse (230, 300, 20, 20); // hair shine (smol, side)
fill (220, 130, 150);
ellipse (250, 240, 50, 50); // hair shine (bigger, top)
fill (0);
ellipse (300, 405, 15, 15); // mouth (left)
fill (0);
ellipse (400, 405, 15, 15); // mouth (right)
fill (0);
rect (300, 400, 100, 10); // mouth bridge (center)
fill (220, 150, 150);
ellipse (400, 365, 10, 40); // tear (right)
fill (190, 120, 120);
ellipse (300, 365, 10, 40); // tear (left)
fill (0);
ellipse (300, 350, 10, 10); // eye (left)
fill (0);
ellipse (400, 350, 10, 10); // eye (right)
fill (0);
arc (400, 340, 50, 100, 180, PI, PIE); // eye (right)
fill (0);
arc (300, 340, 50, 100, 180, PI, PIE); // eye (right)
fill (217, 113, 118);
ellipse (350, 450, 50, 50); // chin (dark)
fill (222, 132, 136);
ellipse (350, 460, 40, 40); // chin (light)
}
/* Notes: Wednesday, Aug. 30, 2017
____________________________________________________________
Week 1 Submission Notes:
Submit "Assignments" through AutoLab in a .zip file.
Submit "Projects" as blogposts, through WordPress.
____________________________________________________________
Co-ordinates and Drawing:
For example: "line(1, 0, 4, 5);"
This expression will draw a line from points (1,0) to (4, 5). These are modeled by (x, y).
In computing, however, the axes are slightly different. X is conserved, with positive numbers
going right, and negatives going left. But the Y axis is opposite; negative numbers go up, and
positive numbers go down.
For example: "rect(1, 2, 4, 3);" which is modeled by "rect(x, y, width, height);"
This expression will draw a rectangle from the point (x = 1, y = 2);
In a more advanced way, you can use Mode commands (rectMode, etc.) to change the way in which
the program interprets that data. rectMode(center), for instance, will draw the rectange from
the center instead of the top-left corner, as "rect()" will.
When creating a new sketch, input the following code:
function setup() {
// put setup code here
createCanvas(1000, 1000);
}
function draw() {
// put drawing code here
}
This will allow the sketch to...sketch.
___________________________________
Here is an introduction to shapes:
in:
function draw() {
// draw a point:
ellipse(x, y); modeled after "ellipse(x1, y1);"
// draw a line:
line(30, 30, 50, 50); modeled after "line(x1, y1, x2, y2);"
// draw a rectangle:
rect(30, 30, 50, 50); modeled after "rect(x1, y1, x2, y2);"
where (x1, y1) is the first point (left, top)
and (x2, y2) is the second (right, bottom).
The rectangle will fill in from the first point
to the second.
// draw circle:
ellipse(300, 300, 250, 250) modeled after "ellipse(x, y, width, height);"
where (x, y) plots the point of the center,
width extends it sideways (width/2) in -x, / +x,
and height entends it upwards (height/2) in -y / +y.
// draw a triangle:
triangle(30, 75, 50, 20, 85, 70); modeled after "triangle(x1, y1, x2, y2, x3, y3);"
where (x1, y1) are the co-ordinates for the first
point (leftmost); (x2, y2) are the co-ordinates
for the second point, and (x3, y3) are the co-
ordinates for the third point (rightmost).
// draw a quadrilateral:
quad(30, 40, 50, 40, 60, 60, 70, 90); modeled after "quad(x1, y1, x2, y2, x3, y3, x4, y4);"
where each edge of the point, starting from the top-left
and ending with the bottom-right, are plotted with each
pair of points (x1, y1), (x2, y2), etc.
// draw an arc;
arc(50, 55, 50, 50, 0, half_pi); modeled after "arc(x, y, width, height, angle, angle, [mode]);"
where (x, y) are the center of the arc's ellipse, (width, height)
are the width and height of the ellipse. "angle, angle" are the
angle values to start and stop the arc, respectively - this value
is expressed in radians. [Mode] is either CHORD or PIE.
}
______________________________________________________________________________
Drawing shapes is great, but perhaps we want the shapes to not look like shit?
You can add many parameters before actually drawing the shape. You must add all
setup information before drawing the shape, otherwise it will not work.
Parameters work top-to-bottom; if you write "fill(0)" on line 5, everything
after line 5 will be "filled" with that color (in this case, black).
To redefine fill colors, you must write more "fill(x)" commands further down.
Here is an introduction to parameters:
fill(0); to fill a shape black
fill(255, 255, 255); to fill a shape white
fill(0, 56, 101); to fill a shape a random color (RGB values)
stroke(0); to outline a shape in black
stroke(255, 255, 255); to outline a shape in white
stroke(0, 0, 255) to outline a shape in a color
You can set the stroke weight (how thick the outline "stroke(x)" creates will be), with:
strokeWeight (10); in which (x) is a pixel value ("strokeWeight (10)" will create an outline
with a thickness of 10 pixels).
noStroke(); will remove stroke from objects, since objects are stroked by default.
i.e. if you do not type
__________________________________________________________________________________________________
*/
![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
