main.js

$(document).ready(function () {

  var str = "255 197 110 65 39 52 44 45 54 49 61 66 86 112 106 94 75 58 55 66 70 65 120 195 125 71 77 91 86 80 97 124 133 128 98 110 112 90 102 121 118 118 214 255 250 252 252 252 241 141 72 36 47 40 38 40 37 62 81 111 113 77 61 68 98 109 91 77 88 103 163 192 127 87 95 100 94 78 71 79 116 134 113 90 89 95 80 80 103 104 137 245 253 251 252 252 174 83 41 52 38 31 31 41 75 90 126 113 57 80 125 157 189 214 212 191 182 183 198 179 155 149 163 166 152 149 126 90 72 84 102 101 79 70 77 67 70 97 105 184 255 250 252 252 101 50 52 43 29 24 43 85 92 123 114 49 108 164 197 212 218 220 224 226 225 224 222 224 220 214 205 205 212 205 197 167 116 75 59 74 83 62 60 65 59 62 89 124 240 252 251 252 61 50 44 30 22 46 84 86 116 106 42 106 181 202 212 216 221 223 227 229 228 228 231 230 231 230 228 220 218 219 222 223 196 137 73 56 63 69 53 54 63 55 56 74 188 255 249 252 54 48 30 22 46 74 78 117 112 43 68 155 201 208 217 221 221 222 226 228 227 229 229 231 234 233 230 229 231 233 231 229 226 210 146 73 48 61 63 46 55 61 50 47 86 211 255 250 51 36 24 44 67 77 93 116 42 71 128 191 208 217 221 225 226 225 225 226 229 232 232 234 236 234 232 233 234 234 233 230 226 221 210 141 68 39 58 54 42 52 61 49 39 95 230 255 42 24 42 57 68 82 109 62 82 147 191 207 217 226 225 228 228 228 227 227 228 230 233 235 236 235 235 235 235 232 231 229 226 221 218 199 142 77 39 58 51 40 50 60 47 42 162 255 32 41 51 57 70 91 90 89 157 185 199 209 219 226 228 228 228 229 229 230 229 230 231 234 235 234 234 234 234 231 228 229 226 223 221 219 194 143 71 42 56 48 39 45 53 41 90 241 37 44 43 60 70 96 80 116 164 189 202 210 220 226 228 226 226 226 226 227 231 233 233 235 236 235 235 234 234 232 232 231 225 223 222 220 215 180 116 50 45 59 47 39 40 48 47 154 43 37 45 64 82 91 83 117 171 194 208 223 227 229 231 231 228 228 229 229 233 235 234 235 237 237 237 235 236 235 234 229 229 232 230 227 221 205 155 84 39 48 52 42 34 39 48 79 44 37 49 75 85 83 82 113 176 207 214 215 225 237 235 234 232 234 234 231 232 238 235 236 237 237 238 235 236 237 235 236 226 209 189 191 205 208 186 130 60 32 51 43 33 30 41 64 39 34 64 77 79 84 84 109 187 189 160 144 146 172 220 239 237 236 235 232 235 237 235 237 237 237 237 235 235 240 229 187 170 187 198 204 194 199 194 175 94 39 32 45 40 33 33 67 33 30 79 72 81 88 93 113 161 155 184 190 181 142 125 183 225 236 238 236 236 238 237 239 240 240 240 236 230 204 155 160 215 230 230 234 232 203 192 192 131 48 39 33 35 41 38 69 23 38 89 78 79 97 103 108 167 211 223 221 221 221 178 118 139 194 223 235 234 238 238 241 240 243 236 216 182 148 183 234 228 221 224 231 237 218 191 193 167 72 46 46 35 42 43 59 29 47 83 78 80 111 112 113 196 219 216 212 208 211 219 195 146 160 180 220 233 233 232 240 239 239 226 200 176 202 232 228 227 225 222 225 230 222 195 191 182 101 25 45 49 44 55 61 41 44 88 84 88 124 118 123 195 212 209 210 209 205 207 209 202 184 182 196 226 229 230 237 236 231 220 210 214 216 200 193 185 183 193 212 220 221 198 195 188 109 23 21 55 48 50 75 39 48 94 82 91 124 122 131 191 202 192 185 159 136 132 142 163 190 196 196 214 221 228 233 229 223 214 211 211 194 173 156 131 91 99 141 188 214 202 193 192 106 31 22 34 53 61 77 37 42 95 76 92 134 123 137 184 188 150 94 64 91 115 142 127 148 186 196 201 215 226 233 226 222 215 211 205 200 184 194 185 117 82 74 151 210 209 192 198 115 36 43 36 34 53 85 31 34 92 78 97 139 126 146 183 166 108 68 138 206 238 231 154 119 162 191 193 206 225 235 230 225 214 208 209 198 234 254 255 145 104 102 138 210 214 194 197 127 35 43 48 34 33 71 28 38 84 73 93 140 132 166 195 181 123 138 234 247 247 223 151 97 133 185 191 199 224 232 226 225 218 220 205 220 234 245 246 152 136 168 192 222 220 197 197 131 54 53 46 37 38 61 26 41 86 75 97 141 134 180 206 203 166 152 200 221 233 210 169 163 160 193 199 197 222 232 225 224 226 226 221 214 209 220 214 194 173 182 227 232 223 197 197 141 109 99 42 35 43 100 32 49 99 74 99 135 138 179 217 216 205 172 184 196 196 200 212 214 222 215 205 191 220 237 226 220 228 228 225 226 221 222 214 202 195 216 233 235 220 198 195 159 158 148 32 46 48 130 29 64 109 77 102 131 144 177 215 217 210 209 209 211 213 218 224 227 222 222 210 186 218 233 222 215 225 232 229 228 230 230 227 222 224 231 234 233 218 196 193 183 199 171 28 38 65 172 22 68 110 87 99 127 144 167 204 223 214 214 218 223 226 227 227 228 227 226 205 196 211 228 224 214 220 231 234 233 236 238 236 236 234 235 237 231 211 192 195 209 214 189 41 54 137 242 25 77 114 93 110 123 144 162 189 220 223 219 224 227 227 229 228 228 229 213 200 206 207 225 225 215 217 225 233 235 237 239 239 239 238 236 233 223 203 189 198 206 205 172 37 169 251 252 37 82 122 98 127 127 138 161 177 205 221 224 230 232 232 231 231 227 217 196 202 199 203 225 225 213 214 219 230 233 237 238 238 239 238 235 230 215 198 186 200 206 207 130 52 221 255 249 79 77 136 98 129 140 133 159 175 190 209 220 229 231 233 235 231 225 210 189 193 189 215 232 228 218 213 218 230 235 236 237 240 240 235 226 220 208 195 183 200 213 196 74 51 217 255 250 160 47 119 105 135 153 137 155 169 186 196 207 221 224 229 231 231 228 211 184 176 198 231 237 233 224 215 221 229 235 239 236 236 238 234 222 211 200 191 186 197 215 135 27 69 224 255 251 203 126 163 113 140 160 142 156 167 182 188 197 213 220 223 228 229 225 201 174 180 211 234 239 241 229 219 221 228 232 235 236 234 232 227 221 211 202 192 190 203 191 57 30 77 223 255 250 221 232 253 178 130 163 141 155 164 175 187 198 211 218 221 227 227 221 199 202 208 201 216 231 235 222 226 225 223 223 226 231 230 226 223 217 211 202 196 190 207 116 27 39 79 226 255 250 217 209 232 221 129 151 139 148 155 171 181 193 207 215 218 223 216 192 196 199 172 206 210 212 218 204 179 206 217 212 208 217 223 223 219 213 209 199 195 188 206 100 34 34 88 232 255 250 212 186 217 224 150 131 140 144 152 165 172 185 201 211 214 211 196 184 172 167 104 121 172 198 203 190 158 176 213 220 205 195 212 217 214 210 203 201 195 190 205 96 33 38 88 225 255 251 219 172 205 231 167 118 140 147 157 160 165 178 193 204 208 195 188 203 197 191 204 176 166 183 202 222 222 210 216 214 212 194 194 211 209 207 204 202 196 194 198 83 36 45 100 219 255 251 233 174 200 233 179 114 141 148 163 160 163 171 185 197 197 183 182 191 204 213 214 219 218 214 221 224 219 220 216 211 210 203 185 198 204 206 205 202 196 200 184 62 40 50 117 226 255 250 248 180 191 219 194 110 139 143 166 165 162 170 181 193 188 168 171 195 209 217 220 225 226 227 231 231 226 227 222 213 206 205 191 188 198 205 206 203 197 206 160 44 43 60 127 230 255 251 238 187 195 212 208 112 134 140 163 170 166 171 182 190 179 160 173 197 210 218 226 230 232 236 240 236 230 225 220 214 205 203 199 188 196 203 206 203 200 210 124 30 46 70 147 247 252 252 208 183 202 217 213 120 123 144 155 170 170 173 185 189 169 156 163 165 167 184 192 193 196 212 211 202 190 188 185 191 203 198 197 187 195 203 205 204 200 202 88 28 50 81 176 255 250 252 176 181 206 222 210 134 113 143 151 165 173 177 188 189 166 146 122 116 142 154 159 166 160 163 173 179 182 180 177 146 141 196 197 191 194 205 203 203 202 178 49 30 54 96 209 255 249 252 173 162 207 217 202 146 97 129 148 162 169 179 191 191 176 138 60 21 99 192 225 226 233 226 242 237 225 204 128 32 20 143 206 195 198 205 201 200 205 134 31 36 54 119 237 254 251 252 186 165 191 214 204 135 96 105 140 158 166 177 190 199 184 138 96 37 36 68 112 132 147 124 149 137 140 127 93 45 14 62 191 197 200 206 202 201 194 79 31 41 59 152 254 251 252 252 186 180 200 220 208 114 85 69 129 149 165 178 195 206 187 151 139 70 86 84 84 89 89 99 119 135 157 166 169 126 49 62 191 197 202 206 202 203 161 45 35 43 66 180 255 250 252 252 187 182 207 219 209 104 94 44 102 140 161 176 198 208 190 160 163 108 124 139 145 149 162 167 163 164 167 166 173 156 69 109 214 194 205 203 199 198 114 37 36 45 80 202 255 251 252 251 184 185 205 217 229 173 90 44 55 125 150 166 194 209 185 185 196 121 145 165 164 161 170 170 169 172 170 175 183 150 84 159 215 193 203 201 197 182 62 35 33 49 98 224 255 251 252 251 177 190 208 223 233 230 106 49 22 96 139 155 183 208 188 182 187 162 138 176 176 173 170 168 170 168 175 188 194 167 123 195 209 196 202 198 195 147 27 36 29 52 91 197 255 252 251 251 179 200 216 229 230 239 130 51 30 55 117 145 166 205 192 171 186 205 154 175 193 189 192 190 174 182 195 204 195 176 174 209 203 198 203 192 193 97 14 31 31 52 89 140 208 246 253 246 186 196 213 229 228 239 145 37 39 37 91 130 152 195 199 169 160 173 181 155 190 213 202 190 189 196 205 192 203 181 189 207 200 202 200 188 172 52 10 25 29 49 81 129 186 226 242 227 198 196 211 221 222 238 180 49 27 18 68 111 141 182 203 176 150 146 186 188 167 190 182 170 181 193 193 207 210 169 190 202 201 204 194 177 145 43 11 22 28 42 77 101 149 209 228 217"

  var str2 = "70 80 82 72 58 58 60 63 54 58 60 48 89 115 121 119 115 110 98 91 84 84 90 99 110 126 143 153 158 171 169 172 169 165 129 110 113 107 95 79 66 62 56 57 61 52 43 41 65 61 58 57 56 69 75 70 65 56 54 105 146 154 151 151 155 155 150 147 147 148 152 158 164 172 177 182 186 189 188 190 188 180 167 116 95 103 97 77 72 62 55 58 54 56 52 44 50 43 54 64 63 71 68 64 52 66 119 156 161 164 163 164 167 168 170 174 175 176 178 179 183 187 190 195 197 198 197 198 195 191 190 145 86 100 90 65 57 60 54 51 41 49 56 47 38 44 63 55 46 52 54 55 83 138 157 158 165 168 172 171 173 176 179 179 180 182 185 187 189 189 192 197 200 199 196 198 200 198 197 177 91 87 96 58 58 59 51 42 37 41 47 45 37 35 36 30 41 47 59 94 141 159 161 161 164 170 171 172 176 178 179 182 183 183 187 189 192 192 194 195 200 200 199 199 200 201 197 193 111 71 108 69 55 61 51 42 43 56 54 44 24 29 31 45 61 72 100 136 150 159 163 162 163 170 172 171 174 177 177 180 187 186 187 189 192 192 194 195 196 197 199 200 201 200 197 201 137 58 98 92 57 62 53 47 41 40 51 43 24 35 52 63 75 104 129 143 149 158 162 164 166 171 173 172 174 178 178 179 187 188 188 191 193 194 195 198 199 199 197 198 197 197 197 201 164 52 78 87 69 58 56 50 54 39 44 42 26 31 49 65 91 119 134 145 147 152 159 163 167 171 170 169 174 178 178 179 187 187 185 187 190 188 187 191 197 201 199 199 200 197 196 197 182 58 62 77 61 60 55 49 59 52 54 44 22 30 47 68 102 123 136 144 148 150 153 157 167 172 173 170 171 177 179 178 186 190 186 189 196 193 191 194 190 190 192 197 201 203 199 194 189 69 48 74 56 60 57 50 59 59 51 41 20 34 47 79 111 132 139 143 145 147 150 151 160 169 172 171 167 171 177 177 174 180 182 181 192 196 189 192 198 195 194 196 198 201 202 195 189 70 39 69 61 61 61 53 59 59 45 40 26 40 61 93 124 135 138 142 144 146 151 152 158 165 168 168 165 161 164 173 172 167 172 167 180 198 198 193 199 195 194 198 200 198 197 195 190 65 35 68 59 59 62 57 60 59 50 44 32 54 90 115 132 137 138 140 144 146 146 156 165 168 174 176 176 175 168 168 169 171 175 171 172 192 194 184 198 205 201 194 195 193 195 192 186 57 38 72 65 57 62 58 57 60 54 49 47 79 116 130 138 141 141 139 141 143 145 157 164 164 166 173 174 176 179 179 176 181 189 188 173 180 175 160 182 189 198 192 189 190 190 188 172 46 44 64 66 59 62 57 56 62 53 50 66 103 133 137 141 143 141 136 132 131 136 127 118 111 107 108 123 131 143 154 158 166 177 181 175 170 159 148 171 161 176 185 192 194 188 190 162 53 49 58 63 61 61 55 56 61 51 50 81 116 139 142 142 146 144 136 128 119 112 97 85 90 91 88 92 90 80 81 84 106 122 132 144 145 144 147 163 147 163 173 181 190 187 191 167 61 48 53 61 61 58 54 56 61 51 53 89 123 140 144 145 146 147 136 122 107 99 95 92 90 87 83 76 67 52 46 52 63 69 83 96 119 132 148 159 136 137 143 138 143 152 156 156 70 48 50 59 61 57 54 54 61 52 56 93 124 135 140 144 148 150 140 125 114 101 80 54 56 54 41 41 33 40 39 35 49 60 63 74 107 129 147 147 116 111 100 77 76 86 108 111 73 49 50 60 62 60 57 55 63 59 56 89 121 134 139 146 151 152 150 141 127 111 96 77 85 70 32 31 37 91 65 50 48 59 73 83 112 136 155 130 60 46 38 40 43 81 116 91 72 52 48 58 62 62 59 53 61 59 52 85 114 134 140 147 154 159 158 153 145 143 150 126 121 125 68 45 89 137 95 70 78 75 95 109 131 153 171 94 23 16 32 82 82 65 113 77 71 54 48 56 62 62 60 53 60 56 52 75 108 133 141 149 158 166 169 167 163 156 155 146 112 119 134 127 142 140 121 117 129 114 120 129 146 174 191 98 46 33 33 109 147 98 109 67 73 55 50 56 64 64 61 58 61 53 54 64 106 129 140 148 159 169 175 176 174 165 159 156 145 120 115 124 127 131 133 141 147 142 141 147 161 182 202 154 114 96 100 158 158 153 123 61 76 57 48 56 64 64 63 62 61 54 55 44 97 131 137 147 158 168 177 181 183 179 170 168 169 165 155 152 151 152 154 162 165 158 153 158 168 187 206 186 147 135 144 145 152 178 115 57 74 58 48 58 64 63 63 59 63 55 53 66 104 130 132 144 153 162 170 180 185 187 181 178 182 180 177 173 171 171 177 176 172 164 161 167 164 185 207 197 173 152 141 141 161 191 104 54 69 60 48 57 65 62 60 57 64 55 50 94 111 124 130 135 150 159 163 172 179 184 184 178 178 177 173 171 174 177 178 176 169 165 161 163 161 180 205 201 183 171 177 178 180 194 101 55 65 60 47 55 65 63 59 58 63 57 52 90 105 117 122 130 143 153 157 163 171 174 182 183 182 178 174 175 175 177 175 172 163 161 159 157 162 178 200 201 188 181 172 177 187 198 98 57 63 61 48 52 61 64 63 60 65 57 51 95 104 113 117 127 136 145 152 156 162 162 165 173 177 182 183 183 180 181 177 165 153 154 152 153 160 174 193 200 188 185 180 182 192 196 101 60 60 56 49 50 60 66 64 62 64 59 53 99 104 111 112 118 132 142 147 155 158 160 159 162 171 176 184 186 183 180 169 154 141 135 145 155 164 180 196 205 188 189 188 189 193 192 98 61 64 55 49 49 60 66 63 64 63 60 57 99 105 108 112 113 125 139 143 150 155 158 164 169 174 176 182 183 182 177 163 141 133 147 151 164 170 185 200 210 194 188 192 186 185 180 88 64 67 60 46 50 59 65 64 64 64 59 56 101 103 108 109 109 118 134 143 143 147 155 159 166 171 174 177 179 178 172 153 129 143 161 159 166 171 186 197 207 203 185 191 183 179 164 73 67 67 66 48 50 57 65 65 63 64 61 57 103 108 114 112 110 115 128 138 144 145 152 156 159 164 168 172 172 169 161 139 125 147 156 161 162 164 180 188 188 197 185 187 181 180 137 65 70 68 70 52 47 53 62 65 63 65 61 58 105 109 112 120 113 112 122 134 141 149 150 153 155 159 164 167 167 162 152 134 115 126 119 106 99 109 141 158 150 155 175 184 176 175 106 63 70 68 68 50 46 50 57 63 63 64 61 59 107 110 110 117 117 114 117 128 137 147 148 150 153 156 161 162 163 156 150 148 105 70 45 26 25 47 73 74 79 128 177 180 173 157 77 66 68 67 68 52 49 51 56 62 62 62 62 60 101 107 108 114 115 114 117 125 134 143 148 149 152 154 158 160 158 155 160 158 132 88 73 73 64 52 66 91 138 160 174 173 171 125 64 67 63 64 68 54 50 49 54 60 60 60 62 60 98 105 105 109 111 114 117 125 131 139 145 148 153 153 156 157 156 161 168 165 153 139 122 115 105 89 103 150 182 161 171 173 162 89 64 64 62 64 69 56 48 49 56 58 60 59 62 60 89 99 108 106 109 111 119 120 125 134 140 146 152 153 153 153 156 159 162 160 150 136 129 133 133 122 133 148 178 168 168 175 132 61 67 66 65 63 69 57 47 50 55 58 59 61 62 60 89 96 105 107 105 107 117 120 123 124 133 141 149 153 151 145 151 145 139 140 138 128 126 124 129 125 136 142 164 172 168 168 87 58 67 63 62 61 69 57 39 44 55 56 59 63 62 62 84 91 92 98 102 103 113 119 121 118 128 138 146 151 147 142 140 128 127 128 129 126 135 140 135 130 143 146 149 166 174 131 62 65 62 59 67 63 68 83 89 65 42 52 60 60 62 63 77 84 84 91 99 101 107 112 117 118 122 134 145 149 144 134 127 127 129 130 134 125 126 132 152 153 151 150 151 165 171 87 59 65 64 61 58 86 122 138 208 207 154 71 52 56 55 56 69 77 83 85 93 91 102 112 116 118 119 127 140 144 142 131 112 95 85 75 62 58 56 59 87 88 83 127 142 165 149 62 65 62 59 77 113 192 156 84 185 196 197 168 81 70 75 69 58 65 73 82 81 79 95 107 114 116 116 123 136 142 136 132 131 102 71 58 49 41 33 41 36 49 60 99 136 168 111 53 63 71 138 186 203 195 146 87 91 72 79 95 103 82 61 74 55 57 68 75 76 77 84 96 106 110 111 121 130 138 136 142 153 159 152 152 154 145 133 136 147 158 156 155 147 158 74 57 60 123 181 174 126 89 72 67 57 43 55 67 76 86 60 45 51 45 52 68 75 73 77 88 96 100 104 113 115 121 134 146 149 146 149 148 155 168 174 179 178 169 169 174 161 131 44 47 82 150 168 136 104 75 66 80 67 58 48 54 68 88 121 102 51 45 38 53 66 65 70 86 92 96 102 103 109 116 130 136 136 133 136 138 137 135 128 130 143 158 165 164 147 87 62 74 123 160 170 100 99 107 79 71 86 75 57 45 49 65 122 130 43 48 40 39 55 61 59 71 82 87 88 93 105 118 123 128 130 124 111 98 94 88 67 55 84 129 147 148 105 48 82 142 161 164 164 76 72 85 100 88 72 90 84 54 48 54 73 100 73 36 44 31 37 53 51 55 67 74 77 87 97 108 118 125 132 122 106 86 80 82 75 73 83 110 129 126 46 22 130 177 196 193 166 72 52 54 73 100 92 75 99 95 65 68 61 63 91 65 42 37 22 28 39 44 57 68 74 83 92 101 119 131 143 141 134 136 140 139 134 136 139 138 136 85 23 114 202 198 199 180 173 98 36 86 130 150 137 99 77 101 99 72 56 43 77 82 79 70 56 28 20 25 36 50 63 73 83 98 111 124 139 156 160 159 169 168 165 163 159 149 114 43 26 133 183 192 177 152 137 130 125 139 173 195 186 137 101 88 101 105 70 46 77 72 84 87 87 81 64 37 20 31 40 46 65 88 108 110 125 149 157 153 162 164 158 159 154 140 78 21 11 61 144 168 173 157 138 150 148 132 159 182 183 136 106 116 95 106 109 82"
  // console.log(str);

  var arr = str.split(" ");
  var arr2 = str2.split(" ");

  for (var i = 0; i < 48; i++){
    for (var j = 0; j < 48; j++){
      var pixel_value = arr[i * 48 + j];
      var pixel_value2 = arr2[i * 48 + j];

      var item = '<div class="pixel" id="pixel_' + i + '_'+ j + '"></div>';
      var item2 = '<div class="pixel" id="pixel2_' + i + '_'+ j + '"></div>';
      $('#pic').append(item);
      $('#pic2').append(item2);
    }
  }


  for (var i = 0; i < 48; i++){
    for (var j = 0; j < 48; j++){
      var pixel_value = arr[i * 48 + j];
      var pixel_value2 = arr2[i * 48 + j];

      var item = '<div class="pixel" id="pixel_' + i + '_'+ j + '"></div>';
      var item2 = '<div class="pixel" id="pixel2_' + i + '_'+ j + '"></div>';
      // [i][j] index of pixel value

      document.getElementById('pixel_'+ i + '_'+ j).style.backgroundColor = "rgb("+pixel_value+","+pixel_value+","+pixel_value+")";
      document.getElementById('pixel2_'+ i + '_'+ j).style.backgroundColor = "rgb("+pixel_value2+","+pixel_value2+","+pixel_value2+")";
    }
  }
});