Sketch Remixes

[jedahan]

Here is an example submission:

I took this sketch from roisinmcnulty:

function setup() {
  createCanvas(1240, 1240);
  background(255, 204, 0);
}
function draw() {
  fill(204, 102, 0);
  stroke(255, 204, 204);
  translate(width/2, height/2);
  rotate(PI/3.0);
  triangle(mouseX, mouseY, 58, 20, 86, 75);
}

and changed it to this code

function setup() {
  createCanvas(800, 600);
  background(255, 204, 0);
  frameRate(30);
  blendMode(OVERLAY);
}

function draw() {
  fill(204, 102, 0);
  stroke(255, 204, 204);
  translate(width/2, height/2);
  rotate(mouseX*(frameCount%360));
  triangle(mouseX, mouseY, 58, 20, 86, 75);
}

which now goes from

to

[penas326]

I took this sketch from liuy376:

function setup() {
    createCanvas(1600, 1024);
    background(255, 104, 0);
}

function draw() {
    if (mouseIsPressed) {
        fill(200, 30, 200);
    } else {
        fill(60, 150, 60);
}
ellipse(mouseX, mouseY, 80, 80);
ellipseMode(RADIUS); 
    if (mouseIsPressed) {
        fill(200, 30, 200);
    } else {
        fill(60, 150, 60);
}; 
ellipse(mouseX, mouseY, 50, 50, 30, 30); 

ellipseMode(CENTER); 

fill(20, 190, 20);
ellipse(mouseX, mouseY, 50, 50, 30, 30); 

}

and changed it to this code:

function setup() {
    createCanvas(1600, 1024);
    background(255, 104, 0);
    blendMode(SCREEN);
}

function draw() {
    if (mouseIsPressed) {
        fill(200, 30, 200);
    } else {
        fill(60, 150, 60);
}
triangle(mouseX, mouseY, 58,20,86,75);

ellipseMode(RADIUS); // Set ellipseMode to RADIUS
    if (mouseIsPressed) {
        fill(200, 30, 200);
    } else {
        fill(60, 150, 60);
    }

}

which now goes from:

to:

[kumol508]

I took this sketch from MariamAbutaleb

function setup() {
createCanvas(800,800);

}

function draw() {
    noFill();
    blendMode(MULTIPLY);
    strokeWeight(10);

    stroke(0,255,255);
    triangle(300,400,250,100,pmouseX,pmouseY);

    stroke(255,0,255);
    triangle(100,150,pmouseX,pmouseY,50,210);

    stroke(255,255,0);
    triangle(pmouseX,pmouseY,300,200,200,300);

}

and changed it to this code:

function setup() {
createCanvas(800,800);

}
var x=100
function draw() {
    noFill();

    blendMode(MULTIPLY);
    strokeWeight(10);

    stroke(0,255,255);
    ellipse(pmouseX, pmouseY, x-60, x-10);

    stroke(255,0,255);
    ellipse(pmouseY, pmouseX, x-30, x-60);

    stroke(255,255,0);
    ellipse(pmouseX, pmouseY, x-50, x);
}

    function mousePressed() {
       x += 50;
       redraw();
     }

which now goes from:

to:

[MariamAbutaleb]

I am trying to cd the empty-example folder but its not working , I get: No such file or directory What should I do?

[jedahan]

You can see what directory you are in with pwd, and you can see what files are in that directory with ls. The easiest way to get to the right directory is to first type cd, and then drag the folder from finder into the terminal window.

[hollyburt]

I took this code from MariamAbutaleb

and changed it too

heres my code function setup() { createCanvas(800, 800);

}

function draw() { noFill();

blendMode(SCREEN);
strokeWeight(1);

stroke(1,1,1);
ellipse(300,400,250,100,pmouseX,pmouseY);

stroke(100,0,0);
ellipse(100,150,pmouseX,pmouseY,50,210);

stroke(100,255,0);
ellipse(pmouseX,pmouseY,300,200,200,300);
 rotate(mouseX*(frameCount%180));

}

[ghost]

I took this from liuy376:

function setup() { createCanvas(1600, 1024); background(255, 104, 0); }

function draw() { if (mouseIsPressed) { fill(200, 30, 200); } else { fill(60, 150, 60); } ellipse(mouseX, mouseY, 80, 80); ellipseMode(RADIUS); if (mouseIsPressed) { fill(200, 30, 200); } else { fill(60, 150, 60); }; ellipse(mouseX, mouseY, 50, 50, 30, 30);

ellipseMode(CENTER);

fill(20, 190, 20); ellipse(mouseX, mouseY, 50, 50, 30, 30);

}

And Changed it to this code:

function setup() { createCanvas(1600, 1024); background(209, 209, 209); }

function draw() { if (mouseIsPressed) { fill(200, 30, 200); } else { fill(0, 0, 0); } line(mouseX, mouseY, 100, 100); ellipseMode(RADIUS); if (mouseIsPressed) { fill(200, 30, 200); } else { fill(0, 0, 0); }; line(mouseX, mouseY, 50, 50, 30, 30);

ellipseMode(CENTER);

fill(20, 190, 20); ellipse(mouseX, mouseY, 50, 50, 30, 30);

}

Which goes from this:

To this:

[brodo020]

from this:

function setup() { createCanvas (700, 600); }

function draw() {

if (mouseIsPressed) { rect (20,20,20, 20); fill(0); } else { rect (0,0,20, 20); fill(255); }

var rect_size = 20; rect(mouseX-60, mouseY, rect_size, rect_size); rect(mouseX+60, mouseY, rect_size, rect_size);

}

to this:

function setup() { createCanvas (500, 300); }

function draw() {

if (mouseIsPressed) {

rect (20,20,20, 20); fill(0); stroke(0) } else { rect (0,0,20, 20); fill(255); stroke(255) }

var rect_size = 20; rect(mouseX-60, mouseY, rect_size, rect_size); rect(mouseX+60, mouseY, rect_size, rect_size); rect(mouseX-60, mouseY-60, rect_size, rect_size); rect(mouseX+60, mouseY+60, rect_size, rect_size);

line(mouseX, mouseY, 150, 150, 130, 130); line(mouseX,mouseY,-150,150,-130,130)

}

[abruzga]

I took this sketch that opens as a still image....

.... and made this. Circles appear as you click on the screen.

function setup() {

createCanvas (displayWidth, displayHeight);
background(225,125,0);

}

function mousePressed() {

    noStroke();

    blendMode(EXCLUSION);

    //orange circle
    //fill(0,200,150);
    //ellipse(mouseX, mouseY, 360, 360);

//yellow circle

    fill(225,100,10);
    ellipse(mouseX, mouseY, 340, 340);

// smaller circles

fill(0,150,225);

ellipse(mouseX+90, mouseY+30, 70, 70);
ellipse(mouseX-100, mouseY-70, 65, 65);
ellipse(mouseX+85, mouseY-75, 95, 95);
ellipse(mouseX-30, mouseY+10, 80, 80);
ellipse(mouseX-15, mouseY-80, 35, 35);
ellipse(mouseX-90, mouseY+100, 55, 55);
ellipse(mouseX+40, mouseY+120, 45, 45);

}

[capre733]

I originally wanted to edit louz479's to make the lines be the time instead.. shooting out. because when I plugged it into my sublime it looked like a clock.. could not figure that out for the life of me.. so I did something different... i couldn't figure out how to make the dots trail like i wanted to, instead of be stagnant.. but i figured out how to make one change gradients? ? ? sorry if I just made this worse..

and for the code.. for some reason if i tried to get rid of the ellipses in the code.. the whole thing disappeared.. so I'm just overall confused I guess!

function setup() { createCanvas(640,400); background(370, 100, 140); lerpColor(210,111,1.2) }

var value = 0; function draw() { fill(value); ellipse(25, 25, 200, 200); } function mouseMoved() { value = value + 5; if (value > 255) { value = 0; } }

ellipse(56, 200, 20, 20); ellipse(40, 200, 12, 12); ellipse(40, 280, 12, 12); ellipse(50, 240, 30, 30); ellipse(36, 276, 12, 12); ellipse(100, 180, 50, 50); ellipse(253, 375, 33, 33); ellipse(400, 360, 22, 22); ellipse(385, 350, 12, 12); ellipse(473, 260, 22, 22); ellipse(500, 363, 33, 33); ellipse(400, 390, 12, 12); ellipse(620, 370, 22, 22); ellipse(600, 345, 12, 12); ellipse(596, 389, 32, 32); ellipse(356, 250, 20, 20); ellipse(400, 100, 12, 12); ellipse(430, 280, 12, 12); ellipse(500, 240, 30, 30); ellipse(360, 276, 12, 12); ellipse(170, 376, 42, 42); ellipse(170, 126, 62, 62); ellipse(610, 310, 62, 62); ellipse(210, 350, 82, 82); ellipse(610, 120, 82, 82); ellipse(570, 260, 32, 32); ellipse(56, 370, 22, 22); ellipse(103, 344, 22, 22); ellipse(146, 326, 12, 12); ellipse(106, 376, 12, 12);

[MariamAbutaleb]

I've been trying to cd the empty example folder for the past few days, but it keeps sending me: No such file or directory. I tried to drag it from finder into the terminal but it is still not working. What should I do?

[Sherifa]

This is the original code:

`` function setup() { createCanvas(1280, 1280); background(0); }

function draw() {

ellipse(640,640,300,300)

strokeWeight(1);
stroke(255);

line (640,640,mouseX,mouseY); strokeWeight(1); stroke(255); line (640,640,pmouseY,pmouseX);

} ``

It has been modified to:

`` function setup() { createCanvas(1280, 1280); background(255,0,0); }

function draw() {

arc(50,50,80,80,0)
noFill();
strokeWeight(1);
stroke(255);

line (640,640,mouseX,mouseY); strokeWeight(1); stroke(0); line (640,640,pmouseY,pmouseX); arc(50, 50, 80, 80, 0);
translate(30, 20); arc(50, 50, 80, 80, 0);
translate(14, 14); arc(50, 50, 80, 80, 0);

} `` Therefore allowing this:

To change to this:

[mariemoto]

I tried to do this assignment with the bear one but I couldn't figure out how to change the image so I chose this one instead. original code: function setup() { createCanvas(1500, 1500); background(255); }

function draw() {

ellipse(100,100,100,100)

line(100,100,mouseX,mouseY); strokeWeight(90); stroke(250,250,210) blendMode(MULTIPLY)

line (100,100,mouseX,mouseY); strokeWeight(60); stroke(30,144,255); blendMode(OVERLAY)

line (100,100,mouseY,mouseX); strokeWeight(500); stroke(255,0,0); }

changed to this

code: function setup() { createCanvas(1000, 1000); background(102,217,231); }

function draw() {

stroke(250,150,210);

ellipse(500,500,40,40)
ellipse(100,100,30,30)
ellipse(800,800,30,30)

line(100,100,mouseX+400,mouseY+400); strokeWeight(20); stroke(250,150,210) blendMode(OVERLAY)

line (500,500,mouseX,mouseY); strokeWeight(10); stroke(255,206,234); blendMode(MULTIPLY)

line (800,800,mouseY-400,mouseX-400); strokeWeight(30); stroke(255,206,234);

}

[liuy376]

I took MariamAbutaleb 's sketch

function setup() { // put setup code here createCanvas(800, 800);

background(255, 255, 255); } function draw() {

noFill(); blendMode(MULTIPLY); strokeWeight(10) stroke(200, 200, 200)

triangle(mouseX, mouseY, 100, mouseX, mouseY, 100, mouseX, mouseY, 100); noFill(); blendMode(MULTIPLY); stroke(255, 255, 255)

triangle(mouseX, mouseY, 20, mouseX, mouseY, 70, mouseX, mouseY, 100);

} to

[roisinmcnulty]

From this:

function setup() { createCanvas(1600, 1024); background(255, 104, 0); }

function draw() { if (mouseIsPressed) { fill(200, 30, 200); } else { fill(60, 150, 60); } ellipse(mouseX, mouseY, 80, 80); ellipseMode(RADIUS); if (mouseIsPressed) { fill(200, 30, 200); } else { fill(60, 150, 60); }; ellipse(mouseX, mouseY, 50, 50, 30, 30);

ellipseMode(CENTER);

fill(20, 190, 20); ellipse(mouseX, mouseY, 50, 50, 30, 30);

}

To this:

function setup() { createCanvas(1600, 1024); background(222, 0, 100); frameRate(30); blendMode(OVERLAY);

}

function draw() { if (mouseIsPressed) { fill(200, 30, 200); } else { fill(60, 150, 60); } ellipse(mouseX, mouseY, 80, 80); ellipseMode(RADIUS); if (mouseIsPressed) { fill(200, 30, 200); } else { fill(60, 150, 60); }; ellipse(mouseX, mouseY, 50, 50, 30, 30);

ellipseMode(CENTER);

fill(20, 190, 20); ellipse(mouseX, mouseY, 50, 50, 30, 30);

}

Note: I didn't change much besides the overlay although I tried adding a "mouseReleased" function and couldn't get it to work.. really struggling with p5js.

[kaemt]

I took this sketch from roisinmucnulty's remix by john:

function setup() {
  createCanvas(800, 600);
  background(255, 204, 0);
  frameRate(30);
  blendMode(OVERLAY);
}

function draw() {
  fill(204, 102, 0);
  stroke(255, 204, 204);
  translate(width/2, height/2);
  rotate(mouseX*(frameCount%360));
  triangle(mouseX, mouseY, 58, 20, 86, 75);
} 

and changing it to this:

function setup() {
  createCanvas(1800, 1600);
  background(135,206,250);
  frameRate(30);
  blendMode(OVERLAY);
}

function draw() {
  fill(255,20,147);
  stroke();
  translate(width/10, height/10);
  rotate(mouseX, mouseY*(frameCount%400));
  quad(mouseX, mouseY, 38, 31, 86, 20, 69, 63, 30, 76);
  fill (255,215,0)
  translate(width/50, height/40);
  rotate(mouseY, mouseX *(frameCount%500));
  quad(mouseX, mouseY, 38, 31, 86, 20, 69, 63, 30, 76)
} 

[ortik455]

Before

function setup() { createCanvas(640, 480); }

var noiseScale=0.02;

function draw() { background(50, 55, 100,1); for (var x=0; x < width; x++) { var noiseVal = noise((mouseX+x)_noiseScale, mouseY_noiseScale); stroke(noiseVal_200); line(x, mouseY+noiseVal_70, x, height); } }

Changed

function setup() { createCanvas(640, 480); }

var noiseScale=.009;

function draw() {

background(80, 40 ,80, 15); for (var x=0; x < width; x++) { var noiseVal = noise((mouseX+x)_noiseScale, mouseY_noiseScale); stroke(noiseVal_200); line(x, mouseY+noiseVal_70, x, height);

frameRate(3)

} }

before

after

[ghost]

I took this sketch from kaemt:

function setup() {
createCanvas(1500, 1500);
background(255);
}

function draw() {

    ellipse(100,100,100,100)

  line(100,100,mouseX,mouseY);
    strokeWeight(90);
    stroke(250,250,210)
    blendMode(MULTIPLY)

  line (100,100,mouseX,mouseY);
     strokeWeight(60);
    stroke(30,144,255);
    blendMode(OVERLAY)

  line (100,100,mouseY,mouseX);
  strokeWeight(500);
    stroke(255,0,0);

}

and changed it to this code

function setup() {
createCanvas(800, 800);
background(255);
blendMode(MULTIPLY)
}

function draw() {

    ellipse(400,400,400,400)

  stroke(255);
  blendMode(REPLACE)

  line(400,400,mouseX,mouseY);
    strokeWeight(80);
    stroke(250,154,0)
    blendMode(MULTIPLY)

  line (400,400,mouseX,mouseY);
     strokeWeight(40);
    stroke(255,230,0);
    blendMode(lightest)
}

From

To

[MariamAbutaleb]

I took this sketch from kumol508:

function setup() {
  createCanvas(400,450)
  noLoop()
  // 
}

var x=25
function draw() 
{
  clear()
  blendMode(LIGHTEST);
  strokeWeight(20);
  stroke(80,150,255);
  line(x,25,75,75);line(x+50,25,125,75);
  line(x+100,25,175,75);line(x+150,25,225,75);
  line(x+200,25,275,75);line(x+250,25,325,75);
  line(x+300,25,375,75);

  strokeWeight(10)
  line(x,50,75,100);
  line(x+50,50,125,100);line(x+100,50,175,100);
  line(x+150,50,225,100);line(x+200,50,275,100);
  line(x+250,50,325,100);line(x+300,50,375,100);

  strokeWeight(20)
  line(x,125,75,175);line(x+50,125,125,175);
  line(x+100,125,175,175);line(x+150,125,225,175);
  line(x+200,125,275,175);line(x+250,125,325,175);
  line(x+300,125,375,175);

  stroke(255,50,50);
  line(x+50,25,25,75);line(x+100,25,75,75);
  line(x+150,25,125,75);line(x+200,25,175,75);
  line(x+250,25,225,75);line(x+300,25,275,75);

  line(x+50,125,25,175);line(x+100,125,75,175);
  line(x+150,125,125,175);line(x+200,125,175,175);
  line(x+250,125,225,175);line(x+300,125,275,175);
  line(x+350,125,325,175);

  line(x+50,125,0,50);line(x+100,125,50,50);
  line(x+150,125,100,50);line(x+200,125,150,50);
  line(x+250,125,200,50);line(x+300,125,250,50);
  line(x+350,125,300,50);

  strokeWeight(10)
  line(x+50,100,25,150);
  line(x+100,100,75,150);line(x+150,100,125,150);
  line(x+200,100,175,150);line(x+250,100,225,150);
  line(x+300,100,275,150);
}

function mousePressed() {
  x+= 10;
  redraw();
} 

Changed the code to:

function setup() {
  createCanvas(600,660)
  noLoop()
  // 
}

var x=25
var y=25
function draw() 
{
  clear()
  blendMode(SCREEN);
  strokeWeight(15);
  stroke(64,224,208);
  triangle(x,25,75,x,y,75,x,y);triangle(x+50,25,125,75,x,y);
  triangle(x+100,25,175,x,y+y,75,x,y);triangle(x+150,25,225,75,x,y);
  triangle(x+200,25,275,x,y,75,x,y);triangle(x+250,25,325,75,x,y);
  triangle(x+300,25,375,x,y,75,x,y);

  strokeWeight(10)
  triangle(x,50,75,x,y,100);
  triangle(x+50,50,125,100);triangle(x+100,50,175,x,y+y,100);
  triangle(x+150,50,225,100);triangle(x+200,50,275,x,y,100);
  triangle(x+250,50,325,100);triangle(x+300,50,375,x,y,100);

  strokeWeight(5)
  triangle(x,125,75,x,y,175,x,y+y);triangle(x+50,125,125,175,x,y+y);
  triangle(x+100,125,175,x,y+y,175,x,y+y);triangle(x+150,125,225,175,x,y+y);
  triangle(x+200,125,275,x,y,175,x,y+y);triangle(x+250,125,325,175,x,y+y);
  triangle(x+300,125,375,x,y,175,x,y+y);

  stroke(199,21,133);
  triangle(x+50,25,25,75,x,y);triangle(x+100,25,75,x,y,75,x,y);
  triangle(x+150,25,125,75,x,y);triangle(x+200,25,175,x,y+y,75,x,y);
  triangle(x+250,25,225,75,x,y);triangle(x+300,25,275,x,y,75,x,y);

  triangle(x+50,125,25,175,x,y+y);triangle(x+100,125,75,x,y,175,x,y+y);
  triangle(x+150,125,125,175,x,y+y);triangle(x+200,125,175,x,y+y,175,x,y+y);
  triangle(x+250,125,225,175,x,y+y);triangle(x+300,125,275,x,y,175,x,y+y);
  triangle(x+350,125,325,175,x,y+y);

  triangle(x+50,125,0,50,x,y);triangle(x+100,125,50,50,x,y);
  triangle(x+150,125,100,50,x,y);triangle(x+200,125,150,50,x,y);
  triangle(x+250,125,200,50,x,y);triangle(x+300,125,250,50,x,y);
  triangle(x+350,125,300,50,x,y);

  strokeWeight(10)
  triangle(x+50,100,25,150,x,y);
  triangle(x+100,100,75,x,y,150);triangle(x+150,100,125,150,x,y);
  triangle(x+200,100,175,x,y+y,150);triangle(x+250,100,225,150,x,y);
  triangle(x+300,100,275,x,y,150);
}

function mousePressed() {
  x+= 25;
  y+=25;
  redraw();
  }

To achieve this:

[dikyt916]

original image:

original code: function setup() { createCanvas (1200,1600) // put setup code here }

function draw() { fill(255,215,0); noStroke(); ellipse(200,500,300,500); noFill(); fill(255,255,255); rect(0,700,500,200); noFill(); stroke(255); strokeWeight(20); line(0,500,500,800); line(0,300,500,600); line(0,700,500,0); line(100,700,500,200) noStroke(); fill(0,100,0); triangle(150,250,100,225,200,240); triangle(210,240,300,225,250,250); triangle(205,235,155,215,180,180); triangle(150,213,120,213,90,170); triangle(245,206,180,170,200,130); triangle(130,170,60,110,170,180); triangle(40,50,180,150,140,140); triangle(193,130,140,100,110,40); triangle(200,95,170,75,190,20); triangle(165,70,150,60,150,40); triangle(210,130,290,70,200,110); triangle(245,150,280,140,350,50); triangle(255,200,290,190,330,130); triangle(260,220,290,220,320,200); triangle(235,80,260,70,260,40); noFill(); fill(154,205,50); triangle(100,225,200,240,160,225); triangle(300,225,210,240,240,225); triangle(205,235,250,215,180,180); triangle(150,213,160,190,90,170); triangle(245,206,200,130,255,170); triangle(60,110,170,180,170,160); triangle(40,50,180,150,180,130); triangle(193,130,110,40,195,100); triangle(200,95,190,20,230,70); triangle(165,70,150,40,165,45); triangle(200,110,290,70,220,90); triangle(350,50,245,150,230,130); triangle(330,130,255,200,260,170); triangle(260,220,320,200,270,200); triangle(235,80,260,40,232,60);

// put drawing code here }

edited photo:

edited code: function setup() { createCanvas (1200,1600) background (255,215,0); }

function draw() { blendMode(BLEND); strokeWeight(1); stroke(10,25,0); scale(mouseX*(frameCount%20));

noStroke(); fill(0,100,0); triangle(150,250,100,225,200,240); triangle(210,240,300,225,250,250); triangle(205,235,155,215,180,180); triangle(150,213,120,213,90,170); triangle(245,206,180,170,200,130); triangle(130,170,60,110,170,180); triangle(40,50,180,150,140,140); triangle(193,130,140,100,110,40); triangle(200,95,170,75,190,20); triangle(165,70,150,60,150,40); triangle(210,130,290,70,200,110); triangle(245,150,280,140,350,50); triangle(255,200,290,190,330,130); triangle(260,220,290,220,320,200); triangle(235,80,260,70,260,40); noFill(); fill(154,205,50); triangle(100,225,200,240,160,225); triangle(300,225,210,240,240,225); triangle(205,235,250,215,180,180); triangle(150,213,160,190,90,170); triangle(245,206,200,130,255,170); triangle(60,110,170,180,170,160); triangle(40,50,180,150,180,130); triangle(193,130,110,40,195,100); triangle(200,95,190,20,230,70); triangle(165,70,150,40,165,45); triangle(200,110,290,70,220,90); triangle(350,50,245,150,230,130); triangle(330,130,255,200,260,170); triangle(260,220,320,200,270,200); triangle(235,80,260,40,232,60); }