First ICM homework: impressions

I loved the first ICM class. I’ve been trying to force myself to learn coding for a few years now: first registering for Computer Science course on edX (and never starting it), then playing some exercises in between projects at the ad agency where I was working, then talking talking talking about it. And I now I can finally say I will do it… or not.

So back to the first class. Few key takeaways:

catch up on term words, hating geometry at high school will finally “pay off”, forget metric system, have Google Translate window opened more often

After we got our homework, I honestly thought “pff, I will do that in no time, when does the real stuff begins.” And believe it or not, I’m sitting at home and trying to do my homework (which is to create a simple drawing using p5.js) and it’s not working!

I’m trying to draw a rectangle on a canvas, but all iI get is an empty canvas:

And some errors on top of all:

And I’m pretty sure it’s not my problem as the program was running just fine last week in the class.

Few hours later… it definitely is not my problem! Since the editor is the work in progress, there are some bugs appearing now and then… and running it in the browser works.

Back to the point: this year at ICM we’ll be using p5.js which is a JavaScript library. Here’s the process of my homework (with really poor drawing skills comparing to other classmates): I first thought of this:

function setup() {
 createCanvas (700, 350);
}

function draw() {
 rect (50, 50, 600, 250);
 rect (275, 275, 400, -200);
 rect (75, 75, 550, 200);
 rect (100, 100, 500, 150);
 rect (125, 125, 450, 100);
 rect (150, 150, 400, 50);
 rect (200, 200, 350, 0);
 rect (275, 275, 200, -150);
 rect (250, 250, 250, -100);
 rect (225, 225, 300, -50);
}

But decided that I’ll leave it for “loop” function and stayed with something simpler:

function setup() {
 createCanvas (600, 300);
}

function draw() {
 background (150);
 
 //head
 fill (255, 255, 102);
 strokeWeight (4);
 rect (225, 75, 150, 150, 30);
 rect (275, 50, 50, 25);
 
 //eyes
 fill (102, 178, 255);
 strokeWeight (2);
 rect (250, 100, 25, 25, 20);
 rect (325, 100, 25, 25, 20);
 
 //nose
 fill (255, 51, 51);
 strokeWeight (2);
 triangle (300, 125, 290, 150, 310, 150);
 
 //mouth
 fill (255);
 strokeWeight (3);
 triangle (260, 175, 335, 175, 300, 200);
}

Here’s the link where you yourself can play with the code.