My project was inspired by single-line drawings and line-drawing tools, like etch a sketch. I always had a desire to draw something only using one line, but I did not have the talent to do so. I also never had the patience to draw using etch a sketch. Therefore, I created a p5js drawing tool that allows you to create single-line drawings. In order to draw, use the arrow keys. You can change the color of the line by pressing on the space bar (the circle on the bottom will indicate the current color status), change the line weight by clicking on the arrows (numbers indicate the line weight), and clear canvas by clicking on the “clear” button. I hope you have fun as much as I had while I was coding for this project!

Plus, try drawing a diagonal line by pressing onto two arrow keys at the same time!

sketch

/* Jamie Park (jiminp)             Section E
   15 - 104                     Final Project */

var ttl; //global variable for the turtle
var colors = ["Coral", "DarkTurquoise", "DarkGrey", "blue",
"FireBrick", "Gold", "Lavender", "LightPink", "PowderBlue"]; //global variable for color values
var col = 0; //color index value
var strokeThickness = 2; //strokethickness as global value
var bgCol = 255;

function preload(){
    //preload image into the canvas
    var overlayURL = "https://i.imgur.com/5dpuHCX.png";
    overlay = loadImage(overlayURL);
}

function setup(){
    //creates a canvas
    createCanvas(500, 400);
    //sets the background color on white
    background(250);
    //makes the turtle at random parts of the canvas
    ttl = makeTurtle(random(150, 300), random(100, 300));
    ttl.setWeight(strokeThickness);
    ttl.setColor("coral");
}

function draw(){
    //display the image on the canvas
    image(overlay, 0, 0, 500, 400);
    //allows the user to draw the lines
    drawLines();
    //allows the user to change the color of lines
    displayStrokeWeight();
    drawTriangleButtons();
    displayCurrentColor();
    clearButton();
    boundTurtle();

}

function mousePressed(){
    //redraw when clicked on clear button
    clearCanvas();
    //when tou click the buttons, the thickness of the turtle stroke changes
    changeThickness();
}

function boundTurtle(){
    //set up local variables that wound bound the turtles
    var boundaries = 28;
    var bottomBoundaries = 58;

    //if turtle x is smaller than a set number, the turtle is the set number
    //set number due to the frame around the canvas
    if(ttl.x < boundaries){
        ttl.x = boundaries;
    }
    //if turtle y is smaller than a set number...
    if(ttl.y < boundaries + 2){
        ttl.y = boundaries + 2;
    }
    //if turtle x is greater than the set number...
    if(ttl.x > width - boundaries - 5){
        ttl.x = width - boundaries - 5;
    }
    //if turtle y is greater than the set number...
    if(ttl.y > height - bottomBoundaries){
        ttl.y = height - bottomBoundaries;
    }
}

function keyPressed(){
    //when spacebar is pressed, the color of the turtle changes
    //you can "find" your desired color by pressing on the space bar multiple times
    changeColor();
}

function changeColor(){
    if(keyCode === 32){
        //keyCode 32 is the space bar
        col = (col + 1) % colors.length;
        //you change the color by adding one into the color index above
        ttl.setColor(colors[col]);
    }
}

function drawLines(){
    //function that draws the lines when key is pressed accordingly
    //local variable that goes forward by 1.5 pixels every time key is pressed
    var distDraw = 1.5;
        //draws the line leftwards
    if(keyIsDown(LEFT_ARROW)){
        ttl.face(180);
        ttl.forward(distDraw);
    }
        //draws the line rightwards
    if(keyIsDown(RIGHT_ARROW)){
        ttl.face(0);
        ttl.forward(distDraw);
    }
        //draws an upward line
    if(keyIsDown(UP_ARROW)){
        ttl.face(270);
        ttl.forward(distDraw);
    }
        //draws a downward line
    if(keyIsDown(DOWN_ARROW)){
        ttl.face(90);
        ttl.forward(distDraw);
    }
}

function changeThickness(){
    //thickness of the stroke increases / decreases when the button is clicked
    if(mouseX < 450 & mouseX > 430 && mouseY > 280 && mouseY < 300){
        strokeThickness = strokeThickness + 1;
        //strokeweight increases by 1
    }
        //when mouseisPressed within the range of the triangular buttons, reduce the stroke weight by 0.05
    if(mouseX < 450 & mouseX > 430 && mouseY > 310 && mouseY < 340){
        strokeThickness = strokeThickness - 1;
        //strokeweight decreases by 1
    }
    //constrains the thickness of the stroke in value between 1 and 13
    strokeThickness = constrain(strokeThickness, 1, 13);
    //implements the weight to the turtle
    ttl.setWeight(strokeThickness);
}

function drawTriangleButtons(){
    //draws the triangle buttons on the bottm right corner of the canvas
    noStroke();
    fill("LightSalmon");
    //local variables that set height and width of the triangle to avoid magic nunbers
    var triangleW = 430;
    var triangleH = 300;
    //top triangle that increases the thickness
    triangle(triangleW, triangleH, triangleW + 20, triangleH, triangleW + 10, triangleH - 20);
    //bottom triangle to reduce the thickness
    triangle(triangleW, triangleH + 10, triangleW + 20, triangleH + 10, triangleW + 10, triangleH + 30);
}

function clearButton(){
    //draws the "clear" button on the top left corner
    fill("orange");
    noStroke();
    ellipse(50, 50, 25, 25);
    fill("white");
    text("clear", 40, 53);
    //informative text
    fill("gray");
    text("press on arrow keys to draw & space bar to change color,", 73, 50);
    text("and click on the arrow to change stroke thickness", 73, 60);
}

function clearCanvas(){
    //if mouse is within the proximity of the clear button, the canvas is cleared
    if(mouseX > 37.5 & mouseX < 62.5 && mouseY > 37.5 && mouseY < 62.5){
        clear();
        background(255);
        //strokeThickness and color index restart
        strokeThickness = 2;
        col = 8;
    }
}

function displayCurrentColor(){
    //displays current turtle color in a circle
    fill(colors[col]);
    ellipse(width * .815, height * .8, 10, 10)
}

function displayStrokeWeight(){
    //displays the strokeweight
    noStroke();
    fill("white");
    rect(430, 300, 18, 10);
    textSize(10);
    fill("SlateGray")
    textFont("GillSans");
    text(strokeThickness, 435, 308.5);
}

//------------------------------turtle code--------------------------------
function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

I always liked drawing since I was a child. This project was inspired by Disney’s Magic Artist Studio, my childhood drawing game, and etch-a-sketch. Although I was never good at it, I was always intrigued by the idea of completing a drawing with a single line. To help those who are also interested in one-line drawings but are not good at it, I want to create a program that allows a user to create single-line drawings.

I will create an interactive program that draws turtles using keys W, A, S, and D. Because this idea seems relatively simple, I am planning on adding sound (background music?) and allowing the user to manipulate color and stroke weight while drawing on the program. I am also considering adding an image overlay to frame the canvas and provide a hotkey to erase the drawing. I am excited to see what this would look like in the end.

I know that I want to create something that generates drawings using a turtle. Therefore, I looked into computer-generated arts online.

This first artist is called Bogdan Soban, and he has been creating generative art for over 20 years. He uses a computer to combine and complete a work of art. Soban notes that there are four phases of the generative art method: idea, code creation, process, and final selection. The first and last are within the domain of humans, but the second and third are based on a code time machine. Therefore, it is the complication of code that differentiates the image of A and B.

I also wanted to create something that is interactive, so I looked into an interactive computer-generated installation. The example that I found is Nike’s interactive installation during Milan Design Week. This computer-generated work reacts to the viewer’s location and motion, creating an image based on the way a person interacts it.

Nike’s Super Natural Motion

For my final project, I would like to combine computer-generated art and interactive art together, creating interactive computer-generated art.

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104          Section E        Project 11

var xCirc = 100;
var yCirc = 120;
var moonX = 270;
var airplaneSound;
var airplanePic;


function preload(){
    var airplaneURL = "https://i.imgur.com/4Vw2nUw.png"
   airplanePic = loadImage(airplaneURL);

   airplaneSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/325845__daveshu88__airplane-inside-ambient-cessna-414-condenser.mp3");
}

function setup(){
    createCanvas(450, 450);
    frameRate(9.5);
    useSound();
}

function soundSetup(){
    airplaneSound.setVolume(0.2);
    airplaneSound.play();
    airplaneSound.loop();
}

function draw(){
    background('#1b2c4d');
    stars();
    moon();
    cloud();
    canyons();
    canyons2();
    canyons3();
    image(airplanePic, 0, 0);
}

function canyons(){

    var terrainSpeed = 0.0005;
    var terrainDetail = 0.005;

    noStroke();
    fill('#c96e57');
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 0.85, 0, height);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function canyons2(){

    var terrainSpeed = 0.0005;
    var terrainDetail = 0.0059;

    noStroke();
    fill('#913e29');
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 0.65, 0, height - 5);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function canyons3(){

    var terrainSpeed = 0.0005;
    var terrainDetail = 0.004;

    noStroke();
    fill('#703223');
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 0.5, 0, height);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function cloud(){
    noStroke();
    fill('#2f446b');

    ellipse(xCirc, yCirc + 20, 40, 40);
    ellipse(xCirc + 30, yCirc + 10, 60, 60);
    ellipse(xCirc + 60, yCirc, 50, 50);
    ellipse(xCirc + 70, yCirc + 15, 70, 60);
    ellipse(xCirc + 100, yCirc + 10, 60, 60);
    ellipse(xCirc + 130, yCirc + 10, 45, 45);
    xCirc = xCirc - 5;

    if (xCirc === -100){
        xCirc = width;
    }
}

function stars(){
    starX = random(width);
    starY = random(height / 2);

    for (var i = 0; i < 50; i++){
        strokeWeight(2);
        stroke("#e8e8cc");
        point(starX, starY);
    }
}

function moon(){
    noStroke();
    fill("#f0e3cc");
    ellipse(moonX, 180, 100, 100);
    fill("#edd4a8");
    ellipse(moonX, 180, 70, 70);

    moonX = moonX - 0.15;

    if (moonX === 0){
        moonX = 400;
    }
}

I approached this project by brainstorming transportations with windows and ended up landing upon airplanes. The code I have created is a visual of red canyons beyond an airplane window. The stars sparkle at random points of the canvas, and the cloud and the moon shifts left towards the canvas. I had added airplane noise to the file to hint that this is a point of view from an airplane. I really enjoyed the process of visualizing my ideas and I feel like I am becoming more confident in coding.

sketch

//Jamie Park (jiminp)
//Project 10
//Section E

//global variables of the picture and sound files
var instrumentPic;
var bellSound;
var pianoSound;
var drumSound;
var guitarSound;

//feature that determines whether the file gets played or paused
var pianoPlaying = 1;
var drumPlaying = 1;
var guitarPlaying = 1;

function preload() {
    //preloads the image
    var instrumentURL = "https://i.imgur.com/dX3rHBT.jpg";
    instrumentPic = loadImage(instrumentURL);

    //preloads the sound files
    bellSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/Bell.wav");
    pianoSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/Piano.wav");
    drumSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/Drum.wav");
    guitarSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/guitar.mp3");
}

function setup() {
    //setup the canvas and prepare for the sound system
    createCanvas(450, 450);
    background(0);
    useSound();
}

function soundSetup() {
    //set the sound volume
    bellSound.setVolume(0.3);
    pianoSound.setVolume(0.3);
    drumSound.setVolume(0.3);
    guitarSound.setVolume(0.3);
}

function draw() {
    // draw the image
    image(instrumentPic, 0, 0);
}

function mousePressed(){
    //the sound files are triggered when mouse is pressed
    if (mouseX > width / 2 & mouseY > height / 2
    && mouseX < width && mouseY < height){
    //if a specific part of a canvas is clicked, add 1 to variable drumPlaying
        drumPlaying = drumPlaying + 1;
        if (drumPlaying % 2 == 0){
            //if drumPlaying is divisible by 2, play the sound file
            //if it is not divisible by 2, pause the sound file
            drumSound.play();
        } else {
            drumSound.pause();
        }
    }

    if (mouseX > width / 2 & mouseY < height / 2 && mouseX < width){
        pianoPlaying = pianoPlaying + 1;
        if (pianoPlaying % 2 == 0){
            pianoSound.play();
        } else {
            pianoSound.pause();
        }
    }

    if (mouseX < width / 2 & mouseY > height / 2 && mouseY < height){
        /*+1 play/pause does not apply to the bell,
        because the sound is relatively short and does not create a melody*/
        bellSound.play();
    }

    if (mouseX < width / 2 & mouseY < height / 2){
        guitarPlaying = guitarPlaying + 1;
        if (guitarPlaying % 2 === 0){
            guitarSound.play();
        } else {
            guitarSound.pause();
        }
    }
}

I created a sonic sketch by making an interactive file that makes sounds when clicked on corresponding icons. When you click on the guitar icon, the file will create guitar noise, and the same idea applies to the piano, drum, and the bell. The file can execute various types of sounds at the same time. I am happy that I figured out a logical way to make the sound stop when the mouse has clicked the corresponding icon again.

Latetia Sonami is a sound artist and a performer based in San Francisco. The work that I will be discussing is called “Lady’s Glove,” an instrument that makes and manipulates sound in a live performance. The sensor within the glove measures the motion, speed, and proximity, sending the data into Sonami’s computer and thus creating music. This glove is will never make the same sound unless one replicates a completely same motion, meaning even Sonami might not know what the music will sound like until it actually happens. In that sense, I admire her artistic sensibility and knowledge on what to do to make the sound pleasing, especially in live performance settings. I am unfortunately unsure what algorithm she used to create music that would sense her motion. But I admire this project because it questions the definition of music and takes the concept of computational music to another level.

Kate Hartman is a professor and lab director at OCAD (Ontario College of Art and Design) and a designer of computational wearables. In 2014, she published a book called Make: Wearable Electronics — Design, prototype, and wear your own interactive garments. 

This book provides a thorough knowledge of how to create a garment while incorporating electronics. Hartman kindly explains the science and technology behind each tool or concept, such as circuit or conductive thread, at the start of the book for the beginners. By having a circuit inside clothing, one can manipulate the clothing to make sound, record information, or emit light. The possibility of electronic clothing is endless. Although I am unsure if I will ever make my own electric clothing, as I suck at even making conventional clothing, I was entertained by this new concept. I would like to see how people can use this concept to potentially help people who are in needs.

Link to the book on Amazon

sketch

// Jamie Park (jiminp)            Project 9
// Section E

var myPic;

function preload(){
    //preload image from imgur
    var meURL = "https://i.imgur.com/XmiI0Iq.jpg";
    myPic = loadImage(meURL);
}

function setup(){
    //createCanvas and fill in the background
    createCanvas(400, 300);
    background(0);
    //load the pixels of the image
    myPic.loadPixels();
    frameRate(60);
}

function draw(){

    //draw rectangles at random points
    var px = random(width);
    var py = random(height);

    //crate variables that would fit into acquiring the colors of the image
    var cx = constrain(floor(px), 0, width);
    var cy = constrain(floor(py), 0, height);
    var colorLocation = myPic.get(cx, cy);

    //generate rectangular color blocks
    noStroke();
    fill(colorLocation);
    var ran = random(20);
    rect(px, py, ran, ran, random(10));
}

I created a computational portrait of a picture of me. In addition to randomizing the size of the squares, I randomized the degrees of angle in the edges, layering soft and hard rectangles on top of each other.

I really enjoyed this coding process and it was nice to see the final product come together and create a picture of me.

Process (left) and final product (right)

The photo I used to code my project

I was inspired by my friend Charmaine’s Looking Outwards post 05. This post is about a CG company in Tokyo that creates 3D models and develops character concept design. Among many other things created by company ModelingCafe, Charmaine focused her research on Imma, a computer generated fashion model. This computer generated model has a twitter and instagram account, where someone weekly posts an image of her.

View this post on Instagram

綾瀬はるかちゃんとの2ショット📸 楽しい現場だったなぁ🤤🖤 #あたしCGらしい #東京 #あたしヒール高め @skii

A post shared by imma (@imma.gram) on Oct 18, 2019 at 12:24am PDT

The gap between the computer generated model, Imma, and real-life person is almost non existent that it is a little creepy. If one did not know who Imma is, one would have easily thought that she is another human being posting pictures on Instagram. Although it is really cool to see the impact of technology on media, I am concerned with the unintended consequences of this type of digital technology. I hope people do not misuse or abuse the ability to render and create identical copies of humans.

INST-INT 2013 – Mike Tucker from Eyeo Festival on Vimeo.

Mike Tucker is a special effects expert who combines coding with art. He has been working as an interaction designer who specializes in VR design. Now, he is an interactive director at Magic Leap, a company that focuses on the future of Spacial Computing. He combines interactive arts and music, making the spacial experience more meaningful. Using this VR device, one can watch TV, play games, and chat with friends as if they are in front of the person. Additionally, his VR device allows other developers to publish their apps, allowing the users to have fun with more than what the company offers.

His previous VR experience includes creating Tana Pura with Radiohead’s Jonny Greenwood, working with Encyclopedia Pictura for Kanye West video game, and working at Universal Everything for a variety of projects.

I admire how he uses coding to create interactions: I did not know that you can create sophisticated interactions using code. Researching him made me realize that coding is a very important skill to have and will continue to have a significant impact on the entertainment industry.