First sketches

[jedahan]

Remember there are two ways to view your sketch: open index.html in any web browser or run python -m SimpleHTTPServer in the directory, and view 127.0.0.1:8000 Here is an example submission

Screenshot

)

Program

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

function draw() {
  textSize(32);
  text("WAT", mouseX, mouseY);
}

Inspiration:

[MariamAbutaleb]

Screenshot

Program

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

function draw() {
    noFill();
    blendMode(EXCLUSION);
    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);
}

Inspiration

---

Screenshot

Program

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);

}

Inspiration:

[penas326]

Screenshot:

Program:

function setup() { createCanvas(640, 480); } function draw() { textFont("Impact"); noStroke(); fill(58,183,298);

{textSize(82); //text(str,x,y,x2,y2) text("STREET", 20, 50, 80, 80); textSize(40); text("STREET", 10, 400, 200, 200); textSize(60); fill(57,206,186); text("STREET", 350, 110, 20, 20);
textSize(160) text("STREET",-10,300,20,89);
textSize(100); text("STREET",240,460,00,200); textSize(24); fill(57,206,186); text("PRINTING",100,460,00,200); textSize(24); fill(195,199,199); text("PRINTING",100,80,60,150); textSize(24); text("PRINTING",480,300,20,89); } c = color(44, 62, 155); // Define color 'c' stroke(c); strokeWeight(10); noFill(); ellipse(mouseX,mouseY, 80, 80); }

Inspiration:

[brodo020]

Screenshot:

Program:

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); } }

Inspiration: The Misty Mountain Cold from The Hobbit: An Unexpected Journey

https://www.youtube.com/watch?v=BEm0AjTbsac

[kumol508]

Screenshot

Program

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();
}

Inspiration Karel Martens

Natalia Stuyk

[capre733]

I have Sublime open and i have opened the Sketch.js file but when i type in http://127.0.0.1:8000/ i'm not getting anything popping up. It's not blank, just says this webpage is not available. What am I doing wrong?

Also, top right of my sublime box says UNREGISTERED, does that have something to do with it?

[ortik455]

Inspiration: Andy Mercer - White Noise

Code: 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);

}

Screenshot:

[jedahan]

@capre733 try opening a terminal (search for terminal in spotlight), then you have to cd into the empty-example folder. The easiest way to do that, is to type c d, drag the folder into the terminal window, and hit enter. Then you can start the web server with python -m SimpleHTTPServer. Try refreshing the page, once that works.

[hollyburt]

Inspiration: Artist: André and Michel Décoster Work: human pendulum Link: http://www.digicult.it/news/pendulum-choir-prix-ars-electronica-2013-from-breathe-to-movement-through-technology/

[roisinmcnulty]

Screenshot:

Program (in progress):

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); }

Inspiration:

[capre733]

@jedahan sorry, still not working for me. any way you could send screenshots?

[liuy376]

this is what i can do so far

function setup() { // put setup code here 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); // Set ellipseMode to RADIUS if (mouseIsPressed) { fill(200, 30, 200); } else { fill(60, 150, 60); }; // Set fill to white ellipse(mouseX, mouseY, 50, 50, 30, 30); // Draw white ellipse using RADIUS mode

ellipseMode(CENTER); // Set ellipseMode to CENTER

fill(20, 190, 20);

ellipse(mouseX, mouseY, 50, 50, 30, 30); // Draw gray ellipse using CENTER mode

[ghost]

Screenshot

Program

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);

}

Inspiration

[abruzga]

Unfortunately I was unable to do what I intended, but here is what I got for now.

Screenshots

Program

var img; function preload() { img = loadImage('bear.jpg'); }

function setup() { createCanvas(2000, 2000); image(img, 200, 500);

}

function draw() { if(mouseIsPressed) { //fill(225); //textSize(50); //} else { fill(0); //textSize(80); //} //clear();

//fill(mouseX-mouseY); textSize(mouseX+mouseX); text("z", mouseX, mouseY); }

}

Image (file)

Inspiration

[kaemt]

For some reason the yellow fades to black I'm not sure what does it.

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);

}

Inspiration: Tom Fruin

[capre733]

Screenshot:

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 }

Inspiration:

[Sherifa]

Inspiration:

Code:

`` unction setup() { createCanvas (640, 480); }

function draw() { //draw an ellipse //ellipse(x, y, width, height) if (mouseIsPressed) { fill (0,255,255); } else { fill (0,0,255); }

var ellipse_size = 80;

ellipse(mouseX-40, mouseY, ellipse_size, ellipse_size); ellipse(mouseX+40, mouseY, ellipse_size, ellipse_size);

}

``

[mariemoto]

Code: function setup() { // put setup code here // createCanvas(640, 480); // YOU CAN CREATE A NEW CANVAS WITH THIS FUNCTION createCanvas (800, 600); background(225,125,0);

}

function draw() { noStroke();

fill(254,255,3); //center ellipse(350, 340, 380, 380); fill(254,255,3); //topleft ellipse(60, 150, 200, 200); fill(254,255,3); //bottom ellipse(700, 450, 280, 280); fill(254,255,3); //topright ellipse(680, 70, 300, 300); //leftbottom ellipse(70, 530, 240, 240);

//the smaller circles fill(0); //lefttop ellipse(10, 120, 70, 70);

ellipse(130, 160, 35, 35);
ellipse(100, 90, 55, 55);
ellipse(85, 210, 55, 55);

//leftbottom
ellipse(85, 450, 55, 55);
ellipse(25, 520, 35, 35);
ellipse(110, 570, 55, 55);
ellipse(140, 500, 35, 35);

//center ellipse(300, 210, 70, 70); ellipse(450, 250, 55, 55); ellipse(400, 380, 90, 90); ellipse(210, 320, 80, 80);

ellipse(490, 435, 35, 35);
ellipse(270, 440, 35, 35);
ellipse(355, 500, 45, 45);

//rigthtop
ellipse(620, 35, 70, 70);
ellipse(630, 140, 55, 55);
ellipse(750, 45, 35, 35);
ellipse(700, 190, 35, 35);
ellipse(770, 120, 45, 45);
ellipse(560, 100, 35, 35);

//rightbottom
ellipse(720, 550, 60, 60);
ellipse(730, 380, 70, 70);

ellipse(760, 460, 35, 35);
ellipse(610, 475, 35, 35);
ellipse(630, 360, 35, 35);

}

Inspiration:

[dikyt916]

function setup() { createCanvas(640,400); background(370, 100, 140); }

function draw() {

blendMode(LIGHTEST); strokeWeight(700); stroke(100, 150, 255); line(65, 25, 70, 75); stroke(75, 35, 50); line(75, 23, 95, 75);

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); }

[jedahan]

:tomato: == 3 points :cactus: == 2 points :cow: == 1 point

@MariamAbutaleb wow ok the screenshots don't do this sketch justice. Really fun to see how glitchy it gets when moving the mouse around. Also I'm a sucker for the CMYK colors. :tomato:

@brodo020 so, good job reappropriating the noise example, and turning it into something more interesting. :tomato:

@kumol508 this is one of the most creative ways of having the images change - using mousePressed to mess with x to generate lots of small variations on a theme. Programming languages are good for this kinda stuff, keep it up! :tomato:

OK this is taking longer than I expected to respond to each homework. From here on out, as an added bonus, the first three or so submissions for all homework will get some sort of feedback from me. After that, no gaurantee, just whatever grades pop up on canvas. Of course if you want to take any work further you can always ask in class or after class and i'll be glad to discuss/riff on whatever ideas you have.

Grading All submissions before Oct 1 got :tomato:. Woohoo! All submissions after Oct 1 got +1 point. So if that was your first submission, you got 1/3. If you submitted on time and then made an improvement and resubmitted, you'll get a 4/3. Theres still a day left to get +1 on this homework!

Everybody I'd be interesting in knowing if you started by messing with examples, then finding inspiration, or started with the inspiration and tried to find an example. Both ways are totally OK! I just wanna know what most people did so that I can make the exercise better for the next class!

[penas326]

I revised my code so now the user can point and click where the circles go.

It went from:

function setup() {
createCanvas(640, 480);
}
function draw() {
textFont("Impact");
noStroke();
fill(58,183,298);

{textSize(82);
//text(str,x,y,x2,y2)
text("STREET", 20, 50, 80, 80); 
textSize(40);
text("STREET", 10, 400, 200, 200);
textSize(60);
fill(57,206,186);
text("STREET", 350, 110, 20, 20);

textSize(160)
text("STREET",-10,300,20,89);

textSize(100);
text("STREET",240,460,00,200);
textSize(24);
fill(57,206,186);
text("PRINTING",100,460,00,200);
textSize(24);
fill(195,199,199);
text("PRINTING",100,80,60,150);
textSize(24);
text("PRINTING",480,300,20,89);
}
c = color(44, 62, 155); // Define color 'c'
stroke(c);
strokeWeight(10);
noFill(); 
ellipse(mouseX,mouseY, 80, 80);
}

To this:

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

function draw() {
textFont("Impact");
noStroke();
    fill(58,183,298);
    {textSize(82);
//text(str,x,y,x2,y2)
text("STREET", 20, 50, 80, 80);
    textSize(40);
text("STREET", 10, 400, 200, 200);
    textSize(60);
        fill(57,206,186);
text("STREET", 350, 110, 20, 20);
    textSize(160)
text("STREET",-10,300,20,89);
    textSize(100);
text("STREET",240,460,00,200);
    textSize(24);
        fill(57,206,186);
text("PRINTING",100,460,00,200);
    textSize(24);
        fill(195,199,199);
text("PRINTING",100,80,60,150);
    textSize(24);
text("PRINTING",480,300,20,89);
}

}
function mouseClicked() {
    c = color(44, 62, 155); // Define color 'c'
    stroke(c);
    noFill ()
    strokeWeight(10);
    ellipse(mouseX, mouseY,80,80);
}

[abruzga]

Here is my revised sketch.

Screenshot

Code

var img;

function preload() {
  img = loadImage('bear.png');
}

function setup() {
  createCanvas(displayWidth, 700);
  background(20, 190, 200);
  image(img, 600, 450);
}

function mousePressed() {

    if(mouseX < 600) {
      fill(255, 200, 0);    
    } else {
      fill(10, 200, 20);
    } 

    if (mouseY < 470) {
       textSize(800-mouseX);
    } else {
      textSize(0);
    }

    text("z", mouseX, mouseY); 
 }

Bear.png

[ghost]

Code:

function setup() { createCanvas(1600, 900); background(00); }

function draw() {

beginShape();
tint(127);
fill(0, 0, 255);
ellipse(775, 225, 225, 225);
endShape(CLOSE)

beginShape();
stroke(0, 0, 255);
strokeWeight(6);
fill(00);
ellipse(800, 400, 400, 400);
endShape(CLOSE)

beginShape();
tint(127);
fill(0, 0, 255);
ellipse(800, 325, 75, 75);
endShape(CLOSE)

beginShape();
tint(127);
fill(0, 0, 255);
line (mouseX, mouseY, 50, 50);
endShape(CLOSE)

}

Inspiration:

[haa155]

SCREENSHOT

PROGRAM void setup() { size(600, 600); noStroke(); fill(126); background(255,105,180); }

void draw() { if (mousePressed) { fill(211,211,211); } else { fill(106,90,205); } stroke(155); triangle(mouseX, mouseY,30, 75, 58, 20, 86, 75); }

INSPIRATION