Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.01.2020, 13:35   #1
MakarovDs
Пользователь
 
Аватар для MakarovDs
 
Регистрация: 10.01.2020
Сообщений: 30
По умолчанию Фальшивые бесконечные пространства

Идея в том что-бы линии вертикальные и горизонтальные двигались таким образом что-бы создавалась ощущение 3-мерной линейной плоскости, или пространства, у меня есть несколько идеи, как это сделать

1) чем ближе приближается к центру вертикальная линия тем больше уклон дается по Х и уходя за рамки они снова создаются слева.

2) горизонтальные линии приближаясь к низу увеличивают скорость приближения, их должно быть определенное количество, и самая верхняя должна не двигаться.

3) в квадратах между линиями будет случайным образом выбираться картинка домика, рельефа или озера, при нажатии на домик можно увидеть случайный план дома, со случайными предметами, картинка меняется уходя за рамки меняется на другую картинку, это то что я хочу сделать. Не судите строго.

Я не почему при изменение параметров в объекте, объект не определён, и как сделать изменение context.LineTo, я только начинающий в Js,

Код:
<html><body><canvas id="myCanvas" width="501" height="501"></canvas></body><script>
      function ramb(){   
      var canvas = document.getElementById("myCanvas");
     
      var context = canvas.getContext("2d");
      var my_gradient = context.createLinearGradient(0,0,0,170);
      my_gradient.addColorStop(0,"black");
      my_gradient.addColorStop(1,"white");
      context.fillStyle = my_gradient;
      context.fillRect(0,0,500,180);
      var v = Math.floor(Math.random() + Math.random()+Math.random()* Math.random() + Math.random()+Math.random()*2 );
      var q,w,e,r,t,y,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m,u;   
      i = 0; o = 1; p = 2; a = 3; s = 4; d = 5; f = 6; g = 7; h = 8; j = 9;
      k = -1; l = -2; z = -3; x = -4; c = -5; b = -6; n = -7; m = -8; u = -9;
      //Гора
      context.bеginPath;
      context.moveTo(10, 200); 
      context.lineTo(151,100);
     /*  context.setTransform(v,v-v,v-v,v*v,v*v,v);*/
      context.lineTo(200,150);
      context.lineTo(250,170);
      context.lineTo(300,150);
      context.lineTo(401,50);
      context.lineTo(500,200);
      context.closePath();
      context.strokeStyle = "black";
      context.stroke();
    
    	//Рамки
    context.beginPath(); 
    context.moveTo(0, 200);
    context.lineTo(500,200);
    context.moveTo(0, 0);
    context.lineTo(0, 500);
    context.moveTo(500, 0);
    context.lineTo(0, 0);
    context.moveTo(500, 0);
    context.lineTo(500, 500);
    context.closePath();
    context.strokeStyle = "red";
    context.stroke();
   
  
  
   var key = [(
    //горизонтальные линии
     context.beginPath(),
     context.moveTo(k+u, 220),
     context.lineTo(500, 220),
     context.moveTo(k+u, 250),
     context.lineTo(500, 250),
     context.moveTo(k+u, 300),
     context.lineTo(500, 300),
     context.moveTo(k+u, 400),
     context.lineTo(500, 400),
     context.moveTo(k+u, 500),
     context.lineTo(500, 500),
    
    //вертикальные линии40
    context.moveTo(40,200),
    context.lineTo(0,300),
    context.moveTo(110,200),
    context.lineTo(20,500),
    context.moveTo(200,200),
    context.lineTo(150,500),
    context.moveTo(300,200),
    context.lineTo(360,500),
    context.lineTo(430,500),
    context.moveTo(390,200),
    context.lineTo(480,500),
    context.moveTo(460,200),
     context.lineTo(500,300),
     context.closePath(),
     context.strokeStyle = "red",
     context.stroke())]
       }
       
       function arbuzik(){     
       return key[1] = context.moveTo(66, 220);
       }
       
       function pomidorik(){
       	
       }
       
       function bananes(){ setInterval(ramb ,1000);}
       

       function arbuzik(w){ 

   return q+10; 
   }
        
        
     
</script></body><body><button onclick="ramb()">start</button><button onclick="arbuzik()"><</button> <button onclick="bananes()">></button> </body></html>
MakarovDs вне форума Ответить с цитированием
Старый 11.01.2020, 15:31   #2
сфинкс
Форумчанин
 
Аватар для сфинкс
 
Регистрация: 17.06.2012
Сообщений: 954
По умолчанию

создав myCanvas.htm вижу только перспективу линий
и горы без движения

возможно помогут мои разработки где главное: массив

https://programmersforum.ru/showpost...7&postcount=27



https://programmersforum.ru/showpost...7&postcount=35



думаю теме нужны картинки свои
Случайные и Массивы https://programmersforum.ru/showthread.php?t=344371 Учим C# & basic & excel & python https://programmersforum.ru/showthre...=327446&page=5 ничего нерекомендую
сфинкс вне форума Ответить с цитированием
Старый 11.01.2020, 15:46   #3
MakarovDs
Пользователь
 
Аватар для MakarovDs
 
Регистрация: 10.01.2020
Сообщений: 30
По умолчанию

Спасибо за комментарий, я подумаю, меня вообще радуют действия с бесконечностями и геометрическими абстракциями.

Последний раз редактировалось MakarovDs; 11.01.2020 в 22:01.
MakarovDs вне форума Ответить с цитированием
Старый 11.01.2020, 19:45   #4
MakarovDs
Пользователь
 
Аватар для MakarovDs
 
Регистрация: 10.01.2020
Сообщений: 30
По умолчанию

случайный массив высот это хорошо, но мне нужно совсем другое, я хочу доделать код, хотя бы научиться двигать сраные линии, мне надоело думать что же не так, хочу результат увидеть, подскажите хотя бы косвенно как такое сделать? А лучше доделайте мой код просто.
MakarovDs вне форума Ответить с цитированием
Старый 11.01.2020, 22:23   #5
сфинкс
Форумчанин
 
Аватар для сфинкс
 
Регистрация: 17.06.2012
Сообщений: 954
По умолчанию

в той теме в диалогах мол запас ячеек массива
для возможности строить карту и двигать

как вижу развитие рельефов:
сразу создаётся случайный или неслучайный
массив условно 100х100 ячеек далее неизменный

зато на экран выводится часть массива рельефа типа 20х20 ячеек

что должно быть просто теоретически перемещаться
черпая готовые данные и неизвестно то ли требуется
Случайные и Массивы https://programmersforum.ru/showthread.php?t=344371 Учим C# & basic & excel & python https://programmersforum.ru/showthre...=327446&page=5 ничего нерекомендую
сфинкс вне форума Ответить с цитированием
Старый 06.11.2020, 16:26   #6
MakarovDs
Пользователь
 
Аватар для MakarovDs
 
Регистрация: 10.01.2020
Сообщений: 30
По умолчанию

Непонятно, а как сделать что-бы линия на canvas менялась, а не сохранялась?
Код:
<html><head>
<canvas width="500" height="450" id="MyCanvas"></canvas>
<button onclick="WektorPlan()">WYP</button>
</head><body>  <div class="ic">
  <input oninput="WektorPlan()" type="text" id="nameA" placeholder="Y-координаты">
  <input oninput="WektorPlan()" type="text" id="nameB" placeholder="X-координаты">
	</div>
<script>

 function WektorPlan() {
var ca = document.getElementById("MyCanvas");
var ctx = ca.getContext("2d");
//const [a, b] = ["nameA", "nameB"].map(s => document.getElementById(s).value)
var a = document.getElementById("nameA").value;
ctx.beginPath();
ctx.moveTo(this.document.getElementById("nameA").value, 100);
ctx.lineTo(100, 200);
ctx.moveTo(200, 200);
ctx.lineTo(200, 100);
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.moveTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.strokeStyle = "red";
ctx.stroke();

};
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //Максимум не включается, минимум включается
}

/*
function moveI(){intervalID = setInterval(start(), 1000);}     
function moveII(){clearInterval(intervalID, 1000);}*/
</script></body>
<style>
    #myCanvas {
      position: relative;
      cursor: pointer;
    }
	.ic input, .bc button {
      margin: 5px;
}</style>
</html>
MakarovDs вне форума Ответить с цитированием
Старый 11.11.2020, 04:28   #7
MakarovDs
Пользователь
 
Аватар для MakarovDs
 
Регистрация: 10.01.2020
Сообщений: 30
По умолчанию

Я тупое ленивое животное ненавижу себя.
MakarovDs вне форума Ответить с цитированием
Старый 11.11.2020, 14:33   #8
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,150
По умолчанию

Цитата:
Сообщение от MakarovDs Посмотреть сообщение
Непонятно, а как сделать что-бы линия на canvas менялась, а не сохранялась?
никак.... стирать старую - рисовать новую
ADSoft вне форума Ответить с цитированием
Старый 12.11.2020, 06:18   #9
MakarovDs
Пользователь
 
Аватар для MakarovDs
 
Регистрация: 10.01.2020
Сообщений: 30
По умолчанию

Цитата:
Сообщение от ADSoft Посмотреть сообщение
никак.... стирать старую - рисовать новую
Ну получилось же как-то с фракталами https://jsfiddle.net/p1k8z3xv/ хотя есть одна идея, например сделать незначительную генерацию math.random'a() и прибавлять к ней this.document.getElementById("nameA ").value ну щас посмотрим.
MakarovDs вне форума Ответить с цитированием
Старый 12.11.2020, 10:59   #10
MakarovDs
Пользователь
 
Аватар для MakarovDs
 
Регистрация: 10.01.2020
Сообщений: 30
По умолчанию

Сделал ctx.moveTo(Math.random()+this.docum ent.getElementById("nameA").value, 100); Вообще не двигается.

getRandomInt(this.document.getEleme ntById("nameA").value,100)

Сделал функцию но все равно сохраняется нпа canvas
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //Максимум не включается, минимум включается
}
MakarovDs вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесконечные ответы от сервера при одном запросе SignalR ASP.net Core Yudin Общие вопросы Web 1 14.04.2020 06:09
Автоматизация парковочного пространства Office-it Фриланс 13 12.12.2019 12:55
Пространства имен, компиляция. Kasatik Общие вопросы C/C++ 4 20.01.2019 14:17
Пространства имен С++ Jumb0 Помощь студентам 1 10.03.2013 19:49
Бесконечность пространства. Levsha100 Свободное общение 96 14.12.2012 00:15