p5.js

Интересная библиотека https://p5js.org/

Примеры реализации https://p5js.org/libraries/ p5.js — это библиотека JavaScript для творческого кодирования с акцентом на то, чтобы сделать кодирование доступным и доступным для художников, дизайнеров, преподавателей, начинающих и всех остальных! p5.js является бесплатным и открытым исходным кодом

Откройте страницу и начинайте кодить https://editor.p5js.org/

Попробуйте вставить следующий код

function setup() {
createCanvas(windowWidth, windowHeight);
}

function draw() {
background(100);
stroke(‘darcyan’);
strokeWeight(2);
fill(‘darkgray’);
rectMode(CENTER);
//noStroke();

circle(0,0,100);
rect(width/2,height/2,150,150);
scale(1,1)
line(0,0,500,500);
}

Нарисовать квадрат внутри квадрата

function setup() {
    createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(100);
  stroke('darcyan');
  strokeWeight(2);
  fill('darkgray');
  noFill();
  rectMode(CENTER);
  //noStroke();
  translate(50,-50)
  circle(0,0,100);
  //rect(width/2,height/2,50,50);
  for(let i=1;i<6;i++){
   // rotate(15)
  rect(width/2,height/2,50*i,50*i);
    }
  //line(0,0,500,500);
}

А теперь взрыв мозга АНИМАЦИЯ

function setup() {
  createCanvas(windowWidth, windowHeight);
}
function draw() {
  background(220); 
  rectMode(CENTER);
  translate(width/2, height/2);
  //noFill();
  strokeWeight(2); 
 for(let i = 800; i > 50; i-=25) {  
   if(i%100) {     
      rotate(radians(frameCount/2));     
      } else {     
        rotate(-radians(frameCount/10));     
      }
  rect(0, 0, 100+cos(radians(frameCount))*i, 100+cos(radians(frameCount))*i)
 } 
}

рисование кругами

Предпросмотр(откроется в новой вкладке)

function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля
ПОЗВОНИТЕ МНЕ
+
Жду звонка!