Assignment 2 – AakifR

Concept:
I wanted to use the Urdu word عشق or Ishq and create a fun pattern with it while also involving some level of animation in it. I created a function that would make the word and then I called it in the draw function to repeatedly draw the word on the canvas and create a repetitive pattern. I changed how the word looks each time it is called by using random(). If you want the animation to restart, you can click your mouse.

Highlight:
Not technically too exciting, but I’m kind of proud of creating the word عشق through programming. It was a slightly tedious process and I’m also interested in learning how to streamline that process.

Sketch:

Reflection:
I really wanted each عشق to rotate around a point, but it turned out that it was harder than I thought and it’s something I still need to figure out.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let angle = 0;
function setup() {
createCanvas(1200, 1200);
background(250, 141, 141);
// let's draw ishq
}
// function executeishq(){
// for (let xchange = 0; xchange < width; xchange = xchange +30){
// for (let ychange = 0; ychange < height ; ychange = ychange +30){
// noStroke();
// fill(random(100,105),random(10,55),random(25,55));
// rotate(random(1,90));
// drawishq(xchange + random (1, 100),ychange + random(1,100), random(1,5));
// }
// }
// }
function drawishq(xpos,ypos, size){ //the xpos, ypos change the position of ishq on screen
//first letter
square(16 + xpos,20 + ypos,size,2);
square(22 + xpos,20 + ypos,size,2);
square(28 + xpos,20 + ypos,size,2);
square(34 + xpos,25 + ypos,size,2);
square(16 + xpos,26 + ypos,size,2);
square(16 + xpos,32 + ypos,size,2);
square(16 + xpos,38 + ypos,size,2);
square(22 + xpos,38 + ypos,size,2);
square(28 + xpos,38 + ypos,size,2);
square(34 + xpos,38 + ypos,size,2);
square(40 + xpos,38 + ypos,size,2);
square(10 + xpos,38 + ypos,size,2);
square(4 + xpos,38 + ypos,size,2);
//2nd letter
square(-2 + xpos,38 + ypos,size,2);
square(-2 + xpos,32 + ypos,size,2);
square(-8 + xpos,38 + ypos,size,2);
square(-14 + xpos,32 + ypos,size,2);
square(-14 + xpos,38 + ypos,size,2);
square(-20 + xpos,38 + ypos,size,2);
square(-26 + xpos,38 + ypos,size,2);
square(-26 + xpos,32 + ypos,size,2);
square(-32 + xpos,38 + ypos,size,2);
square(-38 + xpos,38 + ypos,size,2);
//dots
square(-14 + xpos,14 + ypos,size,2);
square(-20 + xpos,20 + ypos,size,2);
square(-8 + xpos,20 + ypos,size,2);
//third letter
square(-44 + xpos,38 + ypos,size,2);
square(-50 + xpos,38 + ypos,size,2);
square(-50 + xpos,32 + ypos,size,2);
square(-50 + xpos,26 + ypos,size,2);
square(-50 + xpos,20 + ypos,size,2);
square(-56 + xpos,26 + ypos,size,2);
square(-56 + xpos,20 + ypos,size,2);
square(-50 + xpos,44 + ypos,size,2);
square(-50 + xpos,50 + ypos,size,2);
square(-50 + xpos,56 + ypos,size,2);
square(-50 + xpos,62 + ypos,size,2);
square(-56 + xpos,62 + ypos,size,2);
square(-62 + xpos,62 + ypos,size,2);
square(-68 + xpos,62 + ypos,size,2);
square(-74 + xpos,62 + ypos,size,2);
square(-80 + xpos,62 + ypos,size,2);
square(-86 + xpos,62 + ypos,size,2);
square(-92 + xpos,62 + ypos,size,2);
square(-92 + xpos,56 + ypos,size,2);
square(-92 + xpos,50 + ypos,size,2);
square(-92 + xpos,44 + ypos,size,2);
// dots
square(-50 + xpos,8 + ypos,size,2);
square(-62 + xpos,8 + ypos,size,2);
}
function draw() {
rotate(angle);
drawishq(random(0,width),random(0,height),random(1,5));
angle += radians(2);
if(mouseIsPressed){
background(250, 141, 141);
}
print(mouseX + "," + mouseY);
}
let angle = 0; function setup() { createCanvas(1200, 1200); background(250, 141, 141); // let's draw ishq } // function executeishq(){ // for (let xchange = 0; xchange < width; xchange = xchange +30){ // for (let ychange = 0; ychange < height ; ychange = ychange +30){ // noStroke(); // fill(random(100,105),random(10,55),random(25,55)); // rotate(random(1,90)); // drawishq(xchange + random (1, 100),ychange + random(1,100), random(1,5)); // } // } // } function drawishq(xpos,ypos, size){ //the xpos, ypos change the position of ishq on screen //first letter square(16 + xpos,20 + ypos,size,2); square(22 + xpos,20 + ypos,size,2); square(28 + xpos,20 + ypos,size,2); square(34 + xpos,25 + ypos,size,2); square(16 + xpos,26 + ypos,size,2); square(16 + xpos,32 + ypos,size,2); square(16 + xpos,38 + ypos,size,2); square(22 + xpos,38 + ypos,size,2); square(28 + xpos,38 + ypos,size,2); square(34 + xpos,38 + ypos,size,2); square(40 + xpos,38 + ypos,size,2); square(10 + xpos,38 + ypos,size,2); square(4 + xpos,38 + ypos,size,2); //2nd letter square(-2 + xpos,38 + ypos,size,2); square(-2 + xpos,32 + ypos,size,2); square(-8 + xpos,38 + ypos,size,2); square(-14 + xpos,32 + ypos,size,2); square(-14 + xpos,38 + ypos,size,2); square(-20 + xpos,38 + ypos,size,2); square(-26 + xpos,38 + ypos,size,2); square(-26 + xpos,32 + ypos,size,2); square(-32 + xpos,38 + ypos,size,2); square(-38 + xpos,38 + ypos,size,2); //dots square(-14 + xpos,14 + ypos,size,2); square(-20 + xpos,20 + ypos,size,2); square(-8 + xpos,20 + ypos,size,2); //third letter square(-44 + xpos,38 + ypos,size,2); square(-50 + xpos,38 + ypos,size,2); square(-50 + xpos,32 + ypos,size,2); square(-50 + xpos,26 + ypos,size,2); square(-50 + xpos,20 + ypos,size,2); square(-56 + xpos,26 + ypos,size,2); square(-56 + xpos,20 + ypos,size,2); square(-50 + xpos,44 + ypos,size,2); square(-50 + xpos,50 + ypos,size,2); square(-50 + xpos,56 + ypos,size,2); square(-50 + xpos,62 + ypos,size,2); square(-56 + xpos,62 + ypos,size,2); square(-62 + xpos,62 + ypos,size,2); square(-68 + xpos,62 + ypos,size,2); square(-74 + xpos,62 + ypos,size,2); square(-80 + xpos,62 + ypos,size,2); square(-86 + xpos,62 + ypos,size,2); square(-92 + xpos,62 + ypos,size,2); square(-92 + xpos,56 + ypos,size,2); square(-92 + xpos,50 + ypos,size,2); square(-92 + xpos,44 + ypos,size,2); // dots square(-50 + xpos,8 + ypos,size,2); square(-62 + xpos,8 + ypos,size,2); } function draw() { rotate(angle); drawishq(random(0,width),random(0,height),random(1,5)); angle += radians(2); if(mouseIsPressed){ background(250, 141, 141); } print(mouseX + "," + mouseY); }
let angle = 0; 

function setup() {
  
  
  createCanvas(1200, 1200);
  background(250, 141, 141);
  
  // let's draw ishq
}
  
//   function executeishq(){
    
//    for (let xchange = 0; xchange < width; xchange = xchange +30){
//     for (let ychange = 0; ychange < height ; ychange = ychange +30){
    
//     noStroke();
//     fill(random(100,105),random(10,55),random(25,55));
//     rotate(random(1,90));
      
//   drawishq(xchange + random (1, 100),ychange + random(1,100), random(1,5));
//     }
// }

// }


function drawishq(xpos,ypos, size){ //the xpos, ypos change the position of ishq on screen
  
  //first letter
  
  
  square(16 + xpos,20 + ypos,size,2);
  square(22 + xpos,20 + ypos,size,2);
  square(28 + xpos,20 + ypos,size,2);
  square(34 + xpos,25 + ypos,size,2);
  square(16 + xpos,26 + ypos,size,2);
  square(16 + xpos,32 + ypos,size,2);
  square(16 + xpos,38 + ypos,size,2);
  square(22 + xpos,38 + ypos,size,2);
  square(28 + xpos,38 + ypos,size,2);
  square(34 + xpos,38 + ypos,size,2);
  square(40 + xpos,38 + ypos,size,2);
  square(10 + xpos,38 + ypos,size,2);
  square(4 + xpos,38 + ypos,size,2);
  
  
  //2nd letter
  
  square(-2 + xpos,38 + ypos,size,2);
  square(-2 + xpos,32 + ypos,size,2);
  square(-8 + xpos,38 + ypos,size,2);
  square(-14 + xpos,32 + ypos,size,2);
  square(-14 + xpos,38 + ypos,size,2);
  square(-20 + xpos,38 + ypos,size,2);
  square(-26 + xpos,38 + ypos,size,2);
  square(-26 + xpos,32 + ypos,size,2);
  square(-32 + xpos,38 + ypos,size,2);
  square(-38 + xpos,38 + ypos,size,2);
  
  //dots
  
  square(-14 + xpos,14 + ypos,size,2);
  square(-20 + xpos,20 + ypos,size,2);
  square(-8 + xpos,20 + ypos,size,2);
  
  //third letter
  
   square(-44 + xpos,38 + ypos,size,2);
   square(-50 + xpos,38 + ypos,size,2);
   square(-50 + xpos,32 + ypos,size,2);
   square(-50 + xpos,26 + ypos,size,2);
   square(-50 + xpos,20 + ypos,size,2);
   square(-56 + xpos,26 + ypos,size,2);
   square(-56 + xpos,20 + ypos,size,2);
   square(-50 + xpos,44 + ypos,size,2);
   square(-50 + xpos,50 + ypos,size,2);
   square(-50 + xpos,56 + ypos,size,2);
   square(-50 + xpos,62 + ypos,size,2);
   square(-56 + xpos,62 + ypos,size,2);
  square(-62 + xpos,62 + ypos,size,2);
  square(-68 + xpos,62 + ypos,size,2);
  square(-74 + xpos,62 + ypos,size,2);
  square(-80 + xpos,62 + ypos,size,2);
  square(-86 + xpos,62 + ypos,size,2);
  square(-92 + xpos,62 + ypos,size,2);
  square(-92 + xpos,56 + ypos,size,2);
  square(-92 + xpos,50 + ypos,size,2);
  square(-92 + xpos,44 + ypos,size,2);
  
  // dots
  square(-50 + xpos,8 + ypos,size,2);
  square(-62 + xpos,8 + ypos,size,2);
  
  
  
  
}

function draw() {
  
  rotate(angle); 
  
  
  drawishq(random(0,width),random(0,height),random(1,5));
 
  angle += radians(2);
  
  if(mouseIsPressed){
    background(250, 141, 141);
  }
  

  
  print(mouseX + "," + mouseY);

}

 

Leave a Reply