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.
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); }