Project 4: Draw a Sunset Scene

Prototyping Interactions I (SDEG-600)

This content is part of a collection of works completed during my studies as a UX/IxD Master’s student at Thomas Jefferson University.

Here, I have documented my progress while taking the Prototyping Interactions I course during Summer 2019. It’s part learning how to code in javascript using the p5.js API and part learning designing for real-world interactions.

Follow me on LinkedIn.

Goals

Objective:

Create a sunset picture.

Methods:

Practice using loops, upload images, play with colors, and apply a font family.

Steps:

1. Setup the drawing.
2. Create a gradient using lines.
3. Upload a palm tree image.
4. Draw a sun.
5. Add text.
6. Add a (or some) jumping dolphins.

Step 1. Setup the drawing

First, we must set up our canvas.

function setup() {
 createCanvas(windowWidth, windowHeight);
 colorMode(HSB, 360, 100, 100);
 strokeWeight(10);
}

I set my canvas width and height to be the same size as my browser window. I wanted to have my sunset fill the entire page because the more sunset shown, the better! It also mimics the real-world when I’m creating a landscape.

As a class, we chose to use the HSB (hue, saturation, brightness) colorMode for all the colors. For anything we drew, the object would appear with a stroke with at least 10pixels.

Step 2. Create a gradient using lines.

Next, we create some lines to mimic a true gradient. In layman’s terms, the code accomplish the following instructions:

Draw lines vertically across the screen and long enough to fill the width of the screen, while altering the hue slightly with each new line drawn. The height of the line should equal to the strokeWeight defined earlier. When a new line is drawn, ensure that there is no spacing between them. This means the y-coordinate of the new line drawn will be exactly equal to the strokeWeight defined earlier.

To change the hue, first determine the range of hues to use in the drawing. Then, set a starting hue to later alter with each new line drawn by adding (or subtracting) a value to it. Let’s set this increment equal to the amount of height real estate available on the screen and multiplied by 10 to set the new hue value.

Complete these instructions while the y-coordinate does not exceed the height of the browser window.

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100);
  strokeWeight(10);
}
function draw() {
var y = 0
var h = 60
while (y<height) {
      stroke(h,100,100)
      line(0,y,width,y)
      y+=10
      h-=60/height*10
    }
}

Output:

What a great looking gradient. If you look closely, the gradient is made up of many lines. Each line created is slightly differently in hue that the ones around it.

Step 2. Create a gradient using lines.

Step 3. Upload a palm tree image.

We searched the internet for an .svg file of a palm tree and added it to our project folder. The next lines of code followed these instructions:

Upload the .svg file and place it where you want it in the browser. Scale it down to a reasonable size and colorize the tree.

To achieve this, we needed to upload the file via loadImage( ) and also assign it a value in order to reference later when we call image( ). I looked at the .svg file itself to determine the width (851pt) and height (1280pt) and scaled it down from there using a variable treeScale, setting it to a number. After playing around with the scale, I found a satisfactory size for my tree.

var tree
var treeScale = .75
function preload() {
 tree = loadImage(“palm-tree.svg”)
}
function setup() {
 createCanvas(windowWidth, windowHeight);
 colorMode(HSB, 360, 100, 100);
 strokeWeight(10);
}
function draw() {
var y = 0
 var h = 60
while (y<height) {
 stroke(h,100,100)
 line(0,y,width,y)
 y+=10
 h-=60/height*10
 }
//palmtree
 image(tree,width*.65,height-750,851*treeScale,1280*treeScale) 
}

To change the color of the tree, I looked at the .svg file again and found the line for fill = “#HEXCODE”. By simply changing the HEX value of the fill, I was able to change the color of my tree.

<g transform=”translate(0.000000,1280.000000) scale(0.100000,-0.100000)” fill=”#FF00FF” stroke=”none”>

Output:

Step 3. Upload a palm tree image.

Step 4. Draw a sun.

A sunset wouldn’t be complete without a sun. So, let’s add that. We will make it such that it follows these instructions:

The sun shall be a circle, placed in the center of our landscape. We’ll make it yellow and huge, but not too large it can’t be seen anymore. I want to place it so that only half of it can be seen, as if it’s peeking up from across the horizon.

I want the sun to be behind the palm tree in the z-direction, so I have placed it using ellipse( ) to draw before the palm tree. I set a fill color to a yellow hue and removed the stroke that was defined earlier in the drawing, using noStroke( ).

var tree
var treeScale = .75
function preload() {
 tree = loadImage(“palm-tree.svg”)
}
function setup() {
 createCanvas(windowWidth, windowHeight);
 colorMode(HSB, 360, 100, 100);
 strokeWeight(10);
}
function draw() {
var y = 0
 var h = 60
while (y<height) {
 stroke(h,100,100)
 line(0,y,width,y)
 y+=10
 h-=60/height*10
 }
//sun
 fill(60,100,100)
 noStroke()
 ellipse(width/2,height,width*8/10)

//palmtree
 image(tree,width*.65,height-750,851*treeScale,1280*treeScale)

}

Output:

Step 4. Draw a sun.

Step 5. Add text.

Let’s add some text to our sunset scene. To do that, we need to use the text( ) function. But we don’t stop there. Let’s also change the color (fill ( )), size (textSize( )), typeface (textFont( )), and alignment (textAlign( )) of our text.

Most of these functions can be quickly applied to the code, but to change the font family, we will use a font existing on our computer. The font-family file (.ttf) will be copied over to our project folder, then loaded into our javascript file. In this example, we used the font-family “Georgia”.

Copying over the font-family:

1. On my Mac computer, I searched the Font Book application for Georgia.
2. Right-click to Show in Finder. This will open up the actual font file location on your computer.
3. Copy over the .ttf file to your project folder. Make sure the filepath is referenced accurately in your code.

1. Find the font in the Font Book

2. Show in Finder

3. Copy over this .ttf file to your project folder

Now that we have the font-family uploaded to our sunset project folder, we can finish up adding the text to our sunset scene.

var tree
var treeScale = .75
var font
function preload() {
 tree = loadImage(“palm-tree.svg”)
 font = loadFont(“Georgia.ttf”)
}
function setup() {
 createCanvas(windowWidth, windowHeight);
 colorMode(HSB, 360, 100, 100);
 strokeWeight(10);
}
function draw() {
var y = 0
 var h = 60
while (y<height) {
 stroke(h,100,100)
 line(0,y,width,y)
 y+=10
 h-=60/height*10
 }
//sun
 fill(60,100,100)
 noStroke()
 ellipse(width/2,height,width*8/10)

 //palmtree
 image(tree,width*.65,height-750,851*treeScale,1280*treeScale)
//text
 fill(176,68,66)
 stroke(176,68,66)
 textSize(height*.4)
 textAlign(CENTER)
 textFont(font)
 text(“aloha”,width/2,height*9/10)
}

Output:

Step 5. Add text.

Step 6. Add a (or some) jumping dolphins.

This sunset scene looks really great already. But, what if we could make it better by adding dolphins? Not any dolphin, but some jumping ones?! Great. Let’s do it! The code will follow these instructions then:

Upload an image of a dolphin. In order to make the dolphin “jump”, create a new function. Within that function, the dolphin will need to move in a parabolic curve. Since the coordinate system of javascript code is flipped from your mathematical xy-coordinate system, we need to remember that when defining our parabolic function. Depending on the direction the dolphin is facing, we will set the starting coordinate so that it jumps in a direction consistent with a nature (ie, its tail will follow the nose).

After loading the dolphin image in, we scaled down the dolphin so it wasn’t taking up an exorbitant amount of real estate in our browser window. After some trial and error, the parabolic curve began looking good.

var tree
var treeScale = .75
var font
var dolphin
var flipperPos = 0
function preload() {
 tree = loadImage(“palm-tree.svg”)
 font = loadFont(“Georgia.ttf”)
 dolphin = loadImage(“dolphin.svg”)
}
function setup() {
 createCanvas(windowWidth, windowHeight);
 colorMode(HSB, 360, 100, 100);
 strokeWeight(10);
}
function draw() {
var y = 0
 var h = 60
while (y<height) {
 stroke(h,100,100)
 line(0,y,width,y)
 y+=10
 h-=60/height*10
 }
//sun
 fill(60,100,100)
 noStroke()
 ellipse(width/2,height,width*8/10)
//dolphin
 flipper(width)
//palmtree
 image(tree,width*.65,height-750,851*treeScale,1280*treeScale) // image(img,x,y,w,h)
//text
 fill(176,68,66)
 stroke(176,68,66)
 textSize(height*.4)
 textAlign(CENTER)
 textFont(font)
 text(“aloha”,width/2,height*9/10)
}
function flipper(xi) {
 var x = -flipperPos+xi
 var y = (sq(((.05)*x-35))+200)
 image(dolphin,x,y,1280*.1,851*.1)
 flipperPos+=8
}

Output:

Step 6. Add a (or some) jumping dolphins.

Looks pretty flippin’ good to me.

Lessons Learned

When placing images on the screen, the coordinates of the image begin at (0,0) from the top left as well. Therefore, when adjusting the size and the positioning of the images, “centering” the image (x-coordinate falling at width/2) did not mean the center of the image would align with the center of the browser window. I’ll be keeping this in mind for future projects.

Creating the parabolic curve was more of a trial and error scenario in this case, which could end up being a big time waster. What I would do differently next time is to try to mathematically figure out exactly where I wanted the dolphin to fly across the screen and enter this curve into my code.

If I wanted to add another dolphin to the mix, it’d be as easy as adding a new flipper( ) function underneath the existing flipper( ) function with an optionally different starting point. But, creating a loop to do this automatically does not output the expected results. Instead, creating a loop for the flipper( ) function, altering the variable xi, generates multiple dolphins jumping at or around the exact same interval, such that it looks like a blob of dolphins flying across the screen. A future step for me would be to investigate how to iterate my flying dolphins such that it looks more natural.

Thanks for reading! Please leave a comment that you think might help me improve my skills. Maybe something new I could try. I’d love to give it a shot.

Follow me on LinkedIn.