Skip to content →

Category archive for: icm

penelope – final documentation

Like I’ve said in many posts before, for my final project I designed a weaving loom that weaves during the day and unweaves during the night. So the system works in this order:
1) p5 access data from the web a) geolocation of the piece b)time when the sunrises and when the sunsets
2) p5 says if it’s day or if it’s night
3) send this data to Arduino
5) arduino turn stepper motors on, changing the direction according to the information received
6)build the final weaving loom
6) mount arduino and steppers on the weaving loom

And I tried to build the separate parts in separate steps but that didn’t work separately at all. So bellow is an attempt to separate them in three big segments/posts that were developed simultaneously:


At first I started to take a look on how sunrise/sunset astronomy APIs work to understand what kind of information I would need as a geolocation reference for it. I opted to use the weather channel API ( ), that can call astronomy information from different positions according to city name or latitude and longitude.

var currentTime;

function setup() {
  createCanvas(480, 240);
  loadJSON("", gotData);

function gotData(data) {
  currentTime = data;

function draw() {
  if (currentTime) {
    fill(255, 200, 0, 100);
    ellipse((currentTime.sun_phase.sunrise.hour) * 20, height / 2, 10, 10);
    fill(0, 200, 255, 100);
    ellipse((currentTime.sun_phase.sunset.hour) * 20, height / 2, 10, 10);
    if (currentTime.moon_phase.current_time.hour > currentTime.sun_phase.sunset.hour || currentTime.moon_phase.current_time.hour < currentTime.sun_phase.sunrise.hour) {
      fill(100, 100, 100, 100)
    ellipse((currentTime.moon_phase.current_time.hour) * 20, height / 2, 10, 10);


Since most geolocation APIs give back latitude and longitude coordinates, I was now ready to find a geolocation API that works with those two variables. For commodity and popularity I started testing with the google geolocation API. After a while trying to make the sketch to work on my computer and failing overtime with some error related to the API variable, I decided to go to the ICM group and ask for help. John Farrell told me I could try to work with a built-in HTML function called navigator, so that I didn’t need to worry about APIs and it would give me the object in pre-formatted standards. That also didn’t work at first and after a while googling I found out that because those were referring to variables outside my sketch, they didn’t work unless they were running on the web. I uploaded the sketch and charm – it worked!


Now that I knew how to use the navigator and google api , it was just a matter of understanding how the weather channel API worked, how I accessed the sunrise and sunset objects and how I could put an api inside an api. So what I got as a solution was to assign a new global variable to each of the coordinate values and add them up to the weather channel API url. Tom Igoe gave an interesting comment about the geolocation that I didn’t know: they only actually work outdoors, inside building they get the closest value they can get. But for now, all I needed to know where the loom is and that worked.

Once I had the sunset and the sunrise hours of the day, it was time to compare it to the current time and define if it was either day or night. Creating new variables for each of those hours and comparing them through if statements to know if it’s day or night. Once I had that comparison I had to work with some tricky situation with accessing the weather channel API: I’ve put it on the draw function and soon enough I got an email from them saying I had accessed the limit of access per day I could have. It took a while for me to understand that to only access it once a day I’d have to create universal variables, assign them values inside a “weather channel” function and then call them back on the function draw.

var coordenadas;
var data;
var posR; //position sunrise time
var posS; //position sunset time
var posC; //position current time

function setPos(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  text("latitude: " + lat, 50, 50);
  text("longitude: " + lng, 50, 70);

  var url = '' + lat + ',' + lng + '.json';
  loadJSON(url, gotData);

function gotData(data) {
  text("sunrise: " + data.sun_phase.sunrise.hour + ":" + data.sun_phase.sunrise.minute, 50, 90);
  text("sunset: " + data.sun_phase.sunset.hour + ":" + data.sun_phase.sunset.minute, 50, 110);
  var hora = hour();
  var minuto = minute();
  text("current time: " + hora + ":" + minuto, 50, 130);
  line(posR, height / 2, posS, height / 2);
  posR = ((data.sun_phase.sunrise.hour) * 50) + data.sun_phase.sunrise.minute;
  posS = ((data.sun_phase.sunset.hour) * 50) + data.sun_phase.sunset.minute;

  posC = ((hora) * 50) + minuto;
  fill(255, 255, 0);
  ellipse(posC, height / 2, 20, 20);
    ellipse(posR, height / 2, 10, 10);
      ellipse(posS, height / 2, 10, 10);


function setup() {
  createCanvas(1200, 600);


function draw() {
  background(180, 225, 255);

After I was able to get all the values working, I asked some friends around the world to test it (just to be sure it was working).


Now that I had everything running well on the p5 , it was time to connect it to the Arduino sketch – and this was also tricky because I needed to access a serial port from a sketch that was uploaded on the web. I didn’t quiet understand how the communication between both happened, so this was a good exercise to understand how it works. I also went up to the ICM group and was help by Shawn Van Every, who told me I could access the serial server manually, through the p5 serial port node library.

var serial; // variable to hold an instance of the serialport library
var portName = '/dev/cu.usbmodem1421'; // fill in your serial port name here
var inData; // for incoming serial data
var outByte = 0; // for outgoing data

var coordenadas;
var data;
var posR; //position sunrise time
var posS; //position sunset time
var posC; //position current time
var texto = "";

var hora, minuto;

// var dados = {};

function setPos(data) {

  var url = '';
  loadJSON(url, geoLocation);

function geoLocation(data) {
  var lat =;
  var lng = data.location.lng;
  sunTime(lat, lng);


function sunTime(lat, lng) {
  var url = '' + lat + ',' + lng + '.json';
  loadJSON(url, test);

function test(data) {
  hora = hour();
  minuto = minute();
  posR = ((data.sun_phase.sunrise.hour)) + data.sun_phase.sunrise.minute;
  posS = ((data.sun_phase.sunset.hour)) + data.sun_phase.sunset.minute;
  posC = ((hora) * 100) + minuto;


function printData() {
  hora = hour();
  minuto = minute();
  text("current time: " + posC, 50, 130);
  text("it is", 50, 150);
  if (posC > posS || posC < posR) {
    text("NIGHT", 70, 150);
    texto = 'H';
    // turn the motors this way
  } else {
    text("DAY", 70, 150);
    texto = 'L';
    // turn the motors the opposite way
  text(texto, 70, 150);


function setup() {
  createCanvas(1200, 600);
    serial = new p5.SerialPort(); // make a new instance of the serialport library
  serial.on('data', serialEvent); // callback for when new data arrives
  serial.on('error', serialError); // callback for errors; // open a serial port


function serialEvent() {
  // read a byte from the serial port:
  var inByte =;
  // store it in a global variable:
  inData = inByte;

function serialError(err) {
  println('Something went wrong with the serial port. ' + err);

function draw() {
  text("sunrise: " + posR, 50, 90);
  text("sunset: " + posS, 50, 110);
  // gotData(data);

Everything works the way it should be, yay! Some improvements I’d like to do in the future regarding to this computational media part of the project:
– be able to make it refresh by itself once a day
– be able to string the data and send to the how long the day / night is and therefore how low the weaving and unweaving should take


For sure one of the biggest challenge on this project was to work with motors – something that I was very excited about but I didn’t have a lot of knowledge over. I had some stepper motors I had recently bought and therefore I decided to use them. I started by putting them to work through an H bridge and powering it with a bench power supply, which worked with a simple code but had a lot of wiring that didn’t make a lot of sense and was extremely messy. I was also very concerned about wiring the motor with the power supply, because I didn’t want to exceed the limit current of the motors.


I was able to make both motors to work separately and the mechanism (the stepper winding and unwinding the thread) as well. When I tried to turn the two motors at the same time, I wasn’t sure on how I should power them and after talking with some friends & Jeff, I decided to test some motor shields to control the steppers. I tried sparkfun’s super easy driver (but it didn’t work at all – maybe the way i wired and/or solder it) and adafruit motor shield, that had a great documentation online and was very straight forward on how it should be wired as well as how the code/stepper library worked.


How to manage the power supply seemed a bit arbitrary at the beginning and I accidentally burned one of the chips on the motor shield because both motors working at the same time were demanding more than 3A, the maximum current the shield can take. But after having some office hours with one of the residents(Pedro), I was able to understand that the power supply is not actually that controllable and what you can do (and for this case it was very important) is limit the current.
Once I had the wiring and power figured out, it was time to test and experiment with the speed of the motors and speed modes (single, double, micro steps etc). At first I thought that all I needed was to make them work at the same time, running in different directions; ater testing, I’ve realized that this was actually tensioning the thread in different directions and wouldn’t make the thread to move around. Some experiments were made, specially with the single and micro steps, and I chose to use a combination of alternated micro steps between both motors. This way, the thread was never 100% tensioned and it was moving elegantly smooth.
Now that the mechanism of arduino + motors was also set, I had to change the serial communication code on the arduino side, so that it would turn on the motors and move them in the right speed and direction.

int incomingByte;     // a variable to read incoming serial data into

#include "utility/Adafruit_PWMServoDriver.h"

// Create the motor shield object with the default I2C address
Adafruit_MotorShield AFMS = Adafruit_MotorShield();

Adafruit_StepperMotor *myMotor1 = AFMS.getStepper(200, 1);
Adafruit_StepperMotor *myMotor2 = AFMS.getStepper(200, 2);
void setup() {
 Serial.begin(9600);             // initialize serial communication

AFMS.begin();  // create with the default frequency 1.6KHz
  //AFMS.begin(1000);  // OR with a different frequency, say 1KHz

  myMotor1->setSpeed(100);  // 10 rpm

  myMotor2->setSpeed(100);  // 10 rpm

void loop() {
 if (Serial.available() > 0) {   // see if there's incoming serial data
   incomingByte =; // read it
   if (incomingByte == 'H') {    // if it's a capital H (ASCII 72),
  myMotor1->step(100, FORWARD, MICROSTEP);
   if (incomingByte == 'L') {    // if it's an L (ASCII 76)
  myMotor2->step(10, FORWARD, MICROSTEP);

It worked!! The only thing that I’d like to continue to develop is to make the shift from day to night (motor direction and speed) automated. For now, when the sunset/sunries time comes, it doesn’t understand that it changed – so I have to refresh the p5 sketch so that it changes the direction. It’s fine for the moment because it can be controlled manually but I think that for a consolidated version of this project (maybe with several pieces around the world?) this should be working automatically.


At last but not least at all – while I was developing icm and p-comp parts, fabrication was happening in a sort of obsessive rhythm. During the time I developed this project, I kept on building different versions of the loom: different mechanisms for the thread to roll as well as a wide range of sizes and cloth’s weft. There were 10 versions of a weaving loom to understand which would work with the mechanism i was dealing with : two steppers working in different and/or same direction to pull a thread one way or another. Like it has been shown in other assignments for fabrication, I was able to get some positive conclusion by myself as well as feedback from Ben and other builders that have much more experience within designing mechanisms/machines than me.


For sure there were three big challenges on building the loom: working with a mechanism that wouldn’t lock the thread’s movement, fitting the parts of it perfectly and giving the whole piece a nice polished finish. One colleague and Jeff Federsen were following the building process and suggested that I tried to work with pulleys, that were available at McMaster and they were great to work with. It was a bit of a short in the dark but a shot that for sure was likely to work since they can handle much more tension/friction than I was putting on them. While looking for the right pulley, I found out that McMaster Carr not only has a great search engine but also there are so many different types of pulleys – and there are specific pulleys for ropes. I didn’t find pulleys with the small dimensions I had in mind and those rope pulleys were a bit over my budget, so I chose to buy 10 big rope pulleys; you don’t have the sensation of being a fabric (in the case of the concept of this piece, a shroud), but it does have the visualization of the weaving being done and undone.
Since this was the final version of the loom, I wanted to plan if very well and be sure that I didn’t miss any of the measurements or that after starting to build it I’d realize I needed more of x or y material. From the sizes that I’ve tested on older versions of the loom and also according to the number and sizes of the pulleys (thank you McMaster for the downloadable files!!), I picked a “medium” size that was a bit bigger than my small looms but that I felt comfortable that would work – and then I went straight to Illustrator to calculate precisely how much of each of the materials I would need. So this is the technical drawing of the piece:


After finishing this technical drawing, I went straight to metropolitan lumber shop to get the wood for building it. I knew I wanted to try to work with either pine wood or poplar tree, but I didn’t know which would be more affordable. Surprisingly I was well treated at metropolitan: they helped out explaining the differences, gave the cost of each one of them and explained me better about wood thickness – something that I didn’t count in on my technical drawing, but it was ok because i got a pine wood that was thicker than i needed.
Back to the shop, it was time to face the band saw the way it is: it doesn’t cut straight and it requires a lot of filing to make your pieces to fit each other. The positive point was that there were only four pieces of pine to be filed (for the weaving frame); but even though, it was an afternoon full of dust to make the pieces fit each other and to have the same exact measures.
After this, it was a matter of marking where the pulleys and motor mounts would go and assembling the pieces together – so before starting this, I went to the yellow cabinet and looked for unlabeled finishing wood oils. I knew I wanted to make the wood a less pale due to the fact that the thread had to be white and it kind of disappeared if kept the pine wood in its natural color. I had some spare piece of the wood and this was great for testing finishing oils. I tested a few tinted finishing oils and decided to go with one layer of the oak wood finishing oil, that gave a golden/tanned finish to the wood enough to pop the thread out of it and to make it look well finished. I waited 10hrs for the oil to dry and started marking down and assembling the pulleys to the side of the weaving frame.

penelope_15Using the punching whole tool and putting a tape on the driller bit as a stopper were very handy for this step: making sure i didn’t go through the wood and that the holes were drilled where they should be assured me that both sides of the frame were aligned as initially planned. After assembling the pulleys, i assembled the weaving loom frame to realize i hadn’t plan where the motor mount would go. i improvised and went to the laser cutter with some thick acrylic I had, doing some tweaks on a vector file of a motor mount I had so that it would fit the stepper motor i had.

so one of the motor was mounted and the other was loose, in front of the weaving loom. I’ve put the loom to work to realize that motors have to be better mounted and any change on the thread direction would cause a lot of friction and lock the movement at some point.


So I decided to get real motor mounts and rethink both thread reels position within the weaving loom. With the stepper mounts, I’ve put them as aligned with the weave as possible, so the one that was pulling the fishing wire was upside down on the inside-top-left corner of the loom and the one that had the cotton thread was on the horizontal axis, with a thread reel mounted on the stepper rod outside the wooden frame, but keeping the direction of the thread the same of the weaving. I had laser cut a disk to fit the stepper rod and to attach the wooden spool to; it definitely worked to make the reel to spin according to the motor direction and speed but I had to improvise a bit because the thread started to wind before the spool – for the show, i used a small pencil to stop this.



BUT I MUST CONFESS that this was not the last version of the loom. the guys from metropolitan accidentally gave me some poplar wood big enough to make a new version of the loom. Seeing that the pulleys worked, I got confident to try to make my own pulleys with sewing machine reels and aluminum tubes, making more horizontal lines as well as hiding the pulleys and the arduino. Again, I went back to illustrator and got all the measurements correct.

penelope_25v2I got some help from a friend to make the pulleys and one motor’s slot inside the wood with the CNC machine. I did the illustrator file and got a lot of help to transform it and export it to the CNC machine. It looks more scary than it actually is; you just have to pay a lot of attention when you set the file on the shop computer and when you set the machine to work. And also I’ve learned that you really have to attach your wood to the table to be sure it won’t start spinning with the CNC on.

And so I spend more time building this loom that I thought it would be my final solution. I also had to think how the motor of the fishing wire would be mounted, how it would fit the pulley column etc. It was a lot of work but I felt that it would work – or at the worse situation, it would be just a manual weaving loom. So I built it and put all the elements in it. When I turned it on, it didn’t work. At all. It was too much fiction and I didn’t give enough space for the reels to spin freely – so if one of two got locked, it ended up locking up the whole movement.

For those who came to the show probably saw me live weaving on supenelope_29nday (since it was not working and there was no time to go back to the other version). On monday I was able to get the earlier, mount both motors to the old version of the loom and made it work!


I wish to continue on improving the weaving loom, making it bigger and adding more horizontal lines, trying new pulleys & other materials. I don’t know how long it would take, but I’ll try to see if I can get any kind of grant or short artist residence to develop it further. And I really got the hang of building things, I’m looking forward to improve my shop skills and learn other machines, making fabrication more and more clear and easy.


Thank you Dan, Jeff and Ben for helping out through the process; I do feel I learned a lot and specially because you all pushed me further to test and experiment with possibilities that I haven’t tried before. Thank you all itp friends who helped me out from the moment Penelope was just an idea to the final moment of mounting motors right before the show started on monday!


It was indeed a great semester, see you soon ITP =)

Leave a Comment

intro do fab / week 05 – two materials

for this week assignment we had to fabricate something using to materials that were not acrylic or plywood. since i’m non-stop building looms and i needed to test one last version of a loom for my p-comp final, i decided to make a new weaving loom with some better quality wood and metal rods (i ended up using acrylic as well – sorry ben).

from my last experiences in fabrication i learned that the first thing that i needed to do was to plan exactly all the measures of the loom, where each piece would fit, how much of each material i would need and when i needed to buy all of them. so i did a sketch of a blueprint on illustrator to perfectly plan how the loom would come out and took it with me to buy the materials. since i didn’t know which specific materials i wanted to work with, i looked through some of the websites to know what materials i want. i went to metropolitan and surprisingly they were very helpful and i decided to use pinewood to work with. some friends went to metalliferous, so i looked on their website what metal rod i wanted to use.


once i got the material, i prepared them (aka cut and file the ones that need to be filed) and was reading to start techniques of fastening them. to guide me, i did a list of procedures i should do, in the order i believe they work better:


for weaving part of the loom, i had done some tests before and i needed some kind of metal rod that wouldn’t bend. i wanted to make threads on the rod as well as to matching threads on the wood with the tap and die tool – but i think that the kit is missing some piece to fit the tap, i tried doing it by hand (testing it) and it didn’t work. so i just drilled a hole and put the brass rods. even though i needed some kind of structure that would stop the weaving of going to the center, i also needed it to let the thread to run freely – so i put an acrylic tube over the brass. it was the right fit, not too loose but loose enough to spin with the thread. i had to hammer them (the wood got a bit dirty but it’s ok).

i’ve been working with the pocket screw jig and i feel confident about it, so i decided to keep using them to assemble the frame. however, the pinewood i was working was a bit too thin, so i had to be really careful on where to make the pocket screw hole. i ripped off a little bit of the pinewood in one of the wholes, but since i had no left overs of the material, i just ignored it and assemble the one besides it.

i was very happy with the result, but i want to get better on making the material assemble better. even though it works and it is not falling/ it balances by itself, it’s still not perfectly fitting.


and here’s a demo o how the weaving loom works:

Leave a Comment

penelope / weaving loom prototyping

i worked on the last two weeks on a prototype in different scales for the weaving loom. it’s been a very intense process of doing, testing, rethinking and doing a new version. i’ve never weaved before this but i have experience in manual crafts and though it wouldn’t be that hard to weave. it is not, but to think how a machine can weave is more challenging than expected for sure.

prototype 01. small, full weaving


successes – i was able to weave, the frame works well;

failures – was able to cross the thread on the horizontal axis, not in ther vertical axis.


prototype 02. alternate crossing, small (long) loom, test weaving



sucesses: was able to also make the threads vertical axis to cross

failures: using two wood pieces to alternate them lock the crossing in the middle of the weaving canvas.


prototype 03. big frame (actual size), test weaving



sucesses – the vertical axis crossing happened by just a back and forth movement;

failures – the crossing of the lines was not high enough to make the weaving to start at the top of the frame and i would lock the weaving if i have some kind of wood piece crossing the threads on the horizontal axis.


Leave a Comment

icm + p-comp final / penelope

title Penelope

what is it A tapestry loom that weaves and unweave according to sunrise and sunset, referring to an excerpt of Homer’s The Odyssey in which Penelope delays an unwished fate by choosing to decide to which of her suitors she would marry once she finishes the burial shroud for Odysseus’s elderly father Laertes.


kickstarter point Although there’s a romantic aspect on this story, my interest in this passage of The Odyssey is focused on the fact that it exhibits women empowerment through subtle actions – specially in a mythological context in which the woman are not only submitted to fate, but also to the misogynous dominance of men over decisions.

description A tapestry loom that weaves when the sun rises and unweaves the same piece when the sun sets. The white thread on the loom refers to ancient greek burial rituals in which the deceased would be dressed in a full length white shroud – as if the closer the loom gets to have the piece done, the more Penelope is confined to her own imprisionement.


audience The audience of this work is every person interested in art, installations, conceptual work and mythology.

questioning pt1 Penelope weaves during the day and during the night, when there’s no one watching, she unweave it. When one of her maids accidentally sees her unweaving, she tells Icarus and Penelope is uncovered. I thought that maybe adding this to the installation in a way that if someone goes through the piece when it is unweave the loom would break…what you guys feel about this idea? Any other suggestions on how or if I should add this to the piece?



Ligia Pape – Ttéia 1C / Site-specific installation using steel wires and lighting in a room, creating a very aerial and immersive environment.

Clotho – CADU / Performance with two women (each one on a corner of a room) in which one does crochet while the other undoes it.


Falha – Renata Lucas / Site-specific installation in which the “flexibility” of the wooden objects are an invitation to the public to intervene and transform the piece.

Fragmented Memory – Phillip Sterns / woven tapestries made out of raw binary data from the computer/s physical memory.

questioning pt 2 any ideas on how I can automate the loom (it’s going to be a simple one)? how can make it more clear that the loom will only weave when is day and unweave during the night, considering the fact that the public won’t see it for the full 24hrs ?

I think most of my questionings are also a question over how far can we go with technology without being overwhelmed by it, finding a balance on creating a very dense installation without extrapolating on technological tool…help out, would love to hear your thoughts over it!!

One Comment

icm / week08 – sound & video

for this week, I wanted to explore a little bit of what we were introduced in class: video and sound on p5. I also had a class this week about synthesizer sounds that we were questioned how to make the sound of the ocean on a digital software – and you can do it (as similar as possible, obviously is not the same thing) but raising the volume up and down a white noise.

so I decided I wanted to make a beach in which the water level would vary according to the person’s movement (captured by the webcam) and the closer the water leve is from the shore, the louder is the white noise.

I had some issues with the video capture, because it is not that smooth and I couldn’t perceive a pattern on how the user’s movement( left > right / back > forth ) was affecting the tide. It was a good exercise and I hope to explore more the sound usage on p5.

Here’s the sketch, move around and have some calming (but fun) time!

Leave a Comment

icm / week 07 – DOM + arrays

Hi there! Long time no see because I was really confused about functions, objects (constructor forms) and arrays – and DOM as well. but now I think I’m understanding them bette,r just need to practice more and watch some of Shiffman’s videos to catch up =)

So I kind of figured out how arrays work and I wanted to use them with the DOM exercise. I decided to create a gradient canvas in which the user can control the amount of red, blue and green on the screen and that this gradient value would vary with the width of the canvas.


I think it’s still confusing how DOM elements and the sketch integrate and they behave differently so sometimes I didn’t know how to fix some issues (ie if I put an html text, it won’t reload but will keep on writing over the last text, kind of messy).

It was nice to exercise a bit and get introduced to DOM, but it would be great if we could do some of the examples in class, going step by step.

You can check my sketch here.

Leave a Comment

icm / friday workshop

Last friday all of icm classes got together to understand how to communicate between arduino and p5, followed by the one button design challange =)

I was paired with Zoe and we decided to do a slot machine haiku from which we could get reflections over ITP stuff.


We were able to make the serial communication between them, but we weren’t able to figure out which part of the code on the p5 was placed on the wrong place – so the program didn’t actually worked the random combinations part of it. Despite that, it was definitely fun to do it and see everybody together working on small creative applications.


One Comment

icm / week03 & 04

For this week’s assignment, we worked with rule-based animation, motion and interaction. My partner in crime this time was Jess and we did our separate projects at the same time. We had a good exchange because we both knew what we wanted to do and we were helping each other or reaching for help around the ITP floor.

Screen Shot 2015-09-22 at 1.10.40 PM

I did a square based grid that changed the fill color of each square if the mouse was over it. To facilitate things, I wrote down in proper English what I wanted to do and then started to “translate” it to javascript. For sure one of the things that I didn’t realize and I had a big issue in the beginning was that the order that you put your code will make a difference. This was key point of the rollover animation that I wanted to do and once I got it figured out, I was able to move on and work on other aspects of the sketch.

I tested some other functions such as rotation and things got really interesting, but not exactly what I wanted:

You can check my final sketch here .


UPDATE: here’s my sketch using function, instead of putting all the code on draw.

Leave a Comment

icm / week02

This week we learned about some new elements, but mostly about a very important one widely used on the javascript : variables. Name it, initialize it (note to myself: always on setup!!), use it and vary it.
The homework was to gather with one of our fellow colleagues and do our homework, wether on one project or separate projects. I sat with Jason to work and it was really good to share the experience of learning js with someone doing the same thing.
We started talking about what the homework was about, as well as what we had in our minds. We helped each other while doing our homework. For this assignment, I decided I wanted to do some kind of visual abstraction playing with the mouse position, randomness.

So what I did was a drawing canvas in which the color of the stroke would be randomly chosen when I started running the sketch. The stroke (line) size would randomly vary as well as change the random range once you pressed the mouse – it would increase until a certain value and then go back to the initial range. And the stroke, like any drawing canvas, will draw according to the mouse position.

I had some trouble at the beginning to understand the limitations of size i.e. what values would make the sketch only draw within half of the canvas, so I asked Jason some help and it was good to ask him because I really had to read my code and understand what I had coded, so that I could explain to him in proper English. This helped me to understand where I got it wrong and how to fix it. Here’s my final result:



 var pointY1 = 30;
var pointX2 = 30;
var redColor;
var blueColor;
var random1 = 10;
var random2 = 30;

function setup() {
  redColor = random(0,255);
  blueColor = random(0,255);
  print("red ="+redColor);
  print("blue ="+blueColor);

function draw() {
  pointY1 = random(random1,random2);
  pointX2 = random(random1,random2);
function mousePressed(){
    random1 = random1 + 50;
    random2 = random2 - 50;
    if(random1 >=280){
      random1 = random1 = 50;
    if(random2 <=0){
      random2 = random2 + 50;

The best thing is to go, test, review the code, update and test it again. My final result is an experiment but I really like the idea of playing with random numbers - I think I’d like to explore it further on the next exercises.

Leave a Comment

icm / week 01

For the first week of ICM we were introduced to some programming concepts and in the end of the class we started programming a bit on p5, which is a variation of processing – I hope this will be a smoother learning curve.

Our homework was to create an image through shapes on p5.

So I created the bold boy:


For this exercise, I had to think a lot about coordinates, going step by step and understanding the order of the elements. I had some trouble to find out some coordinate points (despite my math was right) and with setting the color for different elements. The way I solved this issue was probably not the more objective, but that worked anyway =) and to create a new shape I did some arcs, lines and a rectangle to complete the “fill” of the shirt.

function setup() {
point (290,290);
point (310,290);
line(284.5,340,284.5,365); //arm 1
rect(281,365,3.5,4,5,0,5,5); //hand 1
line(314.5,340,314.5,355); //arm 2 pt 1
line(314.5,355,322.5,350); //arm 2 pt 2
ellipse(322.5,350,4,4.7); //hand 2
line(289.5,340,289.5,370); //shirt lenght
line(309.5,340,309.5,370); //shirt lenght
line(284.5,340,289.5,340); //shirt sleeve
line(309.5,340,314.5,340); //shirt sleeve
line(289.5,370,309.5,370); //shirt end
rect(290.5,370,9,15);//short 1
rect(299.5,370,9,15);//short 2
line(297.5,385,297.5,400); // leg 1
line(301.5,385,301.5,400); // leg 2
rect(292.5,400,5,3,5,0,0,5); // shoe 1
rect(301.5,400,5,3,0,5,5,0); // shoe 2
function draw() {

You can see the code actually running on this link.

This was a good exercise to warm up and remember some of the basics concepts of javascript programming, looking forward to better understand p5 and javascript!

Leave a Comment