Categories
Intro to Computational Practice

Algorithms – W1

This week, we worked on our understanding of algorithms. In class, we accomplished this by taking part in some group activites, one of which was creating a 4-step dance. As a group we created a set of rules for the dance that was then given to another group, using only these rules they had to preform this dance. Despite not completing the last rule the other group was able to complete the dance successfully.

Transforming shapes

Taking inspiration from Vera Molanr I was tasked with creating my own algorithm. The overall goal of this algorithm was to create a set of rules that dictated the presentation of a series of shapes. For example, would the shapes change in size each time they were drawn? Or would they be rotated? etc.

For this task, I decided to work with squares and defined my rules. The rules were as follows:

  • Draw a square 50px big in the centre of the canvas
  • Scailing – Increase squares by 20 pixels each time
  • Positioning – Draw the square 100px away from the previous one
  • Rotation – Rotate squares by 40 degrees each time
  • Repeat this 7 times

Using these rules I produced this ‘algorithm’:

  • Draw a square in the top centre of the canvas
  • Move it 100px down the canvas
  • Increase it by 20px
  • Rotate square by 40 degrees
  • Repeat this 7 times

When drawing this out on paper this was the result ↓

The next step was to then convert this set of rules into code in P5.js

Here is the final result of converting this into code. In the future before coding something like this I will try and write it out in pseudo-code in advance.

Code

function setup() {
createCanvas(600, 750);
rectMode(CENTER);
angleMode(DEGREES);
background(220);
}

function draw() {
background(‘white’);

for (let i = 0; i < 7; i++) {
let rectSize = 50 + i * 20;
push();
translate(300, 28 + i * 100);
rotate(i * 40);
noFill();
rect(0, 0, rectSize, rectSize);
pop();

}
}

Leave a Reply

Your email address will not be published. Required fields are marked *