Open in app

Sign in

Write

Sign in

Project 1: Draw a Tractor Scene

Gloria Julien
The Startup
Published in
7 min readMay 25, 2019

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:

In our first introductory class to p5.js, we were tasked to create a tractor in the blank canvas that was our browser window. The overall goal was to begin becoming familiar with the methods offered by p5.js API.

Methods:

Use various draw methods, including line( ), curve( ), ellipse( ), and rectangle( ). Change colors and positioning.

Steps:

  1. Setup the drawing.
  2. Create basic shapes for the tractor.
  3. Draw the farmer. // last step completed as a class
  4. Draw a chicken. // begins individual work
  5. Make a cornfield.
  6. Draw a sun.
  7. Make more chicken friends.

Step 1. Setup the drawing

For reference, we used the iconic green and yellow tractor brought to you by John Deere.

John Deere tractor (Found via Google Images)

As new learners to the wondrous capabilities of javascript, we first broke down the tractor into its basic shapes: rectangles, circles, smaller circles, and smaller rectangles.

To setup the canvas, we defined the height and width in the setup( ) function.

function setup() {
 createCanvas(1500,800)
}

Step 2. Create basic shapes for the tractor

To begin forming our tractor, we utilized some basic shape functions to draw.

function setup() {
 createCanvas(1500,800)
}function draw() { //Tractor Body
 noStroke()
 fill(80,220,100)
 rect(256,13,168,300) //Tractor Front Body
 rect(424,173,200,140) //Rear Wheel
 stroke(0,0,0)
 ellipseMode(CENTER)
 ellipse(256,280,200,200) //Rear Hub Wheel
 fill(255,218,88)
 ellipse(256,280,50,50) //Front Wheel
 fill(80,220,100)
 ellipse(624,330,100,100) //Front Hub Wheel
 fill(255,218,88)
 ellipse(624,330,30,30) //Ground
 fill(128,128,128)
 rect(0,380,width,10) //Window
 fill(255,255,255)
 rect(300,30,100,140)}

Output:

Step 2. Create basic shapes for the tractor

That’s one good looking tractor.

Step 3. Draw the farmer

We need someone commandeering the tractor. Enter Farmer Dale. Using simple draw geometry like ellipses, lines, and curves, we can create a happy Farmer Dale.

function setup() {
 createCanvas(1500,800)
}function draw() {//Tractor Body
 noStroke()
 fill(80,220,100)
 rect(256,13,168,300)//Tractor Front Body
 rect(424,173,200,140)//Rear Wheel
 stroke(0,0,0)
 ellipseMode(CENTER)
 ellipse(256,280,200,200)//Rear Hub Wheel
 fill(255,218,88)
 ellipse(256,280,50,50)//Front Wheel
 fill(80,220,100)
 ellipse(624,330,100,100)//Front Hub Wheel
 fill(255,218,88)
 ellipse(624,330,30,30)//Ground
 fill(128,128,128)
 rect(0,380,width,10)//Window
 fill(255,255,255)
 rect(300,30,100,140) //Driver
 ellipse(350,70,40,40)
 line(350,90,350,170)
 line(350,120,400,150) //Smile
 curve(350,20,355,75,368,80,370,70)
 fill(0,0,0)
 ellipse(365,70,2,2)}

Output:

Step 3. Draw the farmer

Step 4. Draw a chicken

A farm is not complete without its chickens. I decided to add them in as simple ellipses and creating some lines to make the chicken’s beak.

function setup() {
 createCanvas(1500,800)
}function draw() {//Tractor Body
 noStroke()
 fill(80,220,100)
 rect(256,13,168,300)//Tractor Front Body
 rect(424,173,200,140)//Rear Wheel
 stroke(0,0,0)
 ellipseMode(CENTER)
 ellipse(256,280,200,200)//Rear Hub Wheel
 fill(255,218,88)
 ellipse(256,280,50,50)//Front Wheel
 fill(80,220,100)
 ellipse(624,330,100,100)//Front Hub Wheel
 fill(255,218,88)
 ellipse(624,330,30,30)//Ground
 fill(128,128,128)
 rect(0,380,width,10)//Window
 fill(255,255,255)
 rect(300,30,100,140)//Driver
 ellipse(350,70,40,40)
 line(350,90,350,170)
 line(350,120,400,150)//Smile
 curve(350,20,355,75,368,80,370,70)
 fill(0,0,0)
 ellipse(365,70,2,2)//Chicken
  fill(172,98,77)
  ellipse(550,160,30,25)
  ellipse(563,150,15,15)
  line(571,148,579,152)
  line(571,153,579,152)
  fill(0,0,0)
  ellipse(568,145,3,3)}

Output:

Step 4. Draw some chickens

Step 5. Make a cornfield

I am a lover of corn, so it’s natural for me include corn stalks. I made them using the rect( ), rotate( ), translate( ), and ellipse( ) functions. In addition, I decided to move my entire canvas more towards the center.

To rotate the corn cobs, I had to declare the angleMode(DEGREES). So, I added that line of code to my setup( ) function. After playing around with the translate( ) and rotate( ) functions, I got my corn cobs looking nice and full on my corn stalks.

In addition, I practiced using the push( ) and pop( ) functions to control how the canvas moved in relation to the other code I’ve written. I didn’t want my subsequent code to be controlled by the previous code written. So, adding the push( ) and pop( ) functions allowed me to write controlling functions specific to the corn cobs.

function setup() {
 createCanvas(1500,800)
 angleMode(DEGREES)
}function draw() {
 translate(100,150)
 push()//Tractor Body
 noStroke()
 fill(80,220,100)
 rect(256,13,168,300)//Tractor Front Body
 rect(424,173,200,140)//Rear Wheel
 stroke(0,0,0)
 ellipseMode(CENTER)
 ellipse(256,280,200,200)//Rear Hub Wheel
 fill(255,218,88)
 ellipse(256,280,50,50)//Front Wheel
 fill(80,220,100)
 ellipse(624,330,100,100)//Front Hub Wheel
 fill(255,218,88)
 ellipse(624,330,30,30)//Ground
 fill(128,128,128)
 rect(0,380,width,10)//Window
 fill(255,255,255)
 rect(300,30,100,140)//Driver
 ellipse(350,70,40,40)
 line(350,90,350,170)
 line(350,120,400,150)//Smile
 curve(350,20,355,75,368,80,370,70)
 fill(0,0,0)
 ellipse(365,70,2,2)//Chicken
 fill(172,98,77)
 ellipse(550,160,30,25)
 ellipse(563,150,15,15)
 line(571,148,579,152)
 line(571,153,579,152)
 fill(0,0,0)
 ellipse(568,145,3,3)//Corn Stalks 1
 fill(18,126,41)
 noStroke()
 rect(800,30,5,350)
 fill(234,213,34)
 stroke(18,126,41)//Corn
 push()
 rotate(40)
 translate(-175,-500)
 ellipse(800,30,50,20)
 pop()
 push()
 rotate(40)
 translate(-65,-400)
 ellipse(800,60,50,20)
 pop()
 push()
 rotate(-40)
 translate(-236,500)
 ellipse(810,100,50,20)
 pop()//Corn Stalks 2
 translate(150,0)
 fill(18,126,41)
 noStroke()
 rect(800,30,5,350)
 fill(234,213,34)
 stroke(18,126,41)//Corn
 push()
 rotate(40)
 translate(-175,-500)
 ellipse(800,30,50,20) pop()
 push()
 rotate(40)
 translate(-65,-400)
 ellipse(800,60,50,20)
 pop()
 push()
 rotate(-40)
 translate(-236,500)
 ellipse(810,100,50,20)
 pop()//Corn Stalks 3
 translate(150,0)
 fill(18,126,41)
 noStroke()
 rect(800,30,5,350)
 fill(234,213,34)
 stroke(18,126,41)//Corn
 push()
 rotate(40)
 translate(-175,-500)
 ellipse(800,30,50,20)
 pop()
 push()
 rotate(40)
 translate(-65,-400)
 ellipse(800,60,50,20)
 pop()
 push()
 rotate(-40)
 translate(-236,500)
 ellipse(810,100,50,20)
 pop()//Corn Stalks 4
 translate(150,0)
 fill(18,126,41)
 noStroke()
 rect(800,30,5,350)
 fill(234,213,34)
 stroke(18,126,41)//Corn
 push()
 rotate(40)
 translate(-175,-500)
 ellipse(800,30,50,20)
 pop()
 push()
 rotate(40)
 translate(-65,-400)
 ellipse(800,60,50,20)
 pop()
 push()
 rotate(-40)
 translate(-236,500)
 ellipse(810,100,50,20)
 pop() pop()}

Output:

Step 5. Make a cornfield

Step 6. Draw a sun

Then, I added a sun to complete the scenery and the illusion of a bright sunny day in the fields. Similarly to the corn cobs, I made a line and rotated it around the center of the sun. Using push( ) and pop( ) again to ensure the rotation only occurred with my sun code.

function setup() {
  // put setup code here
  createCanvas(1500,800)
  angleMode(DEGREES)
}function draw() {
  translate(100,150)//Tractor Body
  push()
  noStroke()
  fill(80,220,100)
  rect(256,13,168,300)//Tractor Front Body
  rect(424,173,200,140)//Rear Wheel
  stroke(0,0,0)
  ellipseMode(CENTER)
  ellipse(256,280,200,200)//Rear Hub Wheel
  fill(255,218,88)
  ellipse(256,280,50,50)//Front Wheel
  fill(80,220,100)
  ellipse(624,330,100,100)//Front Hub Wheel
  fill(255,218,88)
  ellipse(624,330,30,30)//Ground
  fill(128,128,128)
  rect(0,380,width,10) //width will call the current width of the canvas//Window
  fill(255,255,255)
  rect(300,30,100,140)//Driver
  ellipse(350,70,40,40)
  line(350,90,350,170)
  line(350,120,400,150)//Smile
  curve(350,20,355,75,368,80,370,70)
  fill(0,0,0)
  ellipse(365,70,2,2)//Chicken
  fill(172,98,77)
  ellipse(550,160,30,25)
  ellipse(563,150,15,15)
  line(571,148,579,152)
  line(571,153,579,152)
  fill(0,0,0)
  ellipse(568,145,3,3)//Corn Stalks 1
  fill(18,126,41)
  noStroke()
  rect(800,30,5,350)
  fill(234,213,34)
  stroke(18,126,41)//Corn
  push()
  rotate(40)
  translate(-175,-500)
  ellipse(800,30,50,20)
  pop()
  push()
  rotate(40)
  translate(-65,-400)
  ellipse(800,60,50,20)
  pop()
  push()
  rotate(-40)
  translate(-236,500)
  ellipse(810,100,50,20)
  pop()//Corn Stalks 2
  translate(150,0)
  fill(18,126,41)
  noStroke()
  rect(800,30,5,350)
  fill(234,213,34)
  stroke(18,126,41)//Corn
  push()
  rotate(40)
  translate(-175,-500)
  ellipse(800,30,50,20)
  pop()
  push()
  rotate(40)
  translate(-65,-400)
  ellipse(800,60,50,20)
  pop()
  push()
  rotate(-40)
  translate(-236,500)
  ellipse(810,100,50,20)
  pop()//Corn Stalks 3
  translate(150,0)
  fill(18,126,41)
  noStroke()
  rect(800,30,5,350)
  fill(234,213,34)
  stroke(18,126,41)//Corn
  push()
  rotate(40)
  translate(-175,-500)
  ellipse(800,30,50,20)
  pop()
  push()
  rotate(40)
  translate(-65,-400)
  ellipse(800,60,50,20)
  pop()
  push()
  rotate(-40)
  translate(-236,500)
  ellipse(810,100,50,20)
  pop()//Corn Stalks 4
  translate(150,0)
  fill(18,126,41)
  noStroke()
  rect(800,30,5,350)
  fill(234,213,34)
  stroke(18,126,41)//Corn
  push()
  rotate(40)
  translate(-175,-500)
  ellipse(800,30,50,20)
  pop()
  push()
  rotate(40)
  translate(-65,-400)
  ellipse(800,60,50,20)
  pop()
  push()
  rotate(-40)
  translate(-236,500)
  ellipse(810,100,50,20)
  pop()
  pop()//Sun
  push()
  fill(255,239,100)
  stroke(238,218,56)
  ellipse(0,0,100,100)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  pop()
}

Output:

Step 6. Draw a sun

Step 7. Make more chicken friends

One chicken wasn’t enough for me, so I added more using the translate( ) function.

function setup() {
  // put setup code here
  createCanvas(1500,800)
  angleMode(DEGREES)
}function draw() {
  translate(100,150)//Tractor Body
  push()
  noStroke()
  fill(80,220,100)
  rect(256,13,168,300)//Tractor Front Body
  rect(424,173,200,140)//Rear Wheel
  stroke(0,0,0)
  ellipseMode(CENTER)
  ellipse(256,280,200,200)//Rear Hub Wheel
  fill(255,218,88)
  ellipse(256,280,50,50)//Front Wheel
  fill(80,220,100)
  ellipse(624,330,100,100)//Front Hub Wheel
  fill(255,218,88)
  ellipse(624,330,30,30)//Ground
  fill(128,128,128)
  rect(0,380,width,10) //width will call the current width of the canvas//Window
  fill(255,255,255)
  rect(300,30,100,140)//Driver
  ellipse(350,70,40,40)
  line(350,90,350,170)
  line(350,120,400,150)//Smile
  curve(350,20,355,75,368,80,370,70)
  fill(0,0,0)
  ellipse(365,70,2,2)//Chicken
  fill(172,98,77)
  ellipse(550,160,30,25)
  ellipse(563,150,15,15)
  line(571,148,579,152)
  line(571,153,579,152)
  fill(0,0,0)
  ellipse(568,145,3,3)//Corn Stalks 1
  fill(18,126,41)
  noStroke()
  rect(800,30,5,350)
  fill(234,213,34)
  stroke(18,126,41)//Corn
  push()
  rotate(40)
  translate(-175,-500)
  ellipse(800,30,50,20)
  pop()
  push()
  rotate(40)
  translate(-65,-400)
  ellipse(800,60,50,20)
  pop()
  push()
  rotate(-40)
  translate(-236,500)
  ellipse(810,100,50,20)
  pop()//Corn Stalks 2
  translate(150,0)
  fill(18,126,41)
  noStroke()
  rect(800,30,5,350)
  fill(234,213,34)
  stroke(18,126,41)//Corn
  push()
  rotate(40)
  translate(-175,-500)
  ellipse(800,30,50,20)
  pop()
  push()
  rotate(40)
  translate(-65,-400)
  ellipse(800,60,50,20)
  pop()
  push()
  rotate(-40)
  translate(-236,500)
  ellipse(810,100,50,20)
  pop()//Corn Stalks 3
  translate(150,0)
  fill(18,126,41)
  noStroke()
  rect(800,30,5,350)
  fill(234,213,34)
  stroke(18,126,41)//Corn
  push()
  rotate(40)
  translate(-175,-500)
  ellipse(800,30,50,20)
  pop()
  push()
  rotate(40)
  translate(-65,-400)
  ellipse(800,60,50,20)
  pop()
  push()
  rotate(-40)
  translate(-236,500)
  ellipse(810,100,50,20)
  pop()//Corn Stalks 4
  translate(150,0)
  fill(18,126,41)
  noStroke()
  rect(800,30,5,350)
  fill(234,213,34)
  stroke(18,126,41)//Corn
  push()
  rotate(40)
  translate(-175,-500)
  ellipse(800,30,50,20)
  pop()
  push()
  rotate(40)
  translate(-65,-400)
  ellipse(800,60,50,20)
  pop()
  push()
  rotate(-40)
  translate(-236,500)
  ellipse(810,100,50,20)
  pop()
  pop()//Sun
  push()
  fill(255,239,100)
  stroke(238,218,56)
  ellipse(0,0,100,100)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  rotate(30)
  line(54,30,108,60)
  pop()
  
//Chicken Friends
  translate(-450,208)
  fill(172,98,77)
  ellipse(550,160,30,25)
  ellipse(563,150,15,15)
  line(571,148,579,152)
  line(571,153,579,152)
  fill(0,0,0)
  ellipse(568,145,3,3)
  translate(-75,0)
  fill(172,98,77)
  ellipse(550,160,30,25)
  ellipse(563,150,15,15)
  line(571,148,579,152)
  line(571,153,579,152)
  fill(0,0,0)
  ellipse(568,145,3,3)
}

Output:

Step 7. Make more chicken friends

Now I have a happy farmer surrounded by his chicken friends. (Let’s pretend they don’t know they might be on the chopping block…)

Lessons Learned

Upon discovering the rotate( ) function, I quickly realized the object I wanted to rotate would not rotate about its own center. Instead, the rotation occurred relative to the canvas’ (0,0) coordinate. Therefore, when rotating the corn cobs, I used trial and error to visually position them where I wanted. It wasn’t the most efficient way to do so. In the future I would consider mathematically mapping out my desired locations to determine the coordinates of my corn cobs.

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.

Web Development
Front End Development
JavaScript
P5js

--

--

Gloria Julien
The Startup

Written by Gloria Julien

34 Followers
Writer for

I think a lot about people’s perceptions about life. Oh, and I’m a UX-er, who’s also turning into a Career Coach.

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams