// Bridget Doherty, bpdohert, 104 Section C
// draw at least 3 string art shapes
var dx1;
var dy1;
var dx2;
var dy2;
// line density
var numLines = 40;
// starting line values
var x1 = 0;
var y1 = 0;
var x3 = 0;
var y3 = 300;
// second line values
var x2 = 400;
var y2 = 300;
var x4 = 400;
var y4 = 0;
var mouseClick = 0;
function setup() {
createCanvas(400, 300);
background('black');
blendMode(EXCLUSION);
}
function draw() {
drawCircles();
string1();
string2();
string3();
noLoop();
}
function drawCircles() {
for (i = 20; i < width; i+= 40) {
fill(250);
noStroke();
circle(i*1.3, i, 40);
}
}
function string1() {
for(i = 0; i <= height; i += 10) {
stroke('green');
line(width/2.5, height/2, 0, i);
line(width/2.5, height/2, width, i);
}
for(i = 0; i <= width; i += 10){
stroke('yellow');
line(width/3 + width/2, height/2, 0, i);
line(width/3 + width/2, height/2, width, i);
}
}
function string2() {
stroke('blue');
dx1 = (300-50)/numLines;
dy1 = (0)/numLines;
dx2 = (50-300)/numLines;
dy2 = (300-300)/numLines;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
}
function string3() {
stroke('cyan');
dx1 = (300-50)/numLines;
dy1 = (0)/numLines;
dx2 = (50-300)/numLines;
dy2 = (300-300)/numLines;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
}
For this project, I tried to make a face out of simple lines. When constructing faces, it is always interesting to see how simplistic or complicated you could make it through the assumptions of what is considered a face.
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
function setup() {
createCanvas(400, 400);
background(200);
line(50, 50, 150, 300);
line(300, 300, 350, 100);
line(10,380,180,300);
line(280,260,370,390);
dx1 = (150-50)/numLines;
dy1 = (300-50)/numLines;
dx2 = (350-300)/numLines;
dy2 = (100-300)/numLines;
}
function draw() {
fill(0);
triangle(200,0,140,100,180,110);
triangle(180,140,200,120,280,145);
triangle(190,145,200,160,240,150);
var x1 = 50;
var y1 = 50;
var x2 = 300;
var y2 = 300;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
} for (var i = -150; i <= numLines * 2; i += 4) {
line(x1, y1, x2, y2);
x1 += dx1 / 2;
y1 += dy1 / 2;
x2 += dx2 / 2;
y2 += dy2 / 2;
//eyelashes i think
} for (var i = 1; i <= numLines * 2; i += 4) {
line(x2 * 5, y1 , x1 -50, y2 + 40);
var x1 = 0;
var x2 = 200;
var y1 = 300;
var y2 = 350;
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
//random lines for texture
} for (var i = 0; i <= numLines; i += 2) {
line(x1, y1 - 300, x2, y2 - 300);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
//hair
} for (var i = 0; i <= numLines; i += 2) {
x2 = 80;
y2 = 30;
line(x1, y1 - 300, x2, y2 - 300);
x1 -= dx1;
y1 -= dy1;
x2 += dx2;
y2 += dy2; }
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2; }
x1 = 10;
y1 = 380;
x2 = 280;
y2 = 260;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2; }
noLoop();
}
// Ilia Urgen
// Section B
var numLines = 60;
function setup() {
createCanvas (400,300);
color_1 = color (135,206,245);
color_2 = color (253,217,181);
// ombre
for (var y = 0; y < height; y++ ) {
n = map (y,0, height, 0, 1);
var color_3 = lerpColor (color_1, color_2, n);
stroke (color_3);
line (0, y, width, y);
}
stroke (0);
// canvas border lines
line (1,1,1,299);
line (1,1,399,1);
line (1,299,399,299);
line (399,1,399,299);
}
function draw() {
for (var i = 0; i <= numLines; i += 1) {
var x1 = 0;
var y1 = i * width / numLines;
var x2 = i * height / numLines;
var y2 = 300;
// lower eye curve
strokeWeight(0.5);
line (x1, y1, x2, y2);
// upper eye curve and pyramid side
line (x2, 0, 400, y1);
// lower eye lines
line (y1, x2 * 1.05, x1, y1 - 20);
// pyramid face
line (y2, x2, x1 - 2.1, y2 + 200);
// eye line
strokeWeight(2);
line (0,0,382,303);
}
//illuminati eye
push();
translate (185, 152);
rotate(radians(38));
fill (0);
ellipse (0,0,180,80);
fill (255);
ellipse (0,0,80);
fill (0);
ellipse (0,0,20);
pop();
noLoop();
}
/*
* Andrew J Wang
* ajw2@andrew.cmu.edu
* Section A
*
* This program draws line arts
*/
var maxNum = 30;
function setup() {
createCanvas(400, 300);
background(0);
}
function draw() {
background(0);
//using the 3 functions for 3 different shapes
backgroundStrings (50);
stroke(255);
circleStrings(200,150,200,500);
stroke(255,0,0,255);
circleStrings(200,150,100,58);
push();
fill(255);
ellipse(200,150,100);
pop();
stroke(255,0,0,255);
hexagonStrings(200,150,100,5,10);
}
function circleStrings(Cx,Cy,Cd,Cl) {
for (var k = 0; k < maxNum; k++)
{
//grabing points on the circle
y=sin((k*(360/maxNum))*Math.PI/180)*(Cd/2)+Cy;
x=cos((k*(360/maxNum))*Math.PI/180)*(Cd/2)+Cx;
//making lines that is perpandicular to the radius with adjustable lengths
p1X = x + cos(-(Math.PI/2-(k*(360/maxNum))*Math.PI/180))*Cl;
p1Y = y + sin(-(Math.PI/2-(k*(360/maxNum))*Math.PI/180))*Cl;
p2X = x - cos(-(Math.PI/2-(k*(360/maxNum))*Math.PI/180))*Cl;
p2Y = y - sin(-(Math.PI/2-(k*(360/maxNum))*Math.PI/180))*Cl;
line (p2X,p2Y,p1X,p1Y);
}
}
function hexagonStrings(Hx,Hy,Hd,num,seg) {
//make arrays
const array = [];
var angle = 360/num;
for (var k = 0; k < num; k++)
{
array[k] = new Array();
y=sin(-Math.PI/2+(k*angle)*Math.PI/180)*(Hd/2)+Hy;
x=cos(-Math.PI/2+(k*angle)*Math.PI/180)*(Hd/2)+Hx;
line (Hx,Hy,x,y);
for (var s = 0; s<seg; s++)
{
//3D array grabing every points on the line of the star
array[k][s] = new Array();
var y1=sin(-Math.PI/2+(k*angle)*Math.PI/180)*(Hd/2)*s/seg+Hy;
var x1=cos(-Math.PI/2+(k*angle)*Math.PI/180)*(Hd/2)*s/seg+Hx;
array[k][s][0] = x1;
array[k][s][1] = y1;
}
}
//cross connecting those lines using for loop
for (var k = 0; k < num-1; k++)
{
for (var s = 0; s<seg; s++)
{
line(array[k][s][0],array[k][s][1],array[k+1][seg-1-s][0],array[k+1][seg-1-s][1]);
}
}
for (var s = 0; s<seg; s++)
{
line(array[num-1][s][0],array[num-1][s][1],array[0][seg-1-s][0],array[0][seg-1-s][1]);
}
}
function backgroundStrings (num) {
for (var k=0; k<num; k++)
{
//cross connecting with for loop
stroke(255/num*k,0,0,255);
line (k*width/num,0,width,k*height/num);
line (width-k*width/num,height,0,height-k*height/num);
line (k*width/num,height,width,height-k*height/num);
line (width-k*width/num,0,0,k*height/num);
}
}
]]>//Srishty Bhavsar
//15-104
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
function setup() {
createCanvas(400, 400);
background(200);
text("p5.js vers 0.9.0 test.", 10, 15);
line(50, 50, 150, 300);
line(300, 300, 400, 100);
}
function draw() {
createCanvas(400,300);
//sky blue background
background(193,242,254);
// for loop that initializes =, lines up to 700, and spaced +1
dx1 = (150-50)/numLines;
dy1 = (300-50)/numLines;
dx2 = (350-300)/numLines;
dy2 = (100-300)/numLines;
// faint mountains in background
var x1 = -100;
var y1 = -30;
var x2 = 500;
var y2 = -200;
for (var i = 0; i <= numLines; i += 1) {
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
push()
stroke(167,84,41,40);
translate(200,150);
rotate(PI/3); // flipped so they look like mountains
line(x1/2, y1, x2, y2);
pop();
push()
stroke(167,84,41,30);
translate(100,150);
rotate(PI/3);
line(x1/2, y1, x2, y2);
pop();
}
for (var i = 0; i <= numLines; i += 1) {
var x1 = 0;
var x2 = (i*width)/50;
var y1 = (i*width)/50;
var y2 = height;
//Ocean blue waves (light to dark)
stroke(219,247,253);
line(x1 + 50, y1 + 100, x2, y2);
stroke(0,157,196); // brightest blue
line(x1, y1 + 80, x2, y2);
line(width + (x2), height - y1, x2, y2);
stroke(1,90,112); // oceanside blue
line(width+500, height-y1, x2, y2);
line(width+500, height-y1, x2 + 100 , y2);
line(x1, y1 + 150, x2, y2);
line(x1, y1 + 200, x2, y2);
//sand
stroke(246, 240, 210); // dark sand color
line(x1, height - 20, x2 - 100, height);
stroke(205, 170, 109); //lighter sand color
line(x1, height-30, x2 + 10, height);
stroke(255,255,240); //ivoru sand color
line(x1, height -10, x2 -100, height);
}
//setting sun
for (var i = 0; i <= 50 + numLines; i += 1) {
// sun sets position above water
var x1 = 200;
var y1 = 250;
stroke(250, 180, 20, 100); // sunny yellow
strokeWeight(2)
push() // stored
translate(x1, y1);
rotate((i*PI)/numLines); //center filled circle
line(0, 0, 0, 100); // rays
pop() // resets
}
noLoop();
}
]]>