top of page

CODE

String msg = "Together, we will get through this" ;
  
PFont myFont;
float r = 280;                                                                    
int tSize = 55 - mouseY/15;

void setup() {
  
 size(1200, 800); 
  myFont= createFont("SentyWen",100); 
  textFont(myFont);
  textAlign(CENTER);  
  smooth();
 
}

void draw() {
 
  background(253,253,150);
  translate(width/2, height/2);    
  noFill(); stroke(20, 20);
  ellipse(0, 0,0, r*2-25);
  ellipse(0, 0,0, r*2+tSize+28);
  int tSize = 55 - mouseY/15;
  textSize(tSize);
                                              
  
float arcLength = 0;                                                                  
  
  fill(255); strokeWeight(2); stroke(0);                                             

  for (int i=0; i<msg.length(); i++)                                                    
  {
   char currentChar = msg.charAt(i);
  float widthChar = textWidth(currentChar);                                        

    arcLength += widthChar/2;                                                         
 
   float theta = PI + arcLength/r;                                                
                                                                                   
    pushMatrix();                                                          
      translate(r*cos(theta+map(mouseX, 0, width, 0, TWO_PI)),                   
                r*sin(theta+map(mouseX, 0, width, 0, TWO_PI)));
      rotate(theta + PI/2 + map(mouseX, 0, width, 0, TWO_PI));    
      fill(0);
      text(currentChar, 0, 0);                                                        
    popMatrix();                                                                           
   
    arcLength += widthChar/2; 

}
}

FUNCTIONS & REFERENCE TO TASK 1

The code above are a modified version of the original code. The original code is not written in the processing code language and so I decide to modified it. The idea of this programme is to show that we are "together". The settings of letting the sentence to go around a circle shows that everything will be fine and everyone will go through this safely. In addition, the settings of making the size of the letters big and small is to shows that no matter who you are and how old are you, everyone will go through this safely. It is clearly seen in the video that if the mouse moves vertical, the text size will change, if the mouse moves horizontal, the sentence will rotate around the circle.

​

In addition, in this code, I also uses some of the function that I learned in task 1. One of the function I used is the ellipse() function. This function is also been used in the 'Colour Shapes' Task. I uses this function to creates two ellipse that have different size so that my sentence will be able to rotate between the two ellipses. Then, I also uses the pushMatrix() and popMatrix() function. This function is also used in 'Rotating Text 3' code. The reason of using this function is the same as the 'Rotating Text 3' code.

​

I believe that this code express my feelings towards the pandemic. This code also shows my learning upon different code's function(). I have uses function() that I learned in Task 1 to completed this code.  I learned that coding can express human's feeling in a different way and at the same time, I also learned many new things about coding.

ORIGINAL CODE

let msg = "Ήταν μια φορά κι έναν καιρό ένα βασίλειο χτισμένο γύρω από μία λίμνη";                

let radius = 280;                                                                                                                                           

function setup() 
{
  createCanvas(800, 800);
  textAlign(CENTER);                                                                                                                              
}

function draw() 
{
  background(120);
    tSize = 55 - mouseY/15;
    textSize(tSize);

  translate(width/2, height/2);                                                                         
  noFill(); stroke(20, 20);
  ellipse(0, 0, radius*2-25);
  ellipse(0, 0, radius*2+tSize+28);

  let arcLength = 0;                                                                  
    
    fill(255); strokeWeight(2); stroke(0);                                              

  for (let i=0; i<msg.length; i++)                                                    
  {
    let currentChar = msg.charAt(i);                                                  
    let widthChar   = textWidth(currentChar);                                         

    arcLength += widthChar/2;                                                          
 
    let angle = PI + arcLength/radius;                                                 
                                                                                                                  
    push();                                                                                                  
      translate(radius*cos(angle+map(mouseX, 0, width, 0, TWO_PI)),                   
                                radius*sin(angle+map(mouseX, 0, width, 0, TWO_PI)));
      rotate(angle + PI/2 + map(mouseX, 0, width, 0, TWO_PI));                        
      text(currentChar, 0, 0);                                                        
    pop();                                                                            
    
    arcLength += widthChar/2;                                                         
  }
}

As mentioned above, this original code by BS-007 is not written in processing format and so the original code above will not work in processing. The video has recorded about how does the original code looks like. The original code gives me an idea about what I should do for this task and so I modified it. Although the code above is not working in processing, it is still quite similar to it.

bottom of page