![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2023/09/stop-banner.png)
/*
* 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);
}
}Category: Project-04-String-Art
Project 4 – String Art
When you reload it changes the color of the bottom left quadrant.
sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 30;
function setup() {
createCanvas(400, 300);
background(50);
strokeWeight(0.01);
stroke(255);
line(50, 150, 200, 250);
line(50, 150, 200, 50);
line(200, 50, 350, 150);
line(350, 150, 200, 250);
line(50, 150, 350, 150);
line(200, 50, 200, 250);
//line(50, 50, 150, 300);
//line(300, 300, 350, 100);
dx1 = (200-50)/(1.05*numLines); // top left line X
dy1 = (150-50)/(1.05*numLines); // "" Y
dx2 = (350-200)/(1.05*numLines); // top right line X
dy2 = (150-50)/(1.05*numLines); // "" Y
dx3 = (350-200)/(1.05*numLines); //bottom right line X
dy3 = (250-150)/(1.05*numLines); // "" Y
dx4 = (200-50)/(1.05*numLines); //bottom left line X
dy4 = (250-150)/(1.05*numLines); // "" Y
}
function draw() {
strokeWeight(0.3);
stroke(0, 255, 0); //Quadrant 1 Y Changing (Green)
var x1 = 50;
var y1 = 150;
var x2 = 200;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
y2 += dy2;
}
stroke(255, 0, 0);//Quadrant 2 Y Changing (Red)
var x3 = 350;
var y3 = 150;
var x2 = 200;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x3, y3, x2, y2);
y2 += dy2;
}
stroke(255, 0, 0); //Quadrant 3 Y Changing (Red)
var x3 = 350;
var y3 = 150;
var x4 = 200;
var y4 = 250;
for (var i = 0; i <= numLines; i += 1) {
line(x3, y3, x4, y4);
y4 -= dy4;
}
stroke(random(255), random(255), random(255)); //Quadrant 4 Y Changing (Random);
var x1 = 50;
var y1 = 150;
var x4 = 200;
var y4 = 250;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x4, y4);
y4 -= dy4;
}
stroke(77, 77, 255); //Quadrant 1 X Changing (Blue)
var x2 = 200;
var y2 = 50;
var x1 = 50;
var y1 = 150;
for (var i = 0; i <= numLines; i += 1) {
line(x2, y2, x1, y1);
x1 += dx1;
}
stroke(80, 200, 120);
var x2 = 200; //Quadrant 2 X Changing (Green)
var y2 = 50;
var x3 = 350;
var y3 = 150;
for (var i = 0; i <= numLines; i += 1) {
line(x2, y2, x3, y3);
x3 -= dx3;
}
stroke(0, 0, 255); //Quadrant 3 X Changing (Blue)
var x4 = 200;
var y4 = 250;
var x3 = 350;
var y3 = 150;
for (var i = 0; i <= numLines; i += 1) {
line(x4, y4, x3, y3);
x3 -= dx3;
}
stroke(random(255), random(255), random(255)); //Quadrant 4 X Changing (Random Color)
var x4 = 200;
var y4 = 250;
var x1 = 50;
var y1 = 150;
for (var i = 0; i <= numLines; i += 1) {
line(x4, y4, x1, y1);
x1 += dx1;
}
noLoop();
}
Project 04 String Art
Throughout this project, I felt it was a little difficult to figure out what I wanted to create, but it was interesting to consider how forms could appear with the use of repeated lines. Originally, I was thinking about a butterfly with the ground and sky as a background, but I decided to use translate and rotate to twist the ground to instead become colorful lines emphasizing the butterfly’s movement (instead of the ground) which I think makes it a little more fun and dynamic.
project3
// Rachel Legg / rlegg / Section C
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var numLines = 15;
function setup() {
createCanvas(300, 400);
background(0);
}
function draw() {
background(0);
//move over orgin and rotate so aligns w/ butterfly
push();
translate(-132, -20);
rotate(radians(15));
//light blue lines toward center @ slant
stroke(0);
strokeWeight(1);
line(0, 300, 10, 390);
line(250, 250, 200, 350);
dx1 = (10-0)/numLines;
dy1 = (390 - 300)/numLines;
dx2 = (350-250)/numLines;
dy2 = (200 - 250)/numLines;
stroke(135, 206, 235); //lightblue
var x1 = 0;
var y1 = 400;
var x2 = 180;
var y2 = 300;
for (var i = 0; i <= numLines; i += 1){
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//layer and tranlate green group to the right
push();
translate(0, 25);
rotate(radians(-15)); //more tilt and move orgin
noStroke();
strokeWeight(1);
line(0, 300, 10, 390);
line(250, 250, 200, 350);
dx1 = (10-0)/numLines;
dy1 = (390 - 300)/numLines;
dx2 = (350-250)/numLines;
dy2 = (200 - 250)/numLines;
stroke(144, 238, 144); //light green
var x1 = 0;
var y1 = 400;
var x2 = 180;
var y2 = 300;
for (var i = 0; i <= numLines; i += 1){
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
pop();
//layer and tranlate pink group to the right
push();
translate(0, 55);
rotate(radians(-30));
noStroke();
strokeWeight(1);
line(0, 300, 10, 390);
line(250, 250, 200, 350);
dx1 = (10-0)/numLines;
dy1 = (390 - 300)/numLines;
dx2 = (350-250)/numLines;
dy2 = (200 - 250)/numLines;
stroke(255, 0, 127); //pink
var x1 = 0;
var y1 = 400;
var x2 = 180;
var y2 = 300;
for (var i = 0; i <= numLines; i += 1){
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
pop();
//layer and tranlate purple group to the right
push();
translate(0, 120);
rotate(radians(-45));
noStroke();
strokeWeight(1);
line(0, 300, 10, 390);
line(250, 250, 200, 350);
dx1 = (10-0)/numLines;
dy1 = (390 - 300)/numLines;
dx2 = (350-250)/numLines;
dy2 = (200 - 250)/numLines;
stroke(147, 112, 219); //purple
var x1 = 0;
var y1 = 400;
var x2 = 180;
var y2 = 300;
for (var i = 0; i <= numLines; i += 1){
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
pop();
//layer and tranlate yellow group to the right
push();
translate(0, 170);
rotate(radians(-50));
noStroke();
strokeWeight(1);
line(0, 300, 10, 390);
line(250, 250, 200, 350);
dx1 = (10-0)/numLines;
dy1 = (390 - 300)/numLines;
dx2 = (350-250)/numLines;
dy2 = (200 - 250)/numLines;
stroke("yellow"); //yellow
var x1 = 0;
var y1 = 400;
var x2 = 180;
var y2 = 300;
for (var i = 0; i <= numLines; i += 1){
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
pop();
pop();
//butterfly!!!
//blue part of wings : top left to bottom right
push();
translate(175, 15); //make smaller and move to align w/ lines
rotate(radians(12));
scale(2/5);
stroke("blue");
strokeWeight(2);
line(0, 0, 50, 180);
line(250, 220, 300, 400);
dx1 = (50 - 0)/numLines;
dy1 = (180 - 0)/numLines;
dx2 = (300 - 250)/numLines;
dy2 = (400 - 220)/numLines;
var x1 = 0;
var y1 = 0;
var x2 = 250;
var y2 = 220;
for (var i = 0; i <= numLines; i += 1){
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//magenta part of wings : top right to bottom left
stroke("magenta");
strokeWeight(2);
line(50, 220, 0, 400);
line(300, 0, 250, 180);
dx3 = (0-50)/numLines;
dy3 = (400 - 220)/numLines;
dx4 = (250 - 300)/numLines;
dy4 = (180 - 0)/numLines;
var x3 = 50;
var y3 = 220;
var x4 = 300;
var y4 = 0;
for (var i = 0; i <= numLines; i += 1){
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
//butterfly body in center of criss cross
stroke("yellow");
strokeWeight(1);
noFill();
for(var l = 10; l <= 200; l += 10){ //repeated rings make up body
ellipse(150, l + 90, 10, 10);
}
line((width/2) + 3, height/4, (width/2) + 30, (height/4) - 35);
line((width/2) - 3, height/4, (width/2) - 30, (height/4) - 35);
pop();
noLoop();
}
Project 04 – String Art
This project consists of abstract string art made with multiple stacking of straight lines, creating an illusion of circles that look like octagons. The most challenging part of this project is organizing the direction the lines are going.
sketch
//Jenny Wang
//Section B
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var dx6;
var dy6;
var dx7;
var dy7;
var dx8;
var dy8;
var numLines = 15
function setup() {
createCanvas(400, 300);
background("black");
var cx = width/2 //center x
var cy = height/2 //center y
//draw ellipse
noStroke();
fill(110);
ellipse(cx,cy,110,110);
fill(180);
ellipse(cx,cy,80,80);
fill(230);
ellipse(cx,cy,50,50);
stroke("blue")
line(cx,cy,width/2,0);//line 1
line(cx,cy, width, height/2);//line2
line(cx,cy,width/2,height);//line 3
line(cx,cy, 0,height/2);//line4
//Q1
dx1 = (cx-cx)/numLines;
dy1 = (cy-0)/numLines;
dx2 = (width-cx)/numLines;
dy2 = (cy-cy)/numLines;
//Q2
dx3 = (cx-cx)/numLines;
dy3 = (cy-height)/numLines;
dx4 = (width-cx)/numLines;
dy4 = (cy-cy)/numLines;
//Q3
dx5 = (cx-cx)/numLines;
dy5 = (cy-height)/numLines;
dx6 = (0-cx)/numLines;
dy6 = (cy-cy)/numLines;
//Q4
dx7 = (cx-cx)/numLines;
dy7 = (cy-0)/numLines;
dx8 = (0-cy)/numLines;
dy8 = (cy-cy)/numLines;
}
function draw() {
//Q1.1
var x1 = width/2;
var y1 = 0;
var x2 = width/2;
var y2 = height/2;
for (var i = 0; i <= numLines; i += 1) {
stroke("lightblue")
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Q2.1
var x3 = width/2;
var y3 = height;
var x4 = width/2;
var y4 = height/2;
for (var i = 0; i <= numLines; i += 1) {
stroke("pink")
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
//Q2.2
var x3 = width;
var y3 = height/2;
var x4 = width/2;
var y4 = height/2;
for (var i = 0; i <= numLines; i += 1) {
stroke("white")
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
//Q2.3
var x3 = 0;
var y3 = height/2;
var x4 = width/2;
var y4 = height/2;
for (var i = 0; i <= numLines; i += 1) {
stroke("grey")
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
//Q3.1
var x5 = width/2;
var y5 = height;
var x6 = width/2;
var y6 = height/2;
for (var i = 0; i <= numLines; i += 1) {
stroke("lightgreen")
line(x5, y5, x6, y6);
x5 += dx5;
y5 += dy5;
x6 += dx6;
y6 += dy6;
}
//Q3.2
var x5 = 0;
var y5 = height/2;
var x6 = width/2;
var y6 = height/2;
for (var i = 0; i <= numLines; i += 1) {
stroke("white")
line(x5, y5, x6, y6);
x5 += dx5;
y5 += dy5;
x6 += dx6;
y6 += dy6;
}
//Q3.3
var x5 = width;
var y5 = height/2;
var x6 = width/2;
var y6 = height/2;
for (var i = 0; i <= numLines; i += 1) {
stroke("grey")
line(x5, y5, x6, y6);
x5 += dx5;
y5 += dy5;
x6 += dx6;
y6 += dy6;
}
//Q4.1
var x7 = width/2;
var y7 = 0;
var x8 = width/2;
var y8 = height/2;
for (var i = 0; i <= numLines; i += 1) {
stroke(224,199,166)
line(x7, y7, x8, y8);
x7 += dx7;
y7 += dy7;
x8 += dx8;
y8 += dy8;
}
noLoop();
}
Project 04 – String Art
//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();
}
string art
islandd sketch
function setup() {
createCanvas(400, 300);
background("lightsteelblue");
}
function draw() {
strokeWeight(0.5);
numLines = 30;
//sun beams
strt(-width, 0, width, 2*height, 0, 0, width, 0, 20, "yellow");
fill("yellow");
ellipse(width, 0, 100); //sun
//mountains
fill("green");
triangle(90, 150, 20, 250, 390, 250);
triangle(290, 150, 390, 250, 20, 250);
stroke("green");
line(90, 150, 20, 250); //left mountain
line(290, 150, 390, 250); //right mountain
crshtch(90, 150, 20, 250, 290, 150, 390, 250, numLines, "palegreen");
crshtch(290, 150, 390, 250, 90, 150, 20, 250, numLines, "palegreen");
//water
fill("lightseagreen");
rect(0, 250, 400, 50);
lne(0, 250, 0, 300, 400, 250, 400, 300, 30, "blue");
}
//diag crosshatch
function crshtch(x1, y1, x2, y2, x3, y3, x4, y4, numLines, colour){
stroke(colour);
dx3 = (x4-x3)/numLines;
dy3 = (y4-y3)/numLines;
dx1 = (x2-x1)/numLines;
dy1 = (y2-y1)/numLines;
dx2 = (x4-x3)/numLines;
dy2 = (y4-y3)/numLines;
for(var i = 0; i <= numLines; i ++){
line(x1, y1, x4, y4);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
x3 += dx3;
y3 += dy3;
}
}
//light lines
function strt(a1, b1, a2, b2, a3, b3, a4, b4, numLines, colour){
stroke(colour);
dx3 = (a4-a3)/numLines;
dy3 = (b4-b3)/numLines;
dx1 = (a2-a1)/numLines;
dy1 = (b2-b1)/numLines;
dx2 = (a4-a3)/numLines;
dy2 = (b4-b3)/numLines;
for(var i = 0; i <= numLines; i ++){
line(a1, b1, a4, b4);
a1 += dx1;
b1 += dy1;
}
}
//straight lines
function lne(x1, y1, x2, y2, x3, y3, x4, y4, numLines, colour){
stroke(colour);
dy1 = (y2-y1)/numLines;
dy3 = (y4-y3)/numLines;
for(var i = 0; i <= numLines; i ++){
line(x1, y1, x3, y3);
y1 += dy1;
y3 += dy2;
}
}
week 04 project
for this project, I wanted to make a heart shape using string art!
sketch
var dx1;
var dy1;
var dx2;
var dy2;
var tx1;
var ty1;
var tx2;
var ty2;
var qx1;
var qy1;
var qx2;
var qy2;
var numLines = 50;
var numLinesb = 50;
var numLinesc = 50;
function setup() {
createCanvas(400, 400);
background(255,240,250);
//corresponds to bottom part of heart
dx1 = (-250)/numLines; //bottom left x
dy1 = (600)/numLines; //bottom left y
dx2 = (300)/numLines; // top right x
dy2 = (-700)/numLines; // top right y
//corresponds to top right part of heart
tx1 = (0)/numLinesb; //bottom left x
ty1 = (-600)/numLinesb; //bottom left y
tx2 = (200)/numLinesb; // top right x
ty2 = (700)/numLinesb; // top right y
//corresponds to top left part of heart
qx1 = (-100)/numLinesc; //bottom left x
qy1 = (500)/numLinesc; //bottom left y
qx2 = (0)/numLinesc; // top right x
qy2 = (-600)/numLinesc; // top right y
}
function draw() {
//following is bottom part of heart
stroke(200,100,100); //pink lines
var x1 = 0; //left x
var y1 = 200; //left y
var x2 = 400; //right x
var y2 = 600; //right y
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
} //following is right upper part of heart
stroke(255,100,200); // hot pink lines
var a1 = 200; //left x
var b1 = 250; //left y
var a2 = 400; //right x
var b2 = 0; //right y
for (var i = 0; i <= numLinesb; i += 1) {
line(a1, b1, a2, b2);
a1 += tx1;
b1 += ty1;
a2 += tx2;
b2 += ty2;
} // following is left upper part of heart
var c1 = 0; //left x
var d1 = 0; //left y
var c2 = 200; //right x
var d2 = 250; //right y
for (var i = 0; i <= numLinesc; i += 1) {
line(c1, d1, c2, d2);
c1 += qx1;
d1 += qy1;
c2 += qx2;
d2 += qy2;
}
stroke(240,100,240); //pink 3
for (var i = 2; i <= 100; i += 4){ //right side of heart
line(320,0,2.5*i+350,200);
line(2.5*i+350,200,320,400);
}
for (var i = 2; i <= 100; i += 4){ //left side of heart
line(80,0,2.5*i-220,200);
line(2.5*i-220,200,80,400);
}
noLoop();
}Project 04: String Art
sketchDownload
//fcooper felix cooper d
var s1=100;
var s2=0;
var s3=150;
var s4=50;
var numLines=50;
var f1=100;
var f2=0;
var f3=50;
var f4=50;
var h1=100;
var c1=50;
var c2=100;
var c3=150;
var c4=100;
function setup() {
createCanvas(200, 200);
background(220);
}
function draw() {
for(var i = 0; i < numLines; i += 1){
line(s1,s2,s3,s4);
s1=s1+5;
s4=s4+3;
}
for(var i = 0; i < numLines;i += 1){ //mirrors s
line(f1,f2,f3,f4);
f1=f1-5;
f4=f4+3
}
for(var i = 0; i < numLines; i += 1){ //lines down the middle
line(50,h1,150,h1);
h1+=3;
}
for(var i = 0; i <= 5; i += 1){ // draws hourglass
line(c1,c2,c3,c4);
c1+=2;
c2+=2;
c3-=2;
c4+=2;
}
}
I wanted to try to make some sort of perspective illusion but I think it ended up being an illusion of an illusion in a way. It makes you think maybe something weird is going on but its just fun shapes.
Project 04: String Art
Move your mouse to create different forms!
sketch
//Angela Yang
//Section C
var numLines = 100;
var r;
var g;
var b;
function setup() {
createCanvas(300, 400);
r = random (0, 255);
g = random (20, 255);
b = random (100, 255);
}
function draw() {
background("#F6F4D8");
//The mouse controls the motion of the strings on canvas.
var x = constrain(mouseX, 50, width);
var y = constrain(mouseY, 50, height);
//Mirror x and y coordinates.
var x2 = width - x;
var y2 = height - y;
// First set
//The string is incremeting by 5 for each line that is drawn on canvas.
for (var i = 0; i <=numLines; i += 5) {
stroke(r, g, b);
line(i, y2, x2, height + i);
line(width + i, y, x, i);
line(width + i, y2, x, height + i);
line(i, y, x2, i);
}
//Second Set
for (var i = 0; i <=numLines; i += 10) {
stroke(0, 204, 204);
line(width - i, y, x2, height);
line(i, y2, x, i);
line(width - i, y2, x2, i);
line(i, y, x, height);
//Third Set
for (var i = 0; i <=numLines; i += 5) {
stroke(0, 160, 150);
line(width - i, y, x2, height+i);
line(i, y2, x2, i);
line(width - i, y, x2, i);
line(i, y, x, height+i);
}
}
}Project 04: String Art
sketch
in this project, I tried to use different colors and combinations of strings to compose a gradually changing geometry that goes from edge to the center.
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var numLines = 50;
var c;
function setup() {
createCanvas(400, 300);
background(0);
//base set of lines #1
/*line(width/4,0,0,height/3);
line(0,height/3,width/2,height/3);*/
/*line(1,300,2,1);
line(2,1,200,150);
line(200,150,398,299);
line(398,299,399,1);*/
dx1=(2-1)/numLines;
dy1=(1-300)/numLines;
dx2=(200-2)/numLines;
dy2=(150-1)/numLines;
dx3=(398-200)/numLines;
dy3=(299-150)/numLines;
dx4=(399-398)/numLines;
dy4=(1-299)/numLines;
//define the change of x, y variables
/*dx1 = (0-width/4)/numLines;
dy1 = (height/3-0)/numLines;
dx2 = (width/2-0)/numLines;
dy2 = (height/3-height/3)/numLines;*/
}
//draw first set of strings
function draw() {
var x1 = 1;
var y1 = 300;
var x2 = 2;
var y2 = 1;
var x3 = 200;
var y3 = 150;
var x4 = 398;
var y4 = 299;
stroke(0,255,0);
//in a for loop, when a increases, x1+= a*dx1)
//for(var e=0;e<=5;e+=1){
//dx2=e*dx2;
/*x1 += e*dx1;
y1 += e*dy1;
x2 += e*dx2;
y2 += e*dy2;
x3 += e*dx3;
y3 += e*dy3;
x4 += e*dx4;
y4 += e*dy4;*/
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
line(x3,y3,x4,y4);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
string02();
string03();
string04();
noLoop();
}
//second set of strings
function string02(){
var x5 = 2;
var y5 = 1;
var x6 = 399;
var y6 = 50;
var x7 = 1;
var y7 = 250;
var x8 = 399;
var y8 = 300;
stroke(255);
for (var e =0; e <= 20; e += 1) {
line(x5, y5, x6, y6);
line(x7,y7,x8,y8);
x5 += dx1;
y5 -= dy1;
x6 += dx2;
y6 -= dy2;
x7 -= dx3;
y7 += dy3;
x8 -= dx4;
y8 += dy4;
}
}
//third set of strings
function string03(){
var x9 = 2;
var y9 = 1;
var x10 = 399;
var y10 = 100;
var x11 = 1;
var y11 = 200;
var x12 = 399;
var y12 = 300;
stroke(195,255,195);
for (var l =0; l <= 25; l += 1) {
line(x9, y9, x10, y10);
line(x11,y11,x12,y12);
x9 += dx1;
y9 -= dy1;
x10 += dx2;
y10 -= dy2;
x11 -= dx3;
y11 += dy3;
x12 -= dx4;
y12 += dy4;
}
}
//fourth set of strings
function string04(){
var a = 2;
var b = 1;
var c = 399;
var d = 200;
var e = 1;
var f = 100;
var g = 399;
var h = 300;
stroke(90,255,90);
for (var l =0; l <= 28; l += 1) {
line(a, b, c, d);
line(e,f,g,h);
a += dx1;
b -= dy1;
c += dx2;
d -= dy2;
e -= dx3;
f += dy3;
g -= dx4;
h += dy4;
}
}
//}
//noLoop();
//devide the lines
//connect different parts on each line
//define a function for different lines and variable