• Rob George

Week 2: Simple Lines + Raindrops + Drawing Program

Updated: Dec 10, 2020

Task 1: Simple Lines

This was meant to get used to working with the canvas and simple shapes and lines. Nothing fancy.


//Cavas

size(600, 400);

background(255);


//rectangle

//rectMode(CENTER);

stroke(255, 0, 0);

strokeWeight(3);

//rect(163,120,250,150);

rect(175, 125, 250, 150); // x=300-125=175, y=200-75=125


//lines

stroke(255, 0, 0);

strokeWeight(3);

strokeCap(SQUARE);


//line 1: Top left

//line(0,0,163,120);

line(0, 0, 175, 125);


//line 4: bottom left

//line(0,400,163,267);

line(0, 400, 175, 275); //x=175, y=125+150=275


//line2: top right

//line(600,0,412,119);

line(425, 125, 600, 0);


//line3: bottom right

//line(600,400,412,267);

line(425, 275, 600, 400);



Assignment 1 : Raindrops

My task was to have the top half of the screen have random dots and the bottom half have random rays pointing down. I added the random background color on click and the text just to be a little more entertaining and interactive.



//HOMEWORK: RAINDROPS


void setup() {


//size(displayWidth, displayHeight); //fullscreen

size(1000, 1000);

frameRate(20);

background(255);

}


void draw() {


//middle line

stroke(# FFC903);

strokeWeight(8);

strokeCap(SQUARE);

line(0, 500, 1000, 500);


//raindrops white

noStroke();

fill(255);

ellipse(random(width), random(height/2), 10, 10);


//raindrops random colors

noStroke();

fill(random(255), random(201), random(3), 70);

ellipse(random(width), random(height/2), 10, 10);


//raindrops yellow

noStroke();

fill(255, 201, 3, 100);

ellipse(random(width), random(height/2), 10, 10);


//random lines

strokeWeight(7);

stroke(# FFC903);

strokeCap(PROJECT);

line(width/2, height/2, random(width), random(500, 1000));


//Text color change

textSize(20);

fill(random(255), random(255), random(255));

text("Click Screen", 440, 550);

}


void mousePressed() {

//background color change

background(random(255), random(255), random(255));

}


Assignment 2 : The Drawing Program

For this assignment I had to create a basic drawing program where when the mouse is on the left side of the screen the stroke is red and when its on the right it's black. I also had to change the weight as the mouse moved quicker across the screen. I added the click to clear.

//HOMEWORK: THE DRAWING PROGRAM


void setup() {

size(400, 400);

background(255);

textSize(20);

fill(#007925);

text("Click to Clear",130,200);

}



void draw() {

//stroke(mouseX/2,0,0); //makes stroke color transition from black to red (left to right)

stroke(255-mouseX, 0, 0); //stroke color transition from red to black (left to right)

strokeWeight(abs(pmouseX-mouseX)); //INCREASES WEIGHT OF STROKE THE FASTER THE MOUSE MOVES. CALCULATES THE ABSOLUTE VALUE OF THE MOUSE POSITIONS

line(pmouseX, pmouseY, mouseX, mouseY); //Draws a line from previous mouse location to current mouse location.

}



void mousePressed() {

background(255);

textSize(20);

fill(random(255),random(355),random(255));

text("Click to Clear",130,200);

}


< Return to Coding Page

6 views0 comments