Category: Uncategorized

Test Post

Here is a simple program.

sketchDownload
function setup() {
    createCanvas(300, 300);
    background(220);
//    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	if (mouseX < width / 2) {    // left side
		if (mouseY < height / 2) {     // top half
			background(255, 0, 0);
		}
		else {   // bottom half
			background(0, 255, 0);
		}
	}
	else {   // right side
		if (mouseY < height / 2) {  // top half
			background(0, 0, 255);
		}
		else {	// bottom half
			background(0, 0, 0);
		}
	}
}

LO: My Inspiration

As a student in the School of Design, one of the crucial pieces of works
most students end up creating portfolios of their work as a way to showcase
their abilities and projects. For the one opportunity to program something
purely “yourself” and put your work on display to potential employers, I’ve
seen many examples of student portfolios created in Javascript where its
combination with HTML and CSS create beautiful, personalized and responsive
portfolios.

I admire the work mostly because with each individual they are enabled through
code to create something that is unique and personalized towards them, but at
the same time something delightful for users/site visitors to experience as well.
Although there isn’t a single website on its own I am speaking for in this
writing, there are definitely memorable websites I have seen while browsing
through portfolios. Some students implement elements such as interactive interfaces
that imitate text exchanges, keeping users entertained while they navigate their
sites. Other examples, implement animation to bring static sites to life and guide
users through their content.

These portfolios range in how they use code in their creative practices and also
vary based on complexity. To my knowledge, they’re generally self-directed and
self-led projects that stem from someone’s creative side, and I find it a very
interesting harmony between coding and creative arts.

Some of the portfolios I’ve found especially interesting include:
https://dorcas.cargo.site/
https://www.iamonlyfranklin.com/
https://www.tayaras.com/

Project 1: My portrait :)

mnumoto-01-project
function setup() {
    createCanvas(500, 400);
    background(255, 189, 233);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    stroke(0); //initialize stroke colour
    strokeWeight(3); //initialize stroke weight
    //think in layers, like on sketchbook/photoshop. neck is base, shoulders/chest and head above that... so neck first.
    fill(240, 201, 146); //skin colour
    rect(225, 250, 50, 60); //neck rectangle
    ellipse(250, 200, 100, 120); //face ellipse
    fill(148, 148, 148); //shirt colour
    rect(150, 303, 200, 100); //shoulders/chest rectangle
    fill(20, 13, 6); //hair colour
    rect(180, 180, 45, 180); //hair left
    rect(270, 180, 45, 180); //hair right
    triangle(183, 180, 250, 125, 225, 180); // top hair left
    triangle(315, 180, 250, 125, 220, 190); // top hair right
    fill(255); //colour for inside of glasses
    ellipse(275, 220, 40, 40); //glasses left
    ellipse(225, 220, 40, 40); // glasses right
    line(240, 220, 260, 220); //connector
    noLoop;
}

Project 1: My Self Portrait

SelfPortrait-btyi
function setup() {
    createCanvas(500, 500);
    background(220);
    eyeyposition=200
    yhair=85
}

function draw() {
    fill(255,226,174);
        ellipse(250,250,400,400); //face
    fill(255); //whites of eyes
        ellipse(175,eyeyposition,100,25);
        ellipse(325,eyeyposition,100,25);
    fill(51,25,0); //pupils
        ellipse(175,eyeyposition,25,25);
        ellipse(325,eyeyposition,25,25);
    fill(255); //smile
        ellipse(250,325,200,100);
        stroke(255,226,174);
        fill(255,226,174);
        ellipse(250,325,200,50);
        rect(150,275,200,50);
    fill(255); //nose
    stroke(0);
        triangle(225,275,275,275,250,225)
    fill(0); //eyebrows
        rect(125,eyeyposition-45,100,15);
        rect(275,eyeyposition-45,100,15);
        stroke(255,226,174);
        fill(255,226,174);
        ellipse(250,145,300,40);
    fill(0); //hair
    stroke(0);
        rect(75,yhair,350,50);
        rect(100,yhair-25,350,50);
        rect(125,yhair-50,350,50);
        stroke(255,226,174);
        fill(255,226,174);
        ellipse(250,yhair+45,300,50);
    noLoop();
}

Project 1: My Self Portrait

lukemattsonproject1
// Luke Mattson
// section A


function setup() {
    createCanvas(600,600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

    background(128,206,225);    // background
    fill(167,199,231);
    strokeWeight(1);
    stroke(140,170,220);
    triangle(0,0,600,600,0,600);

    stroke(0);                  // hair
    fill(223,180,130);      
    ellipse(300,250,230,320);

    fill(250,231,218);          // ears
    ellipse(412,276,30,60);
    ellipse(188,276,30,60);

    fill(250,231,218);          // face
    ellipse(300,300,230,320);


    fill(245,245,245);          // eyes
    stroke(0);
    strokeWeight(2);
    circle(265,245,40,40);
    circle(335,245,40,40);
    fill(0,0,200,30);
    circle(270,250,18,18);
    circle(330,250,18,18);


    line(300,260,310,300);      // nose
    line(310, 300,290, 295);


    fill(255,160,160);          //  mouth
    ellipse(300,350,25,35);


    line(310,230,350,215);      // eyebrows
    line(290,230,250,215);

    stroke(255,160,160,40);      // blush
    fill(255,160,160,40);
    ellipse(240,325,30,50);
    ellipse(360,325,30,50);

    noFill();                    // chin
    strokeWeight(2);
    stroke(0);
    arc(300,425,70,40, 2*PI+1/8*PI, PI-1/8*PI);


    stroke(255,255,255);        // body
    line(300,500, 300, 460);
    line(300,500, 310, 510);
    line(300,500,290,510);
    line(300,480,310,470);
    line(300,480,290,470);

    noLoop();
}