Month: September 2021

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

Project 1: My Self Portrait

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


function draw() {
  
//hair 

  stroke(0,0,0);
  fill(0,0,0);
  ellipse(300,450,350,400);
  rect(130,450,340,230);
  quad(130,450,130,700,470,450,470,700);
  stroke(193,134,14);
  fill(193,134,14);
  rect(240,600,120,100); 
    
//face in general

  stroke(193,134,14);
  fill(193,134,14);
  ellipse(300,450,275,350);
  stroke(235,163,20);
  fill(235,163,20);
  ellipse(300,450,230,350);
  triangle(300,250,290,280,310,280);
  stroke(193,134,14);
  strokeWeight(7);
  arc(300,600,50,15,PI,0);
  noFill();
  strokeWeight(2);
  fill(255,255,255);
  

//features

  //eyes
  ellipse(240,400,60,25);
  ellipse(360,400,60,25); 
  fill(77,53,6);
  circle(240,400,25);
  circle(360,400,25);
  fill(0,0,0);
  circle(240,400,15);
  circle(360,400,15);
  fill(255,255,255);
  stroke(255,255,255);
  rect(240,400,3,3);
  rect(360,400,3,3);
  stroke(193,134,14);
  
  //eyebrows
  stroke(0,0,0);
  strokeWeight(8);
  line(330,380,360,370);
  line(330,375,360,365);
  line(330,370,360,360);
  line(360,370,400,385);
  line(360,360,400,385);
  line(330,380,330,370);
  
  line(270,380,240,370);
  line(270,375,240,365);
  line(270,370,240,360);
  line(240,370,200,380);
  line(240,360,200,380);
  line(270,380,270,370);
  strokeWeight(2);
  stroke(193,134,14);
  
  //nose
  strokeWeight(6);
  line(290,410,285,470);
  fill(235,163,20);
  ellipse(300,470,30,20);
  stroke(193,134,14);
  line(285,470,275,490);
  line(315,470,325,490);
  fill(137,100,14);
  ellipse(285,490,20,10);
  ellipse(315,490,20,10);
  fill(193,134,14);
  rect(295,490,10,30);
  fill(255,255,255);
  strokeWeight(2);
  
  //lips
  stroke(195,12,67);
  strokeWeight(12);
  line(295,520,255,530);
  line(305,520,345,530);
  stroke(152,7,50);
  strokeWeight(16);
  line(262,532,338,532);
  line(270,538,330,538);
  stroke(195,12,67);
  strokeWeight(12);
  line(255,530,285,550);
  line(345,530,315,550);
  line(285,550,315,550);
  strokeWeight (2);
  stroke(137,100,14);


}

LO: My Inspiration

I think for me, I have always been extremely interested in code with a creative focus, so finding a place of inspiration was relatively difficult. When I was a kid, I was so obsessed with video game creation that by the time I had entered 5th grade, I had already mastered three different game-developing software. Whatever free time I had, I was either playing video games, watching youtube, or making my own games. However, when I entered middle school, I didn’t have the time to grow and flesh out my interest in computer science. But when I hit high school, I was scrolling through youtube and came across this content creator named Michael Reeves, who inspired me yet again to get back into coding. Although extremely lackluster, Michael Reeves was motivated by passion just as I was in elementary school. He only wanted to make projects that he thought were interesting; such as little robots and screaming Roombas. I admired him because all his work was original and authentic, and while he joked about it, he cared very deeply about each of his projects. The first video I watched was one of his earlier videos, where he created a real-life cursor using two motors that he hot glued together. Just by moving his mouse on the computer screen, the laser pointer connected to the motors would move on the wall in real life. I thought the idea was both hilarious and intriguing–and without thinking, I decided to recreate his idea. He had built and coded everything himself, so in the spirit of Michael Reeves, I decided to do the same. I continued to follow him through his youtube journey, watching in create more interesting projects such as the cursor. While simple, at first, his projects became more and more sophisticated as his skills continued to grow. For example, most recently he made a surgery robot that you could control simply by moving your hand through space. While his content I would say is not going towards anything right now, the future for me resides in his ideology. I believe that innovation derives itself from passion and authenticity in your own work and I aspire to continue that thought process in my future endeavors.

An image of Michael Reeves in his workshop in his new house working on one of the motors for his surgery robot. Image Source

Michael Reeves Youtube Channel

Project 1: My Self Portrait

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

function draw() {
    background(150,150,150);
    ellipse((width/2),(height/2), 400,500);
    ellipse(225,220,80,40) //orbit left
    fill(0)
    ellipse(225,220,37,37) //eyeball left
    fill(255)
    ellipse(375,220,80,40) //orbit right
    fill(0)
    ellipse(375,220,37,37) //eyeball right
    fill(255,0,0)
    arc((width/2), 420, 150, 100, 0, 3.14) //mouth
    fill(255,192,203)
    triangle(300, 280, 280, 350, 320, 350) //nose
    fill(255)
    stroke(0,0,150)
    strokeWeight(6)
    arc(225, 200, 80, 40, 3.2, -0.04) //eyebrow left
    arc(375, 200, 80, 40, 3.2, -0.04) //eyebrow right
    stroke(0)
    line(300, 50, 80, 300) //hair left
    line(300, 50, 80, 290)
    line(300, 50, 90, 280)
    line(300, 50, 90, 270)
    line(300, 50, 95, 260)
    line(300, 50, 95, 250)
    line(300, 50, 100, 240)
    line(300, 50, 100, 230)
    line(295, 50, 100, 220)
    line(290, 50, 100, 210)
    line(285, 50, 100, 200)
    line(280, 50, 100, 200)
    line(275, 50, 100, 190)
    line(270, 50, 100, 190)
    line(265, 51, 100, 180)
    line(260, 51, 100, 180)
    line(250, 53, 100, 175)
    line(240, 54, 100, 175)
    line(230, 55, 100, 175)
    line(300, 50, 520, 300) //hair right
    line(300, 50, 520, 290)
    line(300, 50, 510, 280)
    line(300, 50, 510, 270)
    line(300, 50, 505, 260)
    line(300, 50, 505, 250)
    line(300, 50, 500, 240)
    line(300, 50, 500, 230)
    line(305, 50, 500, 220)
    line(310, 50, 500, 210)
    line(315, 50, 500, 200)
    line(320, 50, 500, 200)
    line(325, 50, 500, 190)
    line(330, 50, 500, 190)
    line(335, 51, 500, 180)
    line(340, 51, 500, 180)
    line(350, 53, 500, 175)
    line(360, 54, 500, 175)
    line(370, 55, 500, 175)
    line(235,47,365,47) //hair middle
    line(233,49,368,49)
    line(231,51,369,51)
    line(230,53,370,53)
    line(237,45,363,45)
    arc(100, 310, 50, 60, 1.5, 4.75) //ear left
    arc(500, 310, 50, 60, 4.75, 1.65) //ear left

    noLoop();

}

Drawing my hair takes a long time because I have a unique hairstyle, but it’s been entertaining. I really enjoyed the process.

LO: My Inspiration

One interactive project that has inspired me is Van Gogh, the immersive experience. The project uses 360 projections, 15,000 ft squared screens, and virtual reality to make the paintings come to life, almost like you are stepping into the painting. The exhibit is authored and designed by Massimiliana Siccardi, with accompanying soundtrack by Luca Longobardi. The first exhibit was opened in France and later expanded to many other places. The exhibit was created with the help of 60,600 frames of video, 90,000,000 pixels and 500,000+ cubic feet of projections. For the Toronto location, they used Panasonic laser projectors and an internal network, as well as Panasonic’s Geometry Manager Pro Software to create the exhibit. This exhibit points to a future where art is not only on the canvas unmoving but interactive through virtual reality. With the rise of technology, it has opened up the doors to more art forms and also art forms that reimagine the past.

LO: My Inspiration

I admire an exhibition created by artistic director Gianfranco Iannuzzi who turned a place into a Vincent van Gogh wonderland. Iannuzzi used 140 laser video projectors that construct a world with only Van Gogh’s artwork. The use of mirrors and magnified images have successfully created an immersive environment. This is the perfect blend of technology and masterpieces.

The project’s creator might be inspired by the great artists’ artworks so that he wanted to create a spectacular space where the artists’ artworks can be presented in an unprecedented way. This project provides insight into the possibilities of the presentation of artworks. And for possibilities, it can be more than just visual art, there can be more and more immersive forms of sonic arts.

Link of the video of the exhibition:
https://vimeo.com/328457542
Artistic director: Gianfranco Iannuzzi
Artwork from: Van Gogh

LO: my inspiration <3

My favourite video game is League of Legends, which I would consider to be a form of interactive and computational art. While it is mostly developer-driven,
one of the main reasons I came to love the game so much was Riot Games’ founding philosophy: to let the game be player-influenced and free to play. To my knowledge, Riot Games made the game entirely on their own, and the idea came from two bright minds fresh from developing a popular Warframe 3 mod, DOTA. It took four years to develop, and it was finally released in 2009. Having kept their loyal fanbase from DOTA excited for a new game, League of Legends was an instant success. Riot went from a small indie game company to a well-known studio, boasting a sizeable team of just under 3,000 employees.
League wasn’t the first game of its kind in any way. However, its incredible staying power has transformed the realm of possibilities for video games.

https://www.leagueoflegends.com/en-us/
Riot Games

League of Legends - Scholastic Esports | PlayVS
League of Legends title screen via https://images.prismic.io/play-vs/6c423286e877921fb6659122b16e1845df833e1f_league-of-legends-hero-splash.jpg?auto=compress,format