Assignment 2- A Nocturnal Landscape
Concept
I wanted to create a vivid landscape scene with a night sky, mountains, trees, and an ocean using basic p5.js shapes like rectangles, ellipses, and triangles. I used basic shapes and coordinates, but tried to make the end result visually interesting and cohesive even if not realistic. I used a loop for the stars to randomise their position on the canvas. I also slowed down the frame rate to have a calming feel to the overall movement of the stars.
This is my final artwork:
I’m most proud of the for loop I created to make the gradient sky:
// pretty sky
for(let i=0; i<=300; i+=5){
strokeWeight(5);
stroke(255-i,128-i,64);
line(0,300-i,width,300-i); // x,y,x,y
}
This loops over and over again and draws coloured lines that transition smoothly from dark blue to orange. The decreasing RGB values create the gradient illumination. I took inspiration from an existing p5js project by @urbanatwork for the gradient.
I spent the most time on the coniferous trees, positioning the triangle branches and creating the function proved trickier than expected but I am proud of how reusable and handy I made it. This is the drawConiferousTree() function:
function drawConiferousTree(x, y, a, b){
//tree trunk
fill('#691C37');
ellipse(x, y-20, a, b);
//tree branches
triangle(x-15, y-20, x+15, y-20, x, y-50);
triangle(x-15, y-30, x+15, y-30, x, y-60);
triangle(x-15, y-40, x+15, y-40, x, y-70);
}
What I like about this is it allows me to easily draw as many tree shapes as I want by just calling this function each time with the tree’s x,y coordinate, trunk width, and trunk height.
For example, to make two trees at different places, I can just do:
drawConiferousTree(15, 305, 4, 20); drawConiferousTree(35, 310, 4, 20);
The variables a and b even let me adjust an individual tree’s proportions if needed.
I learned that making custom functions with parameters is hugely helpful when you want to repeat elements, like trees of the same style but different sizes and positions. It’s like having a custom stamp that you can use wherever you want!
Reflection
I’m thrilled with how this landscape came together. The colours, composition, and simplicity have an engaging but simplistic aesthetic that is calming to look at. I definitely plan to keep working on this piece.
Going forward, I want to add more interactivity into the scene to bring it alive. For example: Make the sun rise and set over the mountains as I move my mouse vertically across the screen. This would create daylight cycles and slowly change the sky colour. I would love to further experiment with the sky gradient as well.
This project has me hooked to p5js and its endless opportunities for creative projects in the best way. I’m excited to include more interactive and engaging elements in my projects moving forward.