Draw Dollar effect

The dollar sign was created by my online Pixel Art editor. It is not a picture. It is a code suitable for P5 (processing 5) GUI.

This example has been created to show the way of creating graphics inside a web application, using only code and no graphic files.

The first 8-bit games were created in the times when there were no graphic editors. It is not impossible to do the same now.

I used a cycle "for" to place multiple signs in the window, and the math function Cosine to produce scale in and out effect in this example. Some functions are used only with the p5js library. 





Here is the code for P5JS Editor. Be free to copy and paste and use in your own P5JS application.

// The Code :  

let stepX;

let stepY;

let sW=80;

function setup() {

  createCanvas(400, 400);  

  stepX=round(width/sW);

  stepY=round(height/sW);

}


function draw() {

  background(220);  

  for (var i2=0;i2<stepY;i2++){

  let y=sW*i2+sW/2;

  for (var i=0;i<stepX;i++){

  let x=sW*i+sW/2; 

  push();

  translate(x,y);

  let sc=cos(millis()/1500)*1;

  scale(sc,sc);

  rotate(millis()/500);

  noStroke();

  tint(0);

  draw_dlrSimb(-74,-30);

  pop();

  }

  }

  /*  stroke(255,0,0);

  line(0,height/2,width,height/2);

  line(width/2,0,width/2,height);

  */

}

// This is a compressed function that creates a dollar sign for the example

function draw_dlrSimb( dlrSimb_X, dlrSimb_Y   ){fill(0,0,0);rect(72+dlrSimb_X,8+dlrSimb_Y,5,5);fill(0,0,0);rect(68+dlrSimb_X,12+dlrSimb_Y,5,5);fill(132,203,254);rect(72+dlrSimb_X,12+dlrSimb_Y,5,5);fill(0,0,0);rect(76+dlrSimb_X,12+dlrSimb_Y,5,5);fill(0,0,0);rect(64+dlrSimb_X,16+dlrSimb_Y,5,5);fill(132,203,254);rect(68+dlrSimb_X,16+dlrSimb_Y,5,5);fill(132,203,254);rect(72+dlrSimb_X,16+dlrSimb_Y,5,5);fill(132,203,254);rect(76+dlrSimb_X,16+dlrSimb_Y,5,5);fill(0,0,0);rect(80+dlrSimb_X,16+dlrSimb_Y,5,5);fill(0,0,0);rect(60+dlrSimb_X,20+dlrSimb_Y,5,5);fill(132,203,254);rect(64+dlrSimb_X,20+dlrSimb_Y,5,5);fill(0,0,0);rect(68+dlrSimb_X,20+dlrSimb_Y,5,5);fill(132,203,254);rect(72+dlrSimb_X,20+dlrSimb_Y,5,5);fill(0,0,0);rect(76+dlrSimb_X,20+dlrSimb_Y,5,5);fill(132,203,254);rect(80+dlrSimb_X,20+dlrSimb_Y,5,5);fill(0,0,0);rect(84+dlrSimb_X,20+dlrSimb_Y,5,5);fill(0,0,0);rect(60+dlrSimb_X,24+dlrSimb_Y,5,5);fill(132,203,254);rect(64+dlrSimb_X,24+dlrSimb_Y,5,5);fill(0,0,0);rect(68+dlrSimb_X,24+dlrSimb_Y,5,5);fill(132,203,254);rect(72+dlrSimb_X,24+dlrSimb_Y,5,5);fill(0,0,0);rect(76+dlrSimb_X,24+dlrSimb_Y,5,5);fill(0,0,0);rect(80+dlrSimb_X,24+dlrSimb_Y,5,5);fill(0,0,0);rect(84+dlrSimb_X,24+dlrSimb_Y,5,5);fill(0,0,0);rect(64+dlrSimb_X,28+dlrSimb_Y,5,5);fill(132,203,254);rect(68+dlrSimb_X,28+dlrSimb_Y,5,5);fill(132,203,254);rect(72+dlrSimb_X,28+dlrSimb_Y,5,5);fill(132,203,254);rect(76+dlrSimb_X,28+dlrSimb_Y,5,5);fill(0,0,0);rect(80+dlrSimb_X,28+dlrSimb_Y,5,5);fill(0,0,0);rect(60+dlrSimb_X,32+dlrSimb_Y,5,5);fill(0,0,0);rect(64+dlrSimb_X,32+dlrSimb_Y,5,5);fill(0,0,0);rect(68+dlrSimb_X,32+dlrSimb_Y,5,5);fill(132,203,254);rect(72+dlrSimb_X,32+dlrSimb_Y,5,5);fill(0,0,0);rect(76+dlrSimb_X,32+dlrSimb_Y,5,5);fill(132,203,254);rect(80+dlrSimb_X,32+dlrSimb_Y,5,5);fill(0,0,0);rect(84+dlrSimb_X,32+dlrSimb_Y,5,5);fill(0,0,0);rect(60+dlrSimb_X,36+dlrSimb_Y,5,5);fill(132,203,254);rect(64+dlrSimb_X,36+dlrSimb_Y,5,5);fill(0,0,0);rect(68+dlrSimb_X,36+dlrSimb_Y,5,5);fill(132,203,254);rect(72+dlrSimb_X,36+dlrSimb_Y,5,5);fill(0,0,0);rect(76+dlrSimb_X,36+dlrSimb_Y,5,5);fill(132,203,254);rect(80+dlrSimb_X,36+dlrSimb_Y,5,5);fill(0,0,0);rect(84+dlrSimb_X,36+dlrSimb_Y,5,5);fill(0,0,0);rect(64+dlrSimb_X,40+dlrSimb_Y,5,5);fill(132,203,254);rect(68+dlrSimb_X,40+dlrSimb_Y,5,5);fill(132,203,254);rect(72+dlrSimb_X,40+dlrSimb_Y,5,5);fill(132,203,254);rect(76+dlrSimb_X,40+dlrSimb_Y,5,5);fill(0,0,0);rect(80+dlrSimb_X,40+dlrSimb_Y,5,5);fill(0,0,0);rect(68+dlrSimb_X,44+dlrSimb_Y,5,5);fill(132,203,254);rect(72+dlrSimb_X,44+dlrSimb_Y,5,5);fill(0,0,0);rect(76+dlrSimb_X,44+dlrSimb_Y,5,5);fill(0,0,0);rect(72+dlrSimb_X,48+dlrSimb_Y,5,5);} 


Here it is -> https://editor.p5js.org/kirzh2020/present/teOYbQIXc

Comments

Post a Comment

Popular posts from this blog

Connecting Wemos (ESP8266) to MB 4 Bot

Image
You need a WEMOS card or ESP32 with Arduino Board and Arduino IDE to load scetches for this example. 1. Download Arduino IDE from here - https://arduino.cc 2. Open Arduino IDE properties and in the new window insert this link: http://arduino.esp8266.com/stable/package_esp8266com_index.json into the Additional link for Boards' Manager section 3. Then open the Tools menu and choose Board Manager in the Board submenu. 4. Type WEMOS in the search string of the Board Manager Window and install ESP8266 and ESP8266 Community drivers. 5. The Last step is going back to Tools Menu and selecting your board in the submenu Boards. In my case, it was LOLIN (WEMOS R1 D2) This is a code example you may copy and paste for your WEMOS. 
Read more

About Game "8 Planes"

Image
This game was created several years ago as supplementary compulsory material for the basic programming course for beginners. The main instrument is Processing 3 for the course.  It includes 16 basic themes: commands, variables, operators, built-in and user's functions, System API, Network and etc. Games as projects for the course make learning more interesting and help to understand deeper complicated and abstract categories. This game used to show the process of creating step by step in detail. The game appears interesting not only for the class, and then I decided to create a more complicated material based on it. So I add a server to create multiple users' game and the game which is possible to play with friends. I call the type of such games - Big Screen Game, or Croud game. Further, I will write about Big Screen Game and what has happened. Now, you may visit our page on ITCH and download 8 Game Planes for PC. Visit ITCH
Read more

Connecting to the Open Web DB from Processing 3

Image
  // This scatch helps you to understand the basics of connecting to the Marker Soft Site.  //Copy and paste. Don't forget to change the access key to yours! //The registration is free. You may use three keys to connect your devices to this network //This is the link  https://markerbank.com/cab.php //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// String txOut="";  int dl=100; void setup(){      size(400,300);   background(255,255,0);   txOut=txMCWeb();   textSize(24);   fill(0);   text(txOut,width/2-(textWidth(txOut)/2),120);       } void draw(){   background(255,255,0);   if (dl<0){   txOut=txMCWeb();   dl=100;   }   textSize(24);   fill(0);   text(txOut,width/2-(textWidth(txOut)/2),120);      String txOut2="";   fill(255,0,0);   textSize(18);   dl--; ...
Read more